React Form Input Component API
Form Input API
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# | 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'// 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# | 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. | ||