Área de texto.

<div class="ui-sample ui-form"><label for="textarea-0">Descripción</label><textarea class="input" id="textarea-0" rows="4" aria-describedby="textarea-0-help">Serie mensual con cobertura regional.</textarea><small id="textarea-0-help">Explica contenido, fuente y período.</small></div>

<div class="ui-sample ui-form border border-slate-300 bg-white p-4 text-slate-950"><label for="textarea-0">Descripción</label><textarea class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="textarea-0" rows="4" aria-describedby="textarea-0-help">Serie mensual con cobertura regional.</textarea><small class="text-sm text-slate-600" id="textarea-0-help">Explica contenido, fuente y período.</small></div>

import type { ChangeEventHandler } from "react";

export interface TextareaProps {
  /** Etiqueta visible del campo. */
  label?: string;
  /** Id del campo; la ayuda usa `${id}-help`. Usa uno distinto por campo en la página. */
  id?: string;
  name?: string;
  /** Alto visible en líneas. */
  rows?: number;
  /** Texto inicial de un campo no controlado. */
  defaultValue?: string;
  /** Texto de un campo controlado; va junto con `onChange`. */
  value?: string;
  onChange?: ChangeEventHandler<HTMLTextAreaElement>;
  maxLength?: number;
  placeholder?: string;
  disabled?: boolean;
  /** Texto de ayuda bajo el campo. */
  help?: string;
  /** Mensaje de error; si existe, el campo queda con `aria-invalid`. */
  error?: string;
  className?: string;
}

/**
 * Área de texto de varias líneas con etiqueta, ayuda y error, para descripciones y comentarios.
 *
 * @example <Textarea id="descripcion" label="Descripción" defaultValue="" help="Explica contenido, fuente y período." />
 * @example <Textarea id="descripcion" defaultValue="Serie mensual de empleo por región." error="Indica la fuente y el período de la serie." />
 */
export function Textarea({
  label = "Descripción",
  id = "textarea-0",
  name,
  rows = 4,
  defaultValue = "Serie mensual con cobertura regional.",
  value,
  onChange,
  maxLength,
  placeholder,
  disabled,
  help = "Explica contenido, fuente y período.",
  error,
  className,
}: TextareaProps) {
  const helpId = help ? `${id}-help` : undefined;
  const controlado = value !== undefined && onChange !== undefined;
  return (
    <div className={["ui-form", className].filter(Boolean).join(" ")}>
      <label htmlFor={id}>{label}</label>
      <textarea
        className="input"
        id={id}
        name={name}
        rows={rows}
        maxLength={maxLength}
        placeholder={placeholder}
        disabled={disabled}
        aria-describedby={helpId}
        aria-invalid={error ? "true" : undefined}
        onChange={onChange}
        {...(controlado ? { value } : { defaultValue: value ?? defaultValue })}
      />
      {help ? <small id={helpId}>{help}</small> : null}
      {error ? <span className="ui-field-error">{error}</span> : null}
    </div>
  );
}