React Form Controls

Form control

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

Example#

<CForm>
<div className="mb-3">
<CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
<CFormInput type="email" id="exampleFormControlInput1" placeholder="[email protected]"/>
</div>
<div className="mb-3">
<CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
<CFormTextarea id="exampleFormControlTextarea1" rows={3}></CFormTextarea>
</div>
</CForm>

Sizing#

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

<CFormInput type="text" size="lg" placeholder="Large input" aria-label="lg input example"/>
<CFormInput type="text" placeholder="Default input" aria-label="default input example"/>
<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.

<CFormInput type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled/>
<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.

<CFormInput type="text" placeholder="Readonly input here..." aria-label="readonly input example" readOnly/>

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.

<CRow className="mb-3">
<CFormLabel htmlFor="staticEmail" className="col-sm-2 col-form-label">Email</CFormLabel>
<CCol sm={10}>
<CFormInput type="text" id="staticEmail" defaultValue="[email protected]" readOnly plainText/>
</CCol>
</CRow>
<CRow className="mb-3">
<CFormLabel htmlFor="inputPassword" className="col-sm-2 col-form-label">Password</CFormLabel>
<CCol sm={10}>
<CFormInput type="password" id="inputPassword"/>
</CCol>
</CRow>
<CForm className="row g-3">
<CCol xs="auto">
<CFormLabel htmlFor="staticEmail2" className="visually-hidden">Email</CFormLabel>
<CFormInput type="text" id="staticEmail2" defaultValue="[email protected]" readOnly plainText/>
</CCol>
<CCol xs="auto">
<CFormLabel htmlFor="inputPassword2" className="visually-hidden">Password</CFormLabel>
<CFormInput type="password" id="inputPassword2" placeholder="Password"/>
</CCol>
<CCol xs="auto">
<CButton color="primary" type="submit" className="mb-3">Confirm identity</CButton>
</CCol>
</CForm>

File input#

<div className="mb-3">
<CFormLabel htmlFor="formFile">Default file input example</CFormLabel>
<CFormInput type="file" id="formFile"/>
</div>
<div className="mb-3">
<CFormLabel htmlFor="formFileMultiple">Multiple files input example</CFormLabel>
<CFormInput type="file" id="formFileMultiple" multiple/>
</div>
<div className="mb-3">
<CFormLabel htmlFor="formFileDisabled">Disabled file input example</CFormLabel>
<CFormInput type="file" id="formFileDisabled" disabled/>
</div>
<div className="mb-3">
<CFormLabel htmlFor="formFileSm">Small file input example</CFormLabel>
<CFormInput type="file" size="sm" id="formFileSm"/>
</div>
<div>
<CFormLabel htmlFor="formFileLg">Large file input example</CFormLabel>
<CFormInput type="file" size="lg" id="formFileLg"/>
</div>

Color#

<CFormLabel htmlFor="exampleColorInput">Color picker</CFormLabel>
<CFormInput type="color" id="exampleColorInput" defaultValue="#563d7c" title="Choose your color" />

API#

CFormInput#

import { CFormInput } from '@coreui/react'
// or
import 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-
floatingClassName
4.5.0+
A string of all className you want applied to the floating label wrapper.string-
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 readonly.boolean-
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[]-

CFormTextarea#

import { CFormTextarea } from '@coreui/react'
// or
import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
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-
floatingClassName
4.5.0+
A string of all className you want applied to the floating label wrapper.string-
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<HTMLTextAreaElement>-
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 readonly.boolean-
readOnlyToggle the readonly state for the component.boolean-
text
4.2.0+
Add helper text to the component.ReactNode-
tooltipFeedback
4.2.0+
Display validation feedback in a styled tooltip.boolean-
validSet component validation state to valid.boolean-
valueThe value attribute of component.string | number | string[]-