Select

The <FormSelect /> component can be used to build native select menus.

We have done our best to normalise the styling of the select cross-browser, but options are currently unstylable with CSS in any browser, so you should expect some differences.

React

Vanilla

<FormSelect>
    <option value="a">One</option>
    <option value="b">Two</option>
    <option value="c">Three</option>
    <option value="d">Four</option>
</FormSelect>

States

There are a couple of differences to be aware of with our select implementation. First, regular input placeholders aren't available, and second, you need to add an additional modifier to the wrapper element when the select is disabled to achieve the correct styling.

For the first issue there is a fairly convoluted workaround: adding theselected, disabled, andhidden attributes to an option with an empty value, see example below. The drawback to this approach is that the select in question must be required for it to work, so if it's optional it will fail native HTML5 form validation upon submission.

React

Vanilla

<Form.Select required>
    <option value="" selected disabled hidden>
        untouched with 'placeholder'
    </option>
    <option value="b">Two</option>
    <option value="c">Three</option>
    <option value="d">Four</option>
</Form.Select>
<Form.Select disabled>
    <option value="a">disabled</option>
    <option value="b">Two</option>
    <option value="c">Three</option>
    <option value="d">Four</option>
</Form.Select>
<Form.Select valid>
    <option value="a">valid</option>
    <option value="b">Two</option>
    <option value="c">Three</option>
    <option value="d">Four</option>
</Form.Select>
<Form.Select valid={false}>
    <option value="a">invalid</option>
    <option value="b">Two</option>
    <option value="c">Three</option>
    <option value="d">Four</option>
</Form.Select>

Recipes Switch