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

jsx
import { CFormInput } from '@coreui/react-pro'
PropertyDefaultType
className-string, undefined

A string of all className you want applied to the component.

delay-number, boolean, undefined

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, undefined

Toggle the disabled state for the component.

feedback4.2.0+-ReactNode

Provide valuable, actionable feedback.

feedbackInvalid4.2.0+-ReactNode

Provide valuable, actionable feedback.

feedbackValid4.2.0+-ReactNode

Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid.

floatingClassName4.5.0+-string, undefined

A string of all className you want applied to the floating label wrapper.

floatingLabel4.2.0+-ReactNode

Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid.

invalid-boolean, undefined

Set component validation state to invalid.

label4.2.0+-ReactNode

Add a caption for a component.

onChange-ChangeEventHandler<HTMLInputElement>, undefined

Method called immediately after the value prop changes.

plainText-boolean, undefined

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.

readOnly-boolean, undefined

Toggle the readonly state for the component.

size-'sm', 'lg', undefined

Size the component small or large.

text4.2.0+-ReactNode

Add helper text to the component.

tooltipFeedback4.2.0+-boolean, undefined

Display validation feedback in a styled tooltip.

typetextstring, undefined

Specifies the type of component.

valid-boolean, undefined

Set component validation state to valid.

value-string, number, string[], undefined

The value attribute of component.

CFormFeedback

jsx
import { CFormFeedback } from '@coreui/react-pro'
PropertyDefaultType
asdiv(ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'div'), (ElementType & 'slot'), (ElementType & 'style'), ... 175 more ..., undefined

Component used for the root node. Either a string to use a HTML element or a component.

className-string, undefined

A string of all className you want applied to the component.

invalid-boolean, undefined

Method called immediately after the value prop changes.

tooltip-boolean, undefined

If your form layout allows it, you can display validation feedback in a styled tooltip.

valid-boolean, undefined

Set component validation state to valid.

CFormLabel

jsx
import { CFormLabel } from '@coreui/react-pro'
PropertyDefaultType
className-string, undefined

A string of all className you want applied to the component.

customClassName-string, undefined

A string of all className you want to be applied to the component, and override standard className value.

CFormText

jsx
import { CFormText } from '@coreui/react-pro'
PropertyDefaultType
asdiv(ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'div'), (ElementType & 'slot'), (ElementType & 'style'), ... 175 more ..., undefined

Component used for the root node. Either a string to use a HTML element or a component.

className-string, undefined

A string of all className you want applied to the component.