React Select Component

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

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/react'
2// or
3import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
htmlSizeSpecifies the number of visible options in a drop-down list.number-
invalidSet component validation state to invalid.boolean-
onChangeMethod called immediately after the value prop changes.ChangeEventHandler<HTMLSelectElement>-
optionsOptions 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[]-
sizeSize the component small or large.'sm' | 'lg'-
validSet component validation state to valid.boolean-
valueThe value attribute of component.
@controllable onChange
string | number | string[]-