# Textarea
> Collect text that may span more than one line.
Source: https://www.honestui.com/docs/components/textarea
```tsx
import { Textarea } from "@/components/honest-ui/ui/textarea"
export function TextareaDemo() {
return
}
```
## Overview [#overview]
Textarea collects free-form text that can outgrow one line: descriptions, messages, notes, code snippets. It is the multi-line sibling of Input and shares its contract — a permanent label above, placeholder showing format only, native attributes passed straight through.
Use it when people will type more than roughly a sentence. For anything shorter, an Input respects their time; a tall empty box implies an essay is expected.
## Anatomy [#anatomy]
A textarea has a value, optional placeholder, size, variant, and state. Unlike Input there is no `type` — but `maxLength`, `minLength`, `required`, `disabled`, `readOnly`, and `name` all pass through natively.
## Behavior [#behavior]
**Growth.** The box starts at a fixed height and scrolls once content exceeds it; it does not grow automatically. If watching all of their text matters (short comments), size it generously up front rather than promising auto-grow the component does not do.
**Resize.** The browser's resize handle stays available. Constrain it with `resize` classes if the layout truly cannot flex — but a textarea nobody may enlarge is usually a layout bug wearing a component.
**Line handling.** Enter inserts newlines; text wraps within the box. Values include those newline characters, so trim and normalize on submit where your backend cares.
## States [#states]
**Disabled** skips focus, blocks editing, and excludes the value from submission. **Read-only** keeps the content selectable and copyable while still submitting — prefer it for computed or imported text that must travel with the form. **Invalid** follows `aria-invalid`: danger border plus an error message linked through Field or `aria-describedby` that says what to fix.
Placeholder styling matches Input: muted foreground tokens that adapt to dark mode automatically.
## Accessibility [#accessibility]
The visible label names the field (`Label` + `htmlFor`). Standard textarea keys apply — arrows move within the text, Enter adds lines, Tab leaves (it does not insert a tab character). Focus shows as a border change using accent tokens.
Height clears comfortable touch sizing, and the resize handle gives pointer users another way to fit their content. Long values scroll vertically rather than truncating; nothing a person typed is ever visually cut off without a way to reach it. RTL text mirrors correctly because padding uses logical properties.
## Installation [#installation]
Install the following dependencies:
```bash
npm install @base-ui-components/react
```
Copy and paste the following code into your project.
### components/ui/textarea.tsx
```tsx
import * as React from "react"
import { cn } from "@/lib/utils"
function Textarea({
className,
size = "large",
variant = "default",
...props
}: React.ComponentProps<"textarea"> & {
size?: "sm" | "small" | "default" | "lg" | "large" | number
variant?: "default" | "borderless"
}) {
return (
)
}
export { Textarea }
```
Update the import paths to match your project setup.
## Usage [#usage]
```tsx
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
```
```tsx
```
## Don't do this [#dont-do-this]
### Counting characters only after they are lost [#counting-characters-only-after-they-are-lost]
```tsx
// Bad
// no counter anywhere
```
```tsx
// Good
{200 - value.length} characters left
```
A silent `maxLength` eats keystrokes: past the limit, typing does nothing and the person concludes the keyboard broke. Announce remaining characters politely so the wall arrives before they hit it — and let the counter say what still fits, not just that they failed.
### Disabling spellcheck by default [#disabling-spellcheck-by-default]
```tsx
// Bad
```
```tsx
// Good
// browser default: spellcheck on for prose
```
Prose fields benefit from underlines pointing at typos; turning them off wholesale assumes every entry is a URL. Opt out per-field for identifiers and code, not for every description box on the page.
## Examples [#examples]
### Disabled and read-only states [#disabled-and-read-only-states]
```tsx
import { Textarea } from "@/components/honest-ui/ui/textarea"
export function TextareaDisabled() {
return
}
```
### Inside a form [#inside-a-form]
```tsx
"use client";
import * as React from "react";
import { Button } from "@/components/honest-ui/ui/button";
import {
Field,
FieldControl,
FieldError,
FieldLabel,
} from "@/components/honest-ui/ui/field";
import { Form } from "@/components/honest-ui/ui/form";
import { Textarea } from "@/components/honest-ui/ui/textarea";
export function TextareaForm() {
const [status, setStatus] = React.useState("");
const onSubmit = (e: React.FormEvent) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
const message = String(formData.get("message") || "");
setStatus(`Message ready to send (${message.length} characters).`);
};
return (
);
}
```
### With label [#with-label]
```tsx
import { useId } from "react"
import { Label } from "@/components/honest-ui/ui/label"
import { Textarea } from "@/components/honest-ui/ui/textarea"
export function TextareaWithLabel() {
const id = useId()
return (
)
}
```
## API reference [#api-reference]
Accepts all native `