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
<CForm>
<div className="mb-3">
<CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
<CFormInput type="email" id="exampleFormControlInput1" placeholder="[email protected]"/>
</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}>
<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">
<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-pro'CFormTextarea
import { CFormTextarea } from '@coreui/react-pro'