React input components. Give textual form `<input>`s an upgrade with custom styles, sizing, focus states, validation, and more.
1<CForm>2 <CFormInput3 type="email"4 id="exampleFormControlInput1"5 label="Email address"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>
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"/>
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/>
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<CFormInput2 type="text"3 placeholder="Readonly input here..."4 aria-label="readonly input example"5 readOnly6/>
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}>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 Email5 </CFormLabel>7 </CCol>8 <CCol xs="auto">9 <CFormLabel htmlFor="inputPassword2" className="visually-hidden">10 Password11 </CFormLabel>12 <CFormInput type="password" id="inputPassword2" placeholder="Password" />13 </CCol>14 <CCol xs="auto">15 <CButton type="submit" className="mb-3">16 Confirm identity17 </CButton>18 </CCol>19</CForm>
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" />
1<CFormInput2 type="color"3 id="exampleColorInput"4 defaultValue="#563d7c"5 label="Color picker"6 title="Choose your color"7/>
1import { CFormInput } from '@coreui/react'2// or3import CFormInput from '@coreui/react/src/components/form/CFormInput'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the component. | string | - |
delay | Delay 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 | boolean | false |
disabled | Toggle 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 | - |
invalid | Set component validation state to invalid. | boolean | - |
label 4.2.0+ | Add a caption for a component. | ReactNode | - |
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' | - |
text 4.2.0+ | Add helper text to the component. | ReactNode | - |
tooltipFeedback 4.2.0+ | Display validation feedback in a styled tooltip. | boolean | - |
type | Specifies the type of component. | string | text |
valid | Set component validation state to valid. | boolean | - |
value | The value attribute of component. | string | number | string[] | - |
1import { CFormFeedback } from '@coreui/react'2// or3import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the component. | string | - |
component | Component used for the root node. Either a string to use a HTML element or a component. | string | ComponentClass<any, any> | FunctionComponent<any> | - |
invalid | Method called immediately after the value prop changes. | boolean | - |
tooltip | If your form layout allows it, you can display validation feedback in a styled tooltip. | boolean | - |
valid | Set component validation state to valid. | boolean | - |
1import { CFormLabel } from '@coreui/react'2// or3import CFormLabel from '@coreui/react/src/components/form/CFormLabel'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the component. | string | - |
customClassName | A string of all className you want to be applied to the component, and override standard className value. | string | - |
1import { CFormText } from '@coreui/react'2// or3import CFormText from '@coreui/react/src/components/form/CFormText'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the component. | string | - |
component | Component used for the root node. Either a string to use a HTML element or a component. | string | ComponentClass<any, any> | FunctionComponent<any> | - |