Saltar al contenido principal

Textarea

Entrada de texto multilínea con label, texto de ayuda, validación, auto-resize y contador de caracteres.

1import { Textarea } from '@/components/ui/textarea';
2

3export function Default() {
4  return (
5    <div className="w-full max-w-sm">
6      <Textarea aria-label="Release notes" placeholder="What changed in this release?" />
7    </div>
8  );
9}

Instalación

pnpm dlx nachui add textarea

Anatomía

1import { Textarea } from '@/components/ui/textarea';
1<Textarea label="Notas" description="Visible para todo el equipo." placeholder="Escribe algo" />
El label, la descripción, el error y el contador quedan asociados al textarea mediante aria-describedby, así que un lector de pantalla los anuncia juntos. El id se genera si no pasas uno.

Variantes

Predeterminado (Default)

1import { Textarea } from '@/components/ui/textarea';
2

3export function Default() {
4  return (
5    <div className="w-full max-w-sm">
6      <Textarea aria-label="Release notes" placeholder="What changed in this release?" />
7    </div>
8  );
9}

Con label

label y description se renderizan arriba del campo.
Shown on the public status page while the incident is open.
1import { Textarea } from '@/components/ui/textarea';
2

3export function WithLabel() {
4  return (
5    <div className="w-full max-w-sm">
6      <Textarea
7        label="Incident summary"
8        description="Shown on the public status page while the incident is open."
9        placeholder="Elevated error rates on the EU region"
10        rows={4}
11      />
12    </div>
13  );
14}

Con error

error marca el campo como inválido y muestra el mensaje debajo.

Request access

Tell the workspace owner why you need the production database.

Add at least 20 characters so the owner has context.
1import { Button } from '@/components/ui/button';
2import { Textarea } from '@/components/ui/textarea';
3

4export function WithError() {
5  return (
6    <div className="border-border bg-card flex w-full max-w-sm flex-col gap-4 rounded-xl border p-5">
7      <div>
8        <p className="text-sm font-medium">Request access</p>
9        <p className="text-muted-foreground text-xs">
10          Tell the workspace owner why you need the production database.
11        </p>
12      </div>
13      <Textarea
14        label="Reason"
15        defaultValue="debugging"
16        error="Add at least 20 characters so the owner has context."
17        rows={3}
18      />
19      <Button size="sm" className="self-start">
20        Send request
21      </Button>
22    </div>
23  );
24}

Auto resize

autoResize hace crecer el textarea con su contenido. maxRows limita la altura y a partir de ahí el campo hace scroll.
Grows with what you type, up to six lines.
1import { Textarea } from '@/components/ui/textarea';
2

3export function AutoResize() {
4  return (
5    <div className="w-full max-w-sm">
6      <Textarea
7        label="Reply"
8        description="Grows with what you type, up to six lines."
9        placeholder="Thanks for the report, we are looking into it."
10        autoResize
11        maxRows={6}
12      />
13    </div>
14  );
15}

Con contador

showCount muestra la longitud actual. Con maxLength se ve como 12 / 160.
71 / 160
1import { Textarea } from '@/components/ui/textarea';
2

3export function WithCount() {
4  return (
5    <div className="w-full max-w-sm">
6      <Textarea
7        label="Short bio"
8        defaultValue="Platform engineer at Northwind Labs. I keep the deploy pipeline boring."
9        maxLength={160}
10        showCount
11        rows={3}
12      />
13    </div>
14  );
15}

Componentes Compuestos

Las partes se exponen para layouts personalizados:
1<Textarea.Wrapper>
2  <Textarea.Label htmlFor="custom">Layout personalizado</Textarea.Label>
3  <Textarea.Description>Texto de ayuda.</Textarea.Description>
4  <textarea id="custom" />
5  <Textarea.Error>Algo salió mal.</Textarea.Error>
6</Textarea.Wrapper>

Referencia de API

Textarea

PropTipoPor defectoDescripción
labelstring-Label renderizado arriba del textarea
descriptionstring-Texto de ayuda entre el label y el campo
errorstring-Mensaje de error, también activa aria-invalid
size"sm" | "default" | "lg""default"Padding y tamaño de fuente
resize"none" | "vertical" | "both""vertical"En qué direcciones puede arrastrar el usuario
autoResizebooleanfalseCrece con el contenido y desactiva el resize manual
maxRowsnumber-Máximo de filas cuando autoResize está activo
showCountbooleanfalseMuestra el contador de caracteres
maxLengthnumber-Límite nativo, se muestra junto al contador
classNamestring-Clases CSS adicionales
Cualquier otro atributo de un textarea nativo se pasa directo.

Textarea.Wrapper, Textarea.Label, Textarea.Description, Textarea.Error, Textarea.Count

Partes de presentación. Cada una acepta className y los atributos del elemento que renderiza.
¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue
AnteriorTabs
SiguienteTimeline
Ctrl+I