Form Text

Customize the native <select>s with custom CSS that changes the element’s initial appearance.

Default

<Form>
    <Form.Select aria-label="Default select example">
        <option>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </Form.Select>
</Form>

Sizing

You may also choose from small and large custom selects to match our similarly sized text inputs.

Design

Code

<Form>
    <Form.Select size="lg">
        <option>Large select</option>
    </Form.Select>
    <br />
    <Form.Select>
        <option>Default select</option>
    </Form.Select>
    <br />
    <Form.Select size="sm">
        <option>Small select</option>
    </Form.Select>
</Form>