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

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

## Example

```jsx preview
<CForm>
  <CFormTextarea
    id="exampleFormControlTextarea1"
    label="Example textarea"
    rows={3}
    text="Must be 8-20 words long."
  ></CFormTextarea>
</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
<CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
<CFormTextarea id="exampleFormControlTextarea1" rows={3}></CFormTextarea>
<CFormText as="span" id="passwordHelpInline">Must be 8-20 words long.</CFormText>
```

## Disabled

Add the `disabled` boolean attribute on an textarea to give it a grayed out appearance and remove pointer events.

```jsx preview
<CFormTextarea
  className="mb-3"
  placeholder="Disabled textarea"
  aria-label="Disabled textarea example"
  disabled
></CFormTextarea>
```

## Readonly

Add the `readOnly` boolean attribute on an textarea to prevent modification of the textarea's value. Read-only textareas appear lighter (just like disabled textareas), but retain the standard cursor.

```jsx preview
<CFormTextarea
  placeholder="Readonly textarea"
  aria-label="Readonly textarea example"
  disabled
  readOnly
></CFormTextarea>
```

## 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" />

## API

### CFormTextarea

`markdown:CFormTextarea.api.mdx`

### CFormFeedback

`markdown:CFormFeedback.api.mdx`

### CFormLabel

`markdown:CFormLabel.api.mdx`

### CFormText

`markdown:CFormText.api.mdx`
