React Form Input Component

React input components. Give textual form `<input>`s an upgrade with custom styles, sizing, focus states, validation, and more.

Example#

Must be 8-20 characters long.
1<CForm>
2 <CFormInput
3 type="email"
4 id="exampleFormControlInput1"
5 label="Email address"
6 placeholder="[email protected]"
7 text="Must be 8-20 characters long."
8 aria-describedby="exampleFormControlInputHelpInline"
9 />
10</CForm>

If you need to add custom classNames to form's components, or need to add some custom elements you can add each form component separately. Please check the example below.

1<CForm>
2 <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
3 <CFormInput type="email" id="exampleFormControlInput1" placeholder="[email protected]" aria-describedby="exampleFormControlInputHelpInline" />
4 <CFormText component="span" id="exampleFormControlInputHelpInline">
5 Must be 8-20 characters long.
6 </CFormText>
7</CForm>

Sizing#

Set heights using size property like size="lg" and size="sm".

1<CFormInput type="text" size="lg" placeholder="Large input" aria-label="lg input example"/>
2<CFormInput type="text" placeholder="Default input" aria-label="default input example"/>
3<CFormInput type="text" size="sm" placeholder="Small input" aria-label="sm input example"/>

Disabled#

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.

1<CFormInput type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled/>
2<CFormInput type="text" placeholder="Disabled readonly input" aria-label="Disabled input example" disabled readOnly/>

Readonly#

Add the readOnly boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

1<CFormInput
2 type="text"
3 placeholder="Readonly input here..."
4 aria-label="readonly input example"
5 readOnly
6/>

Readonly plain text#

If you want to have <input readonly> elements in your form styled as plain text, use the plainText boolean property to remove the default form field styling and preserve the correct margin and padding.

1<CRow className="mb-3">
2 <CFormLabel htmlFor="staticEmail" className="col-sm-2 col-form-label">Email</CFormLabel>
3 <CCol sm={10}>
4 <CFormInput type="text" id="staticEmail" defaultValue="[email protected]" readOnly plainText/>
5 </CCol>
6</CRow>
7<CRow className="mb-3">
8 <CFormLabel htmlFor="inputPassword" className="col-sm-2 col-form-label">Password</CFormLabel>
9 <CCol sm={10}>
10 <CFormInput type="password" id="inputPassword"/>
11 </CCol>
12</CRow>
1<CForm className="row g-3">
2 <CCol xs="auto">
3 <CFormLabel htmlFor="staticEmail2" className="visually-hidden">
4 Email
5 </CFormLabel>
6 <CFormInput type="text" id="staticEmail2" defaultValue="[email protected]" readOnly plainText />
7 </CCol>
8 <CCol xs="auto">
9 <CFormLabel htmlFor="inputPassword2" className="visually-hidden">
10 Password
11 </CFormLabel>
12 <CFormInput type="password" id="inputPassword2" placeholder="Password" />
13 </CCol>
14 <CCol xs="auto">
15 <CButton type="submit" className="mb-3">
16 Confirm identity
17 </CButton>
18 </CCol>
19</CForm>

File input#

1<CFormInput type="file" id="formFile" label="Default file input example" />
2<CFormInput type="file" id="formFileMultiple" label="Multiple files input example" multiple />
3<CFormInput type="file" id="formFileDisabled" label="Disabled file input example" disabled />
4<CFormInput type="file" size="sm" id="formFileSm" label="Small file input example" />
5<CFormInput type="file" size="lg" id="formFileLg" label="Large file input example" />

Color#

1<CFormInput
2 type="color"
3 id="exampleColorInput"
4 defaultValue="#563d7c"
5 label="Color picker"
6 title="Choose your color"
7/>

API#

CFormInput#

1import { CFormInput } from '@coreui/react'
2// or
3import CFormInput from '@coreui/react/src/components/form/CFormInput'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
delayDelay 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.number | booleanfalse
disabledToggle the disabled state for the component.boolean-
feedback
4.2.0+
Provide valuable, actionable feedback.ReactNode-
feedbackInvalid
4.2.0+
Provide valuable, actionable feedback.ReactNode-
feedbackValid
4.2.0+
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid.ReactNode-
floatingLabel
4.2.0+
Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid.ReactNode-
invalidSet component validation state to invalid.boolean-
label
4.2.0+
Add a caption for a component.ReactNode-
onChangeMethod called immediately after the value prop changes.ChangeEventHandler<HTMLInputElement>-
plainTextRender 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 readonlyboolean-
readOnlyToggle the readonly state for the component.boolean-
sizeSize the component small or large.'sm' | 'lg'-
text
4.2.0+
Add helper text to the component.ReactNode-
tooltipFeedback
4.2.0+
Display validation feedback in a styled tooltip.boolean-
typeSpecifies the type of component.stringtext
validSet component validation state to valid.boolean-
valueThe value attribute of component.string | number | string[]-

CFormFeedback#

1import { CFormFeedback } from '@coreui/react'
2// or
3import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
componentComponent used for the root node. Either a string to use a HTML element or a component.string | ComponentClass<any, any> | FunctionComponent<any>-
invalidMethod called immediately after the value prop changes.boolean-
tooltipIf your form layout allows it, you can display validation feedback in a styled tooltip.boolean-
validSet component validation state to valid.boolean-

CFormLabel#

1import { CFormLabel } from '@coreui/react'
2// or
3import CFormLabel from '@coreui/react/src/components/form/CFormLabel'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
customClassNameA string of all className you want to be applied to the component, and override standard className value.string-

CFormText#

1import { CFormText } from '@coreui/react'
2// or
3import CFormText from '@coreui/react/src/components/form/CFormText'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
componentComponent used for the root node. Either a string to use a HTML element or a component.string | ComponentClass<any, any> | FunctionComponent<any>-