Bootstrap React Select

Bootstrap React Select component. Customize the native `<select>`s with custom CSS that changes the element's initial appearance.

On this page

Default#

1<CFormSelect 
2  aria-label="Default select example"
3  options={[
4    'Open this select menu',
5    { label: 'One', value: '1' },
6    { label: 'Two', value: '2' },
7    { label: 'Three', value: '3', disabled: true }
8  ]}
9/>
10
11// You can also add options manually
12<CFormSelect aria-label="Default select example">
13  <option>Open this select menu</option>
14  <option value="1">One</option>
15  <option value="2">Two</option>
16  <option value="3" disabled>Three</option>
17</CFormSelect>

Sizing#

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

1<CFormSelect size="lg" className="mb-3" aria-label="Large select example">
2  <option>Open this select menu</option>
3  <option value="1">One</option>
4  <option value="2">Two</option>
5  <option value="3">Three</option>
6</CFormSelect>
7<CFormSelect size="sm" className="mb-3" aria-label="Small select example">
8  <option>Open this select menu</option>
9  <option value="1">One</option>
10  <option value="2">Two</option>
11  <option value="3">Three</option>
12</CFormSelect>

The multiple attribute is also supported:

1<CFormSelect size="lg" multiple aria-label="Multiple select example">
2  <option>Open this select menu</option>
3  <option value="1">One</option>
4  <option value="2">Two</option>
5  <option value="3">Three</option>
6</CFormSelect>

As is the htmlSize{p}operty:

1<CFormSelect htmlSize={3} multiple aria-label="size 3 select example">
2  <option>Open this select menu</option>
3  <option value="1">One</option>
4  <option value="2">Two</option>
5  <option value="3">Three</option>
6</CFormSelect>

Disabled#

Add the disabled boolean attribute on a select to give it a grayed out appearance and remove pointer events.

1<CFormSelect aria-label="Disabled select example" disabled>
2  <option>Open this select menu</option>
3  <option value="1">One</option>
4  <option value="2">Two</option>
5  <option value="3">Three</option>
6</CFormSelect>

API#

CFormSelect#

1import { CFormSelect } from '@coreui/bootstrap-react'
2// or
3import CFormSelect from '@coreui/bootstrap-react/src/components/form/CFormSelect'

Property	Description	Type	Default
className	A string of all className you want applied to the component.	`string`	-
htmlSize	Specifies the number of visible options in a drop-down list.	`number`	-
invalid	Set component validation state to invalid.	`boolean`	-
onChange	Method called immediately after the `value` prop changes.	`ChangeEventHandler<HTMLSelectElement>`	-
options	Options list of the select component. Available keys: `label`, `value`, `disabled`. Examples: - `options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}` - `options={['js', 'html']}`	`Option[]` \| `string[]`	-
size	Size the component small or large.	`'sm'` \| `'lg'`	-
valid	Set component validation state to valid.	`boolean`	-
value	The `value` attribute of component. @controllable onChange	`string` \| `number` \| `string[]`	-