Field
Etiqueta, ayuda y error para un control que no es del kit: le da nombre accesible y lo enlaza con sus mensajes.
Usar
import { Field } from "@unozero-ai/ui/react";
<Field></Field>Básico
Etiqueta, ayuda y error para un control que no es del kit: un <input> nativo que el kit no tiene (hora, mes, rango) o un control propio de tu app. Los del kit, como Input o MoneyInput, ya traen su label: no los envuelvas. La etiqueta y el mensaje se pintan en el light DOM, junto al control: un <label for> de verdad (pulsarlo enfoca el campo) y aria-describedby hacia la ayuda. El control lo estilas tú; con los tokens del campo (--control-h, --field-radius, border-input) queda igual que los del kit.
Obligatorio y opcional
required dibuja el asterisco junto a la etiqueta, pero no valida: pon también required en el control. optional escribe «(opcional)», con el texto de setLabels. Field no es un control de formulario: lo que entra en el FormData y valida es el control que envuelve, con el globo del navegador. Pulsa «Generar factura» sin elegir el mes.
Error
Con error, el mensaje sustituye a la ayuda, lleva icono y se anuncia (role="alert"), y el control recibe aria-invalid; el borde rojo lo pones tú con ese atributo (aquí, aria-invalid:border-destructive). Dice qué pasa y qué hacer, no solo que está mal (la Regla del Tenant). Elige una hora después de la 1 p. m.
Control dentro de un envoltorio
El control es el primer elemento del slot o, si ese elemento es un envoltorio, el primer control dentro de él: aquí el rango, junto a su <output>. Si el control no es etiquetable (un div role="listbox" propio), recibe aria-labelledby y pulsar la etiqueta lo enfoca. Los atributos ARIA que el control ya tuviera se respetan.
Con React y SSR
Field añade su etiqueta y su mensaje como hijos al conectarse. Si la página se pinta en el servidor (Next.js), esos hijos aparecen antes de que React hidrate y la hidratación falla. Hasta que el kit lo resuelva, monta el formulario solo en el cliente, por ejemplo con dynamic(() => import("./form"), { ssr: false }), como hacen las demos de esta ficha.
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).