---
title: "Textarea"
description: "A multi-line field for free text. It grows vertically, keeps the density minimum height and shares Input's states."
kind: component
id: C-008
registry: "textarea"
docs: "https://koten.codehive.com.co/components/textarea"
markdown: "https://koten.codehive.com.co/md/components/textarea.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/textarea.json"
language: en
---

# Textarea · 複数行

> Component C-008 in the Koten UI catalog.

A multi-line field for free text. It grows vertically, keeps the density minimum height and shares Input's states.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/textarea.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/textarea.json
```

## Files

- `@/components/ui/textarea.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Examples

### Rows and sizes

rows hints at the amount of text; the two-control-height minimum prevents an overly short field.

```tsx
<Field label="Notas de entrega" description="Horario, acceso o instrucciones.">
  <Textarea rows={4} placeholder="Entregar después de las 14:00." />
</Field>

<Field label="Comentario interno" description="Visible solo para el equipo.">
  <Textarea size="sm" rows={2} placeholder="Revisar con almacén." />
</Field>
```

### Limit and error

maxLength caps the input, but the limit belongs in the visible description and the error comes from Field.

```tsx
<Field
  label="Notas de entrega"
  description="Máximo 500 caracteres."
  error="Las notas de entrega son obligatorias."
>
  <Textarea rows={3} maxLength={500} />
</Field>
```

### Use inside a form

A required Textarea with a visible limit, help text and submission.

```tsx
<form className="grid max-w-md gap-[var(--koten-gap)]">
  <Field
    label="Notas de entrega"
    description="Máximo 500 caracteres. Indica horario, acceso o persona de contacto."
    required
  >
    <Textarea
      name="delivery-notes"
      rows={4}
      maxLength={500}
      placeholder="Entregar después de las 14:00 en la puerta lateral."
    />
  </Field>

  <div className="flex flex-wrap items-center gap-[var(--koten-gap)]">
    <Button type="submit" variant="primary">Guardar notas</Button>
  </div>
</form>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `rows` | `number` | `3` | Initial height in rows; the visual minimum remains two control heights. |
| `maxLength` | `number` | `—` | Caps the input, but the same limit must be repeated in the visible description. |
| `size` | `sm \| md` | `md` | Adjusts text and padding; the minimum height depends on density. |
| `aria-invalid` | `boolean` | `—` | Inherited from Field's error; it does not need to be declared in normal use. |
| `required` | `boolean` | `—` | Inherited from the containing Field and enables native validation. |
| `readOnly` | `boolean` | `false` | Lets the text be read and copied without modification. |
| `disabled` | `boolean` | `false` | Disables the field and removes it from the tab order. |

## Accessibility

- Textarea needs a visible label, and any limit belongs in the description, not only in maxLength.
- It resizes vertically only, so it never breaks the page width or causes horizontal scrolling.
- Enter inserts a line break; submission must happen through an explicit button.
- The error is announced through Field with aria-invalid and aria-live polite, exactly as in Input.

## Sources

- Catalog page: https://koten.codehive.com.co/components/textarea
- Markdown: https://koten.codehive.com.co/md/components/textarea.md
- Repository: https://github.com/codehive-colombia/koten