Campo compuesto.

<fieldset class="ui-sample ui-form"><legend>Datos de contacto</legend><label for="form-field-0">Correo electrónico <span aria-hidden="true">*</span></label><input class="input" id="form-field-0" type="email" aria-describedby="form-field-0-help" value="martin@example.cl"><small id="form-field-0-help">Se usará para enviar la boleta.</small></fieldset>

<fieldset class="ui-sample ui-form border border-slate-300 bg-white p-4 text-slate-950 grid gap-3"><legend>Datos de contacto</legend><label for="form-field-0">Correo electrónico <span aria-hidden="true">*</span></label><input class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="form-field-0" type="email" aria-describedby="form-field-0-help" value="martin@example.cl"><small class="text-sm text-slate-600" id="form-field-0-help">Se usará para enviar la boleta.</small></fieldset>

import type { ChangeEventHandler } from "react";

export interface FormFieldProps {
  /** Título del grupo de campos. */
  legend?: string;
  /** Etiqueta visible del campo. */
  label?: string;
  /** Marca el campo como obligatorio con un asterisco. */
  required?: boolean;
  type?: "email" | "text" | "tel" | "url" | "number" | "password" | "search";
  /** Id del campo; la ayuda usa `${id}-help`. Usa uno distinto por campo en la página. */
  id?: string;
  name?: string;
  /** Valor inicial de un campo no controlado. */
  defaultValue?: string;
  /** Valor de un campo controlado; va junto con `onChange`. */
  value?: string;
  onChange?: ChangeEventHandler<HTMLInputElement>;
  /** Texto de ayuda bajo el campo. */
  help?: string;
  /** Mensaje de error; si existe, el campo queda con `aria-invalid`. */
  error?: string;
  className?: string;
}

/**
 * Campo de formulario completo: grupo con título, etiqueta, entrada, ayuda y error de validación.
 *
 * @example <FormField id="correo" label="Correo electrónico" defaultValue="" help="Se usará para enviar la boleta." />
 * @example <FormField id="correo" defaultValue="correo-invalido" error="Ingresa un valor válido." />
 */
export function FormField({
  legend = "Datos de contacto",
  label = "Correo electrónico",
  required = true,
  type = "email",
  id = "form-field-0",
  name,
  defaultValue = "martin@example.cl",
  value,
  onChange,
  help = "Se usará para enviar la boleta.",
  error,
  className,
}: FormFieldProps) {
  const helpId = help ? `${id}-help` : undefined;
  const controlado = value !== undefined && onChange !== undefined;
  return (
    <fieldset className={["ui-form", className].filter(Boolean).join(" ")}>
      <legend>{legend}</legend>
      <label htmlFor={id}>{label}{required ? <> <span aria-hidden="true">*</span></> : null}</label>
      <input
        className="input"
        id={id}
        name={name}
        type={type}
        aria-describedby={helpId}
        aria-invalid={error ? "true" : undefined}
        {...(controlado ? { value, onChange } : { defaultValue: value ?? defaultValue })}
      />
      {help ? <small id={helpId}>{help}</small> : null}
      {error ? <span className="ui-field-error">{error}</span> : null}
    </fieldset>
  );
}