Form Select

The FormSelect component is a wrapper over Bootstrap's custom select component.

Form Select

Select components can be created using the FormSelect component.

import React from "react";
import { FormSelect } from "shards-react";

export default function FormSelectDemo() {
  return (
    <FormSelect>
      <option value="first">This is the first option</option>
      <option value="second">This is the second option.</option>
      <option value="third" disabled>
        This option is disabled.
      </option>
    </FormSelect>
  );
}

Sizing

You can control the form-control's size using the size prop which accepts sm for small or lg for large.

import React from "react";
import { FormSelect } from "shards-react";

export default function FormSelectSizingDemo() {
  return (
    <div>
      <FormSelect size="sm" className="mb-2">
        <option value="first">This is the first option</option>
        <option value="second">This is the second option.</option>
        <option value="third" disabled>
          This option is disabled.
        </option>
      </FormSelect>
      <FormSelect size="lg">
        <option value="first">This is the first option</option>
        <option value="second">This is the second option.</option>
        <option value="third" disabled>
          This option is disabled.
        </option>
      </FormSelect>
    </div>
  );
}

Validation

Using the valid and invalid props you can control the current active validation state.

import React from "react";
import { FormSelect } from "shards-react";

export default function FormSelectValidationDemo() {
  return (
    <div>
      <FormSelect className="mb-2">
        <option value="first">I am neutral</option>
      </FormSelect>
      <FormSelect className="mb-2" invalid>
        <option value="first">I am invalid</option>
      </FormSelect>
      <FormSelect valid>
        <option value="first">I am valid</option>
      </FormSelect>
    </div>
  );
}

Props

The following props are available for the Form Select component.

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
children	The children nodes.	`Node`	-	No
size	The size.	`String`	-	No
valid	Whether it is valid, or not.	`Bool`	-	No
invalid	Whether it is invalid, or not.	`Bool`	-	No
innerRef	The inner ref.	`ObjectFuncString`	-	No