React Form Input Component API
Form Input API
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.
Explore the API reference for the React Form Input component and discover how to effectively utilize its props for customization.
CFormInput#
import { CFormInput } from '@coreui/react'// orimport CFormInput from '@coreui/react/src/components/form/CFormInput'| Property | Default | Type |
|---|---|---|
| className# | - | string |
A string of all className you want applied to the component. | ||
| delay# | false | number, boolean |
Delay onChange event while typing. If set to true onChange event will be delayed 500ms, you can also provide the number of milliseconds you want to delay the onChange event. | ||
| disabled# | - | boolean |
Toggle the disabled state for 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, | ||
| 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# | - | boolean |
Set component validation state to invalid. | ||
| label#4.2.0+ | - | ReactNode |
Add a caption for a component. | ||
| onChange# | - | ChangeEventHandler<HTMLInputElement> |
Method called immediately after the | ||
| plainText# | - | boolean |
Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side | ||
| readOnly# | - | boolean |
Toggle the readonly state for the component. | ||
| 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. | ||
| type# | text | string |
Specifies the type of component. | ||
| valid# | - | boolean |
Set component validation state to valid. | ||
| value# | - | string, number, string[] |
The | ||
CFormFeedback#
import { CFormFeedback } from '@coreui/react'// orimport CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'| Property | Default | Type |
|---|---|---|
| as# | - | (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 | ||
| 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'// orimport 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'// orimport CFormText from '@coreui/react/src/components/form/CFormText'| Property | Default | Type |
|---|---|---|
| as# | - | (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. | ||