import { Meta } from '@storybook/addon-docs';

<Meta title="Components/TextAreaField/TextAreaField" />

# TextAreaField

The TextAreaField component combines a text area, label, and helper text for a resizable field, which is suitable for long plain-text input. 

This field should:
- Be used to accommodate varying amounts of text that can span multiple lines, such as a description, message, comments, or feedback.
- Use the maxLength prop for character limitations.

This field shouldn’t:
- Be used when the character count fits in a single line. Use the [TextField](./?path=/docs/form-textfield--default) component instead.
- Use quiet styles, such as a blended background with only a bottom border, for fixed height. Since it is taller and wider than most components, it might be harder to interact with it without visual cues.

### Required components

This component can be used independently and does not require additional components. 

### Accessibility

#### Keyboard Navigation

These keys provide additional functionality to the component. 

| Keys | Functions |
| ---- | --------- |
| Tab | The field is focusable using the Tab key and follows the page tab sequence. |
| Shift + Tab | Moves focus to the previous focusable component. |

#### Screen readers

This component uses the **`aria-labelledby`** attribute pointing to the label, and the **`aria-invalid`** attribute to detect incorrect values or status errors, which is set to “False” by default.