---
title: React Form Input Component
name: Form control
description: React input components. Give textual form `<input>`s an upgrade with custom styles, sizing, focus states, validation, and more.
menu: Forms
route: /forms/input
other_frameworks: input
---

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

## Example

```jsx preview
<CForm>
  <CFormInput
    type="email"
    id="exampleFormControlInput1"
    label="Email address"
    placeholder="name@example.com"
    text="Must be 8-20 characters long."
    aria-describedby="exampleFormControlInputHelpInline"
  />
</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.

```jsx
<CForm>
  <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
  <CFormInput type="email" id="exampleFormControlInput1" placeholder="name@example.com" aria-describedby="exampleFormControlInputHelpInline" />
  <CFormText as="span" id="exampleFormControlInputHelpInline">
    Must be 8-20 characters long.
  </CFormText>
</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

<Example>

</Example>

```jsx preview
<div className="mb-3">
  <CFormInput type="file" id="formFile" label="Default file input example" />
</div>
<div className="mb-3">
  <CFormInput type="file" id="formFileMultiple" label="Multiple files input example" multiple />
</div>
<div className="mb-3">
  <CFormInput type="file" id="formFileDisabled" label="Disabled file input example" disabled />
</div>
<div className="mb-3">
  <CFormInput type="file" size="sm" id="formFileSm" label="Small file input example" />
</div>
<div>
  <CFormInput type="file" size="lg" id="formFileLg" label="Large file input example" />
</div>
```

## Color

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

## Customizing

### SASS variables

`$input-*` are shared across most of our form controls (and not buttons).

<ScssDocs file="_variables.scss" capture="form-input-variables" />

`$form-label-*` and `$form-text-*` are for our `<CFormLabel />`s and `<CFormText />` component.

<ScssDocs file="_variables.scss" capture="form-label-variables" />

<ScssDocs file="_variables.scss" capture="form-text-variables" />

`$form-file-*` are for file input.

<ScssDocs file="_variables.scss" capture="form-file-variables" />

## API

### CFormInput

`markdown:CFormInput.api.mdx`

### CFormFeedback

`markdown:CFormFeedback.api.mdx`

### CFormLabel

`markdown:CFormLabel.api.mdx`

### CFormText

`markdown:CFormText.api.mdx`
