# React Form Textarea Component

> React textarea components. Give textual form `<textarea>`s an upgrade with custom styles, sizing, focus states, validation, and more.

## Example

```html
import React from 'react'
import { CForm, CFormTextarea } from '@coreui/react'

export const FormTextareaExample = () => {
  return (
    <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.

```html
import React from 'react'
import { CFormTextarea } from '@coreui/react'

export const FormTextareaDisabledExample = () => {
  return (
    <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.

```html
import React from 'react'
import { CFormTextarea } from '@coreui/react'

export const FormTextareaReadonlyExample = () => {
  return (
    <CFormTextarea
      placeholder="Readonly textarea"
      aria-label="Readonly textarea example"
      disabled
      readOnly
    ></CFormTextarea>
  )
}
```

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CFormTextarea /&gt;](./api/#cformtextarea)
- [&lt;CFormFeedback /&gt;](./api/#cformfeedback)
- [&lt;CFormLabel /&gt;](./api/#cformlabel)
- [&lt;CFormText /&gt;](./api/#cformtext)