React Form Input Component API
Form Input API
Explore the API reference for theReact Form Input component and discover how to effectively utilize its props for customization.
CFormInput#
import{CFormInput}from'@coreui/react'// orimportCFormInputfrom'@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'// orimportCFormFeedbackfrom'@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 | ||
| 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'// orimportCFormLabelfrom'@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'// orimportCFormTextfrom'@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. | ||