FormField

Wrapper de campo de formulario: combina label, hint y error accesibles en torno a cualquier control. Inyecta automáticamente id, aria-describedby y aria-invalid al hijo. Soporta required visual (asterisco), optional y estado disabled.

Nombre

Aparece en tu perfil público.

Correo electrónico

Sitio webopcional

Instalación#

bash

pnpm add @tsukira/ui

Uso#

tsx

import { FormField } from "@tsukira/ui";import { Input } from "@tsukira/ui"; <FormField label="Correo" hint="Te enviaremos un enlace de confirmación." required>  <Input type="email" placeholder="nombre@empresa.com" /></FormField><FormField label="Contraseña" error="Mínimo 8 caracteres." required>  <Input type="password" placeholder="••••••••" /></FormField>

Ejemplos#

label + hint

Correo

Solo lo usamos para iniciar sesión.

required y optional

asterisco rojo · badge «opcional»

Nombre

Empresaopcional

Estado error

error reemplaza hint y activa aria-invalid

Contraseña

Mínimo 8 caracteres con una mayúscula.

Estado disabled

disabled opaca label/hint

Plan

Actualiza tu suscripción para cambiar.

Con Textarea

Descripciónopcional

0/280

Máximo 280 caracteres.

Fusión: formulario de perfil completo

FormField + Input + Textarea + Button

Fusión: validación en vivo

useState activa error si el valor no cumple la regla

Correo electrónico

Escribe tu correo para continuar.

API#

FormFieldPropsextends Omit<HTMLAttributes<HTMLDivElement>, 'children'>

Prop	Tipo	Default	Descripción
`label`	`ReactNode`	—	Label visible.
`htmlFor`	`string`	—	ID del input. Si no se pasa, se genera con useId() y se inyecta al hijo.
`hint`	`ReactNode`	—	Texto de ayuda bajo el input.
`error`	`ReactNode`	—	Texto de error — si está presente, el campo se considera inválido.
`optional`	`boolean`	—	Indica que el campo es opcional (renderea "opcional" gris al lado del label).
`required`	`boolean`	—	Indica required visual (asterisco rojo). NO setea el attr `required` en el input.
`disabled`	`boolean`	—	Estado disabled (afecta opacidad del label/hint).
`children`*	`ReactElement`	—	Hijo único — input/textarea/select. Si el child acepta `id`/`aria-describedby`/`aria-invalid`, FormField los inyecta automáticamente para conectar label/hint/error.