CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.
You can support our Open Source software development in the following ways:
React select component. Customize the native `<select>`s with custom CSS that changes the element's initial appearance.
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.
1<CFormSelect2 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/>
You can also add options manually
1<CFormSelect aria-label="Default 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" disabled>Three</option>6</CFormSelect>
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
property:
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>
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>
1import { CFormSelect } from '@coreui/react'2// or3import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the component. | string | - |
feedback 4.2.0+ | Provide valuable, actionable feedback. | ReactNode | - |
feedbackInvalid 4.2.0+ | Provide valuable, actionable feedback. | ReactNode | - |
feedbackValid 4.2.0+ | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid . | ReactNode | - |
floatingClassName 4.5.0+ | A string of all className you want applied to the floating label wrapper. | string | - |
floatingLabel 4.2.0+ | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid . | ReactNode | - |
htmlSize | Specifies the number of visible options in a drop-down list. | number | - |
invalid | Set component validation state to invalid. | boolean | - |
label 4.2.0+ | Add a caption for a component. | ReactNode | - |
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' | - |
text 4.2.0+ | Add helper text to the component. | ReactNode | - |
tooltipFeedback 4.2.0+ | Display validation feedback in a styled tooltip. | boolean | - |
valid | Set component validation state to valid. | boolean | - |
value | The value attribute of component. | string | number | string[] | - |