---
title: React Form Controls
name: Form control
description: 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.
menu: Forms
route: /forms/form-control
---

import { 
  CButton,
  CForm,
  CFormInput,
  CFormLabel,
  CFormTextarea,
  CCol,
  CRow
} from '@coreui/react'

## Example

```jsx preview
<CForm>
  <div className="mb-3">
    <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
    <CFormInput type="email" id="exampleFormControlInput1" placeholder="name@example.com"/>
  </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"`.

```jsx preview
<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.

```jsx preview
<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.

```jsx preview
<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.

```jsx preview
<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@example.com" 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>
```

```jsx preview
<CForm className="row g-3">
  <CCol xs="auto">
    <CFormLabel htmlFor="staticEmail2" className="visually-hidden">Email</CFormLabel>
    <CFormInput type="text" id="staticEmail2" defaultValue="email@example.com" 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

```jsx preview
<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

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

## API

### CFormInput

`markdown:CFormInput.api.mdx`

### CFormTextarea

`markdown:CFormTextarea.api.mdx`
