# Core/TextArea - Design

TextArea component for multi-line text entry.

### Anatomy

The text area is a multi-line field. When `resizable` is true, a resize handle allows vertical resizing. Use with
`InputField` for labels, helper text, and validation messaging.

## Properties

### Value

The value is submitted with the form. The value replaces any placeholder text in the field after the first character
is entered.

### Placeholder text

Placeholder text is visible until a character is entered. Because the placeholder text disappears, putting
instructions or requirements as placeholder text is not accessible. Helper text is the preferred method to convey
this information.

### Resizable

When `resizable` is `true` (default) and `autoSize` is off, a resize handle is shown and the user can drag to change
height vertically. When `autoSize` is on, manual resizing is disabled. When `resizable` is `false`, the height is
fixed.

### Auto size

`autoSize` grows the height with content (Ant Design–style API). Pass `true` or `{ minRows?, maxRows? }`. When auto
size is on, manual resize is disabled. Height follows content; optional `maxRows` caps growth and enables vertical
scrolling for overflow.

### Status

`danger`: Used to indicate an error or invalid state.

`warning`: Used to indicate a warning.

Styling matches TextInput for consistent forms.

## Behavior

### Error messages

When validation fails, the field border uses the attention styling and helper text shows an error message. Error
messages should be concise and replace any previously visible helper text where appropriate.

### Disabled

Disabled fields cannot be modified and cannot receive focus. Values in a disabled field are not submitted as part of
the form.

### Read-only

Read-only fields cannot be modified. The value of a read-only field is submitted as part of the form.

## Accessibility

### Keyboard interaction

| Key                 | Function                               |
| ------------------- | -------------------------------------- |
| `Tab` / `Shift+Tab` | Moves focus into/out of the text area. |
| `Arrow keys`        | Move the caret within the text.        |
| `Enter`             | Inserts a new line.                    |

### Labeling and validation

The component renders a semantic `textarea` element. Provide an accessible name with `aria-label` or
`aria-labelledby`, and associate helper or error text with `aria-describedby` when used inside `InputField` or your own
layout. The component sets `aria-invalid` when `appearance` is `danger`. Ensure focus indicators are visible (at least
2px, 3:1 contrast) and interactive targets meet at least 24×24 CSS pixels where applicable.