# Textarea

> A multi-line text field built on Base UI's Field, so the label, help text and error message are connected to the control. Same border and focus ring as Input.

Facade UI item `textarea` (ui, atom).
Docs page: https://facadeui.dev/components/textarea · Registry JSON: https://facadeui.dev/r/textarea.json

## Install

```bash
npx shadcn@latest add @facade/textarea
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/textarea.json`. The CLI also installs what it needs: @base-ui-components/react@1.0.0-rc.0, @facade/utils.

Files: `components/ui/textarea.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/textarea-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
"use client"

/** `"use client"` only for the submit handler that keeps the demo on the page. */

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"

export function Demo() {
  return (
    <form
      onSubmit={(event) => event.preventDefault()}
      noValidate
      className="flex max-w-md flex-col gap-5"
    >
      <Input label="Name" name="name" autoComplete="name" required />
      <Textarea
        label="Message"
        name="message"
        rows={5}
        description="Tell us what you are building."
        required
      />
      <Textarea
        label="Notes"
        name="notes"
        rows={2}
        resize="none"
        defaultValue="Please call after 3pm, or before 9am on weekdays, or any time at weekends."
        error="Keep notes under 60 characters."
      />
      <Button type="submit" className="self-start">
        Send
      </Button>
    </form>
  )
}
```

## Props

### TextareaProps

Extends ComponentPropsWithoutRef<"textarea">.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` (required) | `ReactNode` |  | Required. Use `hideLabel` if it should not be visible. |
| `hideLabel` | `boolean` | `false` | Hides the label visually but keeps it for screen readers. |
| `description` | `ReactNode` |  | Help text below the field. It is linked to the field for you. |
| `error` | `ReactNode` |  | Error message. Marks the field invalid and is announced with it. |
| `rows` | `number` | `4` | Visible lines of text. |
| `resize` | `"vertical" \| "none"` | `"vertical"` | `vertical` lets the user drag the height; `none` fixes it. |
| `className` | `string` |  | Classes for the outer Field.Root. |
| `textareaClassName` | `string` |  | Classes for the `<textarea>` itself. |