# TextArea

<Badge variant="neutral">Form component</Badge>

The TextArea component is a multi-line text input that allows users to enter and edit longer text content. It supports auto-sizing functionality and various text input features like validation and formatting.

## Examples

### With Default Value

### With Icon

### Auto Size

### Auto Size with Max Rows

### Style Properties

These properties allow direct style application without using the `styles` prop:

- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
- **Color:** `color`, `fill`, `fade`, `image`

## Variants

### Sizes

- `small` - Compact size for dense interfaces
- `medium` - Standard size for most use cases
- `large` - Emphasized size for important text areas

## Properties

- **`autoSize`** `boolean` (default: `false`) — Whether the textarea should automatically resize based on content
- **`maxRows`** `number` (default: `10`) — Maximum number of visible rows when `autoSize` is enabled
- **`rows`** `number` (default: `3`) — Number of visible text rows
- **`value`** `string` — The text value in controlled mode
- **`defaultValue`** `string` — The default text value in uncontrolled mode
- **`placeholder`** `string` — Placeholder text when input is empty
- **`icon`** `ReactElement` — Icon element rendered before the input
- **`prefix`** `ReactNode` — Input decoration before the main input
- **`suffix`** `ReactNode` — Input decoration after the main input
- **`suffixPosition`** `'before' | 'after'` (default: `'before'`) — Position of suffix relative to validation/loading state icons
- **`resize`** `string` — CSS resize value (e.g. `'vertical'`, `'none'`)
- **`size`** `'small' | 'medium' | 'large'` (default: `'medium'`) — Input size
- **`autocomplete`** `string` — Browser autocomplete attribute value
- **`maxLength`** `number` — Maximum number of characters allowed
- **`minLength`** `number` — Minimum number of characters required
- **`inputProps`** `Props` — Direct HTML props passed to the inner textarea element
- **`wrapperProps`** `Props` — Additional HTML props passed to the input wrapper container
- **`inputRef`** `RefObject<HTMLTextAreaElement>` — Ref to the inner textarea element
- **`wrapperRef`** `RefObject<HTMLDivElement>` — Ref to the input wrapper container
- **`loadingIndicator`** `ReactNode` — Custom loading indicator element
- **`inputStyles`** `Styles` — Custom styles for the textarea element
- **`onChange`** `function` — Callback fired when the input value changes
- **`onBlur`** `function` — Callback fired when the input loses focus
- **`onFocus`** `function` — Callback fired when the input receives focus

### Base Properties

Supports [Base properties](../../BaseProperties.md)

### Field Properties

Supports all [Field properties](../../FieldProperties.md)

## Sub-elements

The TextArea component renders the following sub-elements that can be customized via the `styles` prop:

- **Prefix**: Content displayed before the input area
- **Suffix**: Content displayed after the input area
- **State**: Container for validation and loading indicators
- **InputIcon**: Icon displayed within the input

## Style Properties

The TextArea component supports all standard style properties:

`display`, `font`, `preset`, `hide`, `opacity`, `whiteSpace`, `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`, `reset`, `padding`, `paddingInline`, `paddingBlock`, `shadow`, `border`, `radius`, `overflow`, `scrollbar`, `outline`, `textAlign`, `color`, `fill`, `fade`, `textTransform`, `fontWeight`, `fontStyle`, `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`

## Accessibility

The TextArea component follows WAI-ARIA guidelines:

- Uses semantic `textarea` HTML element
- Supports proper keyboard navigation and text selection
- Associates labels with the input element using `aria-labelledby`
- Provides clear focus indicators
- Announces validation states and error messages to screen readers
- Supports auto-completion and spell-checking

## Best Practices

- Use descriptive labels that clearly indicate the expected content
- Provide placeholder text for additional context when appropriate
- Set appropriate `rows` to indicate expected content length
- Use `autoSize` for dynamic content that may vary in length
- Consider `maxRows` to prevent excessive vertical growth
- Provide clear validation messages when input is invalid
- Use read-only state for displaying non-editable content
