React Form Select Component API

Form Select API

Explore the API reference for the React Form Select component and discover how to effectively utilize its props for customization.

On this page

CFormSelect#

import { CFormSelect } from '@coreui/react'
// or
import CFormSelect from '@coreui/react/src/components/form/CFormSelect'

Property	Default	Type
className#	-	`string`
A string of all className you want applied to the component.
feedback#4.2.0+	-	`ReactNode`
Provide valuable, actionable feedback.
feedbackInvalid#4.2.0+	-	`ReactNode`
Provide valuable, actionable feedback.
feedbackValid#4.2.0+	-	`ReactNode`
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
floatingClassName#4.5.0+	-	`string`
A string of all className you want applied to the floating label wrapper.
floatingLabel#4.2.0+	-	`ReactNode`
Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
htmlSize#	-	`number`
Specifies the number of visible options in a drop-down list.
invalid#	-	`boolean`
Set component validation state to invalid.
label#4.2.0+	-	`ReactNode`
Add a caption for a component.
onChange#	-	`ChangeEventHandler<HTMLSelectElement>`
Method called immediately after the `value` prop changes.
options#	-	`Option[]`, `string[]`
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']}`
size#	-	`'sm'`, `'lg'`
Size the component small or large.
text#4.2.0+	-	`ReactNode`
Add helper text to the component.
tooltipFeedback#4.2.0+	-	`boolean`
Display validation feedback in a styled tooltip.
valid#	-	`boolean`
Set component validation state to valid.
value#	-	`string`, `number`, `string[]`
The `value` attribute of component.

CFormFeedback#

import { CFormFeedback } from '@coreui/react'
// or
import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'

Property	Default	Type
as#	`div`	`(ElementType & 'symbol')`, `(ElementType & 'object')`, `(ElementType & 'div')`, `(ElementType & 'slot')`, `(ElementType & 'style')`, `... 174 more ...`, `(ElementType & FunctionComponent<...>)`
Component used for the root node. Either a string to use a HTML element or a component.
className#	-	`string`
A string of all className you want applied to the component.
invalid#	-	`boolean`
Method called immediately after the `value` prop changes.
tooltip#	-	`boolean`
If your form layout allows it, you can display validation feedback in a styled tooltip.
valid#	-	`boolean`
Set component validation state to valid.

CFormLabel#

import { CFormLabel } from '@coreui/react'
// or
import CFormLabel from '@coreui/react/src/components/form/CFormLabel'

Property	Default	Type
className#	-	`string`
A string of all className you want applied to the component.
customClassName#	-	`string`
A string of all className you want to be applied to the component, and override standard className value.

CFormText#

import { CFormText } from '@coreui/react'
// or
import CFormText from '@coreui/react/src/components/form/CFormText'

Property	Default	Type
as#	`div`	`(ElementType & 'symbol')`, `(ElementType & 'object')`, `(ElementType & 'div')`, `(ElementType & 'slot')`, `(ElementType & 'style')`, `... 174 more ...`, `(ElementType & FunctionComponent<...>)`
Component used for the root node. Either a string to use a HTML element or a component.
className#	-	`string`
A string of all className you want applied to the component.