Bootstrap React Form control

Bootstrap 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.

On this page

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.

Password

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#

Default file input example

Multiple files input example

Disabled file input example

Small file input example

Large file input example

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#

Color picker

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/bootstrap-react'
2// or
3import CFormInput from '@coreui/bootstrap-react/src/components/form/CFormInput'

Property	Description	Type	Default
className	A string of all className you want applied to the component.	`string`	-
disabled	Toggle the disabled state for the component.	`boolean`	-
invalid	Set component validation state to invalid.	`boolean`	-
onChange	Method called immediately after the `value` prop changes.	`ChangeEventHandler<HTMLInputElement>`	-
plainText	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`	`boolean`	-
readOnly	Toggle the readonly state for the component.	`boolean`	-
size	Size the component small or large.	`'sm'` \| `'lg'`	-
type	Specifies the type of component.	`string`	text
valid	Set component validation state to valid.	`boolean`	-
value	The `value` attribute of component. @controllable onChange	`string` \| `number` \| `string[]`	-

CFormTextarea#

1import { CFormTextarea } from '@coreui/bootstrap-react'
2// or
3import CFormTextarea from '@coreui/bootstrap-react/src/components/form/CFormTextarea'

Property	Description	Type	Default
className	A string of all className you want applied to the component.	`string`	-
disabled	Toggle the disabled state for the component.	`boolean`	-
invalid	Set component validation state to invalid.	`boolean`	-
onChange	Method called immediately after the `value` prop changes.	`ChangeEventHandler<HTMLTextAreaElement>`	-
plainText	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`.	`boolean`	-
readOnly	Toggle the readonly state for the component.	`boolean`	-
valid	Set component validation state to valid.	`boolean`	-
value	The `value` attribute of component. @controllable onChange	`string` \| `number` \| `string[]`	-