React Form Controls

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#

1<CForm>
2 <div className="mb-3">
3 <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
4 <CFormInput type="email" id="exampleFormControlInput1" placeholder="[email protected]"/>
5 </div>
6 <div className="mb-3">
7 <CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
8 <CFormTextarea id="exampleFormControlTextarea1" rows="3"></CFormTextarea>
9 </div>
10</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 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.

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">Email</CFormLabel>
4 <CFormInput type="text" id="staticEmail2" defaultValue="[email protected]" readOnly plainText/>
5 </CCol>
6 <CCol xs="auto">
7 <CFormLabel htmlFor="inputPassword2" className="visually-hidden">Password</CFormLabel>
8 <CFormInput type="password" id="inputPassword2" placeholder="Password"/>
9 </CCol>
10 <CCol xs="auto">
11 <CButton type="submit" className="mb-3">Confirm identity</CButton>
12 </CCol>
13</CForm>

File input#

1<div className="mb-3">
2 <CFormLabel htmlFor="formFile">Default file input example</CFormLabel>
3 <CFormInput type="file" id="formFile"/>
4</div>
5<div className="mb-3">
6 <CFormLabel htmlFor="formFileMultiple">Multiple files input example</CFormLabel>
7 <CFormInput type="file" id="formFileMultiple" multiple/>
8</div>
9<div className="mb-3">
10 <CFormLabel htmlFor="formFileDisabled">Disabled file input example</CFormLabel>
11 <CFormInput type="file" id="formFileDisabled" disabled/>
12</div>
13<div className="mb-3">
14 <CFormLabel htmlFor="formFileSm">Small file input example</CFormLabel>
15 <CFormInput type="file" size="sm" id="formFileSm"/>
16</div>
17<div>
18 <CFormLabel htmlFor="formFileLg">Large file input example</CFormLabel>
19 <CFormInput type="file" size="lg" id="formFileLg"/>
20</div>

Color#

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

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-
disabledToggle the disabled state for the component.boolean-
invalidSet component validation state to invalid.boolean-
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'-
typeSpecifies the type of component.stringtext
validSet component validation state to valid.boolean-
valueThe value attribute of component.
@controllable onChange
string | number | string[]-

CFormTextarea#

1import { CFormTextarea } from '@coreui/react'
2// or
3import 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-
invalidSet component validation state to invalid.boolean-
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-
validSet component validation state to valid.boolean-
valueThe value attribute of component.
@controllable onChange
string | number | string[]-