# Textarea

Text field over several lines, for a description, a comment or a message. Input's field box: the same sunken fill, control border, radius, 14px text (16px on touch) and states. One line plus its padding matches the Input height of the same size.

## Cách dùng

### Khi nào dùng

- Text over several lines: a description, a comment, a message to the team.
- A value the user pastes in, such as a list of addresses, one per line.

### Khi nào không dùng

- A single line, such as a name, an email or a search. Use Input.
- Picking from known options. Use Select.

## Biến thể

### size

Padding and minimum height, matching the Input of the same size. Use the size of the other fields in the form.

Giá trị: `sm`, `md`, `lg`, `xl`. Mặc định: `md`.

### resize

Which way the user can drag the corner. vertical keeps the width of the form; none for a fixed box, such as a chat composer.

Giá trị: `none`, `vertical`, `both`. Mặc định: `vertical`.

## Ví dụ

### Default

```tsx
<Field className="w-full max-w-md">
  <FieldLabel>Description</FieldLabel>
  <FieldControl>
    <Textarea placeholder="What is this project about?" />
  </FieldControl>
  <FieldDescription>Shown on the project card.</FieldDescription>
</Field>
```

### With an error

The error text marks the textarea invalid and is read after its name.

```tsx
<Field className="w-full max-w-md" required>
  <FieldLabel>Reason for leaving</FieldLabel>
  <FieldControl>
    <Textarea rows={4} />
  </FieldControl>
  <FieldError>Tell us in a sentence or two.</FieldError>
</Field>
```

### Read only

Focusable and copyable, but not editable.

```tsx
<Field className="w-full max-w-md">
  <FieldLabel>Webhook payload</FieldLabel>
  <FieldControl>
    <Textarea readOnly rows={4} defaultValue="event: project.created" />
  </FieldControl>
</Field>
```

### Disabled

```tsx
<Field className="w-full max-w-md" disabled>
  <FieldLabel>Notes</FieldLabel>
  <FieldControl>
    <Textarea defaultValue="Archived projects can't be edited." />
  </FieldControl>
</Field>
```

## Nên và không nên

### Nên

- Put it in a Field, so it has a visible label and its description and error are linked.
- Set rows for the text you expect, so the box shows how much to write.
- Use the same size as the other fields in the form.

### Không nên

- Don't use it for a single line, such as a name or an email; use Input.
- Don't use a placeholder instead of a label.
- Don't make Enter submit the form; people expect a new line.

## Props

| Tên | Kiểu | Giá trị | Mặc định | Mô tả |
| --- | --- | --- | --- | --- |
| `size` | `enum` | `sm`, `md`, `lg`, `xl` | `md` | Padding and minimum height, matching the Input of the same size. Use the size of the other fields in the form. |
| `resize` | `enum` | `none`, `vertical`, `both` | `vertical` | Which way the user can drag the corner. vertical keeps the width of the form; none for a fixed box, such as a chat composer. |
| `rows` | `number` |  | `3` | Visible lines before the text scrolls. Pick it for the text you expect: 3 for a comment, 6 or more for a description. |
| `disabled` | `boolean` |  | `false` | Can't be focused or edited. Prefer readOnly for a value the user should still read and copy. |
| `readOnly` | `boolean` |  | `false` | Can be focused, scrolled and copied, but not edited. Same look as an editable textarea. |

## Cấu tạo

| Phần | Mô tả |
| --- | --- |
| `root` | The textarea element: sunken fill, control border, radius-element, 14px text at body leading (16px on touch, so iOS doesn't zoom). Never shorter than size-element-* of its size. |
| `placeholder` | Hint text shown when the value is empty. Colored with text-secondary, so it reaches 4.5:1 on the sunken fill. |

## Khả năng truy cập

Role: `textbox`

| Phím | Hành động |
| --- | --- |
| `Tab` | Moves focus in and out of the textarea; inside it, Tab is not captured. |
| `Enter` | Starts a new line. It never submits the form. |

- Name it with a visible label. Inside a Field, FieldLabel points at it and FieldControl links its description and error.
- A placeholder is a hint, not a label: it disappears as soon as the user types.
- aria-invalid shows the danger border; pair it with error text, since the border alone relies on color. A FieldError does both.
- A textarea is a replaced element, so it has no ::before hit area. It is never shorter than a control of its size.
- Disabled text can still scroll, so nothing in a long value is lost from view.

## Cài đặt

```bash
npx shadcn add https://werewolf-ui.vercel.app/r/textarea.json
```

Lệnh này thêm luôn `styles/werewolf.css`, bộ token mà mọi component dùng, và các component khác mà nó cần. Import file đó một lần trong CSS gốc, ngay sau `@import "tailwindcss"`, với đường dẫn tính từ file CSS đó (từ `app/globals.css` là `@import "../styles/werewolf.css"`).