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> </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}> </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> </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'// orimport 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 | - |
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 | - |
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[] | - |
CFormTextarea#
import { CFormTextarea } from '@coreui/react'// orimport CFormTextarea from '@coreui/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 | - |
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 | - |
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<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 | - |
text 4.2.0+ | Add helper text to the component. | ReactNode | - |
tooltipFeedback 4.2.0+ | Display validation feedback in a styled tooltip. | boolean | - |
valid | Set component validation state to valid. | boolean | - |
value | The value attribute of component. | string | number | string[] | - |