> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.
# Textarea
Multi-line free text, for answers that run to sentences — reach for `Input` when one line will do, since a tall box tells the reader to write more than you want. Like `Input`, it reads `Field` context for its label, description and error state.
[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Textarea) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/inputs-textarea--overview)
```tsx
import { Textarea } from '@wallarm-org/design-system/Textarea';
```
## Usage
```tsx
import { Textarea } from '@wallarm-org/design-system/Textarea';
```
## Examples
### Sizes
The same 36 / 32 / 24px scale as `Input`, applied to the single-row height, so a textarea
lines up with the fields around it before it grows.
```tsx
import { HStack } from '@wallarm-org/design-system/Stack';
import { Textarea } from '@wallarm-org/design-system/Textarea';
export const Sizes = () => (
);
```
### Focused
Focus is a ring outside the border, as on every other field, so the box doesn't shift when
the reader tabs into it.
```tsx
import { Textarea } from '@wallarm-org/design-system/Textarea';
```
### Disabled
Dimmed and not focusable. Say elsewhere what would enable it.
```tsx
import { Textarea } from '@wallarm-org/design-system/Textarea';
```
### With value
A filled box. Text starts at the top rather than centring, which is why the height you
choose reads as an invitation.
```tsx
import { Textarea } from '@wallarm-org/design-system/Textarea';
```
### With error
`error` reddens the border and sets `aria-invalid`; the message is `FieldError`'s job.
```tsx
import { Textarea } from '@wallarm-org/design-system/Textarea';
```
### Auto resize
Passing `maxRows` turns auto-resize on: the box starts at `minRows` and grows with the
text until it hits the cap, then scrolls. Without `maxRows` the height is fixed.
```tsx
import { Textarea } from '@wallarm-org/design-system/Textarea';
export const AutoResize = () => (
);
```
### With footer
Inside an `InputGroup` with a `block-end` addon, which is how the composer pattern is
built — auto-resize plus a toolbar that stays attached as the box grows.
```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuShortcut, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';
import { ArrowUp, Settings2 } from '@wallarm-org/design-system/icons';
import { InputGroup, InputGroupAddon } from '@wallarm-org/design-system/InputGroup';
import { HStack } from '@wallarm-org/design-system/Stack';
import { Switch, SwitchControl } from '@wallarm-org/design-system/Switch';
import { Text } from '@wallarm-org/design-system/Text';
import { Textarea } from '@wallarm-org/design-system/Textarea';
export const WithFooter = () => {
const toolItems = Array.from({ length: 6 }, (_, i) => ({
id: String(i + 1),
tool: '{tool-name}',
desc: 'Description',
enabled: true,
}));
return (
Always allowed in this conversation
{toolItems.map(item => (
{item.tool}
{item.desc}
))}