React Form Input Component

Form control

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

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.

Example#

Must be 8-20 characters long.
<CForm>
<CFormInput
type="email"
id="exampleFormControlInput1"
label="Email address"
placeholder="[email protected]"
text="Must be 8-20 characters long."
aria-describedby="exampleFormControlInputHelpInline"
/>
</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.

<CForm>
<CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
<CFormInput type="email" id="exampleFormControlInput1" placeholder="[email protected]" aria-describedby="exampleFormControlInputHelpInline" />
<CFormText as="span" id="exampleFormControlInputHelpInline">
Must be 8-20 characters long.
</CFormText>
</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">
<CFormInput type="file" id="formFile" label="Default file input example" />
</div>
<div className="mb-3">
<CFormInput type="file" id="formFileMultiple" label="Multiple files input example" multiple />
</div>
<div className="mb-3">
<CFormInput type="file" id="formFileDisabled" label="Disabled file input example" disabled />
</div>
<div className="mb-3">
<CFormInput type="file" size="sm" id="formFileSm" label="Small file input example" />
</div>
<div>
<CFormInput type="file" size="lg" id="formFileLg" label="Large file input example" />
</div>

Color#

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

Customizing#

SASS variables#

$input-* are shared across most of our form controls (and not buttons).

$input-padding-y: $input-btn-padding-y !default;
$input-padding-x: $input-btn-padding-x !default;
$input-font-family: $input-btn-font-family !default;
$input-font-size: $input-btn-font-size !default;
$input-font-weight: $font-weight-base !default;
$input-line-height: $input-btn-line-height !default;
$input-padding-y-sm: $input-btn-padding-y-sm !default;
$input-padding-x-sm: $input-btn-padding-x-sm !default;
$input-font-size-sm: $input-btn-font-size-sm !default;
$input-padding-y-lg: $input-btn-padding-y-lg !default;
$input-padding-x-lg: $input-btn-padding-x-lg !default;
$input-font-size-lg: $input-btn-font-size-lg !default;
$input-bg: var(--cui-body-bg) !default;
$input-disabled-color: var(--cui-body-color) !default;
$input-disabled-bg: var(--cui-secondary-bg) !default;
$input-disabled-border-color: var(--cui-border-color) !default;
$input-color: var(--cui-body-color) !default;
$input-border-color: var(--cui-border-color) !default;
$input-border-width: $input-btn-border-width !default;
$input-box-shadow: var(--cui-box-shadow-inset) !default;
$input-border-radius: var(--cui-border-radius) !default;
$input-border-radius-sm: var(--cui-border-radius-sm) !default;
$input-border-radius-lg: var(--cui-border-radius-lg) !default;
$input-focus-bg: $input-bg !default;
$input-focus-border-color: tint-color($primary, 50%) !default;
$input-focus-color: $input-color !default;
$input-focus-width: $input-btn-focus-width !default;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
$input-placeholder-color: var(--cui-secondary-color) !default;
$input-plaintext-color: var(--cui-body-color) !default;
$input-height-border: calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$form-color-width: 3rem !default;

$form-label-* and $form-text-* are for our <CFormLabel />s and <CFormText /> component.

$form-label-margin-bottom: .5rem !default;
$form-label-font-size: null !default;
$form-label-font-style: null !default;
$form-label-font-weight: null !default;
$form-label-color: null !default;
$form-text-margin-top: .25rem !default;
$form-text-font-size: $small-font-size !default;
$form-text-font-style: null !default;
$form-text-font-weight: null !default;
$form-text-color: var(--cui-secondary-color) !default;

$form-file-* are for file input.

$form-file-button-color: $input-color !default;
$form-file-button-bg: var(--cui-tertiary-bg) !default;
$form-file-button-hover-bg: var(--cui-secondary-bg) !default;

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[]-

CFormFeedback#

import { CFormFeedback } from '@coreui/react'
// or
import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'
PropertyDescriptionTypeDefault
asComponent used for the root node. Either a string to use a HTML element or a component.(ElementType & 'symbol') | (ElementType & 'object') | (ElementType & 'div') | (ElementType & 'slot') | (ElementType & 'style') | ... 174 more ... | (ElementType & FunctionComponent<...>)-
classNameA string of all className you want applied to the component.string-
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#

import { CFormLabel } from '@coreui/react'
// or
import 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#

import { CFormText } from '@coreui/react'
// or
import CFormText from '@coreui/react/src/components/form/CFormText'
PropertyDescriptionTypeDefault
asComponent used for the root node. Either a string to use a HTML element or a component.(ElementType & 'symbol') | (ElementType & 'object') | (ElementType & 'div') | (ElementType & 'slot') | (ElementType & 'style') | ... 174 more ... | (ElementType & FunctionComponent<...>)-
classNameA string of all className you want applied to the component.string-