site/src/content/docs/forms/select.mdx
Custom <select> menus need only a custom class, .form-select to trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitations.
<Example code={<select class="form-select" aria-label="Default select example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select>} />
You may also choose from small and large custom selects to match our similarly sized text inputs.
<Example code={`<select class="form-select form-select-lg mb-3" aria-label="Large select example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select>
<select class="form-select form-select-sm" aria-label="Small select example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select>`} />The multiple attribute is also supported:
<Example code={<select class="form-select" multiple aria-label="Multiple select example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select>} />
As is the size attribute:
<Example code={<select class="form-select" size="3" aria-label="Size 3 select example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select>} />
Add the disabled boolean attribute on a select to give it a grayed out appearance and remove pointer events.
<Example code={<select class="form-select" aria-label="Disabled select example" disabled> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select>} />