# Textarea

> Texto largo, con el mismo cuerpo y los mismos estados que Input.

```tsx
import { Textarea } from "sebs7n-ui/textarea"
```

Sin `"use client"`: sirve en un Server Component.

## Ejemplos

### Con etiqueta y ayuda

```tsx
import { Label } from "sebs7n-ui/label"
import { Textarea } from "sebs7n-ui/textarea"
import { useId } from "react"

function Basico() {
  const id = useId()
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor={id}>Notas internas</Label>
      <Textarea id={id} placeholder="No se muestran al cliente." rows={4} />
      <p className="text-copy-13 text-gray-900">Admite saltos de línea. No se envía por email.</p>
    </div>
  )
}
```

## Props

### Textarea

Hereda las props de `<textarea>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

## Teclado

| Tecla | Qué hace |
|---|---|
| Tab | Entra y sale. Dentro, Tab escribe una tabulación solo si la app lo implementa. |

## Accesibilidad

- Mismo contrato que `Input`: `Label` asociado y `aria-invalid` para el error.

## Reglas de uso

- `rows` define el alto inicial. Para que crezca solo hace falta JS de la app: el paquete no lo trae.
- Si el texto tiene formato (markdown, código), decilo en la ayuda debajo del campo.

## Relacionados

[input](/docs/components/input.md) · [label](/docs/components/label.md)