Moodinary/UI

Textarea

Texto largo: notas de acción, mensaje del pulso. Mostrá el límite si existe.

Campo multilínea usado en Nueva acción y en el editor de menciones. La descripción de una acción admite hasta 500 caracteres. Crece con field-sizing donde el navegador lo soporta y permite ajustar el alto a mano.

Instalación

shadcn
npx shadcn@latest add https://design.moodinary.com/r/textarea.json
import
import { Textarea } from "@moodinary/ui/components/textarea";

Ejemplos

Límite y error

El contador acompaña la escritura. El mensaje de error está conectado al campo y dice qué falta completar.

0 / 500

Código
default.tsx
"use client";

import {
	Field,
	FieldError,
	FieldHint,
	FieldLabel,
} from "@moodinary/ui/components/field";
import { Textarea } from "@moodinary/ui/components/textarea";
import { useCallback, useState } from "react";

export default function TextareaDefault() {
	const [note, setNote] = useState("");
	const change = useCallback(
		(event: React.ChangeEvent<HTMLTextAreaElement>) =>
			setNote(event.target.value),
		[]
	);
	return (
		<div className="grid w-full max-w-xl gap-4 sm:grid-cols-2">
			<Field>
				<FieldLabel htmlFor="action-note">Qué se va a hacer</FieldLabel>
				<Textarea
					aria-describedby="action-note-count"
					id="action-note"
					maxLength={500}
					onChange={change}
					placeholder="Opcional: qué espera la dirección que cambie."
					value={note}
				/>
				<FieldHint id="action-note-count">{note.length} / 500</FieldHint>
			</Field>
			<Field>
				<FieldLabel htmlFor="action-error">Con error</FieldLabel>
				<Textarea
					aria-describedby="action-error-msg"
					aria-invalid
					id="action-error"
				/>
				<FieldError id="action-error-msg">
					Contá brevemente qué pasó.
				</FieldError>
			</Field>
		</div>
	);
}

Props

Textarea

PropTipoDefaultDescripción
value / defaultValuestring | number | readonly string[]-Contenido controlado o inicial.
onChangeReact.ChangeEventHandler<HTMLTextAreaElement>-Usalo para actualizar el valor y el contador.
maxLengthnumber-Cantidad máxima de caracteres permitidos.
rowsnumber-Alto inicial nativo; el componente tiene un mínimo de 84 px.
disabledbooleanfalseImpide editar y enfocar el campo.
aria-invalidboolean | "true" | "false" | "grammar" | "spelling"-Activa el estilo de error.
aria-describedbystring-IDs del contador, ayuda o error.

Cuándo sí y cuándo no

Hacé
  • Mostrá el límite si existe.
  • Dejá espacio para leer varias líneas.
  • Usá una ayuda que explique qué escribir.
Evitá
  • No uses Textarea para un dato de una línea.
  • No borres texto al detectar un error.
  • No ocultes el contador hasta llegar al límite.

Accesibilidad

  • Tab entra al campo; Enter agrega una línea, no envía el formulario.
  • Conectá contador y error con aria-describedby.
  • Evitá anunciar cada carácter en una región live.