'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Formularios
Form
Validación al enviar, foco en el primer problema y errores del servidor en sus campos.
import { Form, FormActions, ErrorSummary } from '@alea/ui';
Ejemplos
Formulario con errores del servidor
Prueba taken@example.com: la respuesta del servidor aparece en el campo.
Resumen de errores
Para formularios largos: qué corregir, con enlaces a los campos.
Corrige esto para continuar
Props
Form props
Un formulario que valida al enviar, mueve el foco al primer problema y muestra los errores del servidor en sus campos.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | - | Los hijos del componente. |
gap | number | 20 | Espacio entre campos. Por defecto 20 px. |
onSubmit | ((values: Record<string, FormDataEntryValue>, event: FormEvent<HTMLFormElement>) => void | Record<string, string | string[]> | Promise<...>) | - | Se llama con los valores del formulario cuando todos los campos son válidos. Devuelve errores del servidor por nombre de campo para mostrarlos en los campos; una promesa muestra el estado de carga. |
FormActions props
Los botones al final de un formulario.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
align | "start" | "end" | "stretch" | 'start' | start (por defecto), end, o stretch para botones de ancho completo. |
isLoading | boolean | - | Muestra el spinner en el botón de enviar. |
secondary | ReactNode | - | Un botón de cancelar o secundario. |
submitLabel | ReactNode | - | El texto del botón de enviar. Por defecto "Guardar". |
ErrorSummary props
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
errorsobligatoria | Record<string, string> | - | Los errores por id de campo: { email: 'Use a valid email.' }. Cada uno enlaza a su campo. |
title | ReactNode | - | El título. Por defecto "Corrige esto para continuar". |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
Form
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-form- Atributos data
data-busy
FormActions
- Variantes
alignstartendstretch- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-form-actions- Atributos data
data-align=enddata-align=stretch
ErrorSummary
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-error-summary
Accesibilidad
- Al enviar, el primer campo inválido recibe el foco y se lee su error.
- ErrorSummary se anuncia y enlaza a cada campo.
Teclado
| Tecla | Acción |
|---|---|
| Enter (en un campo) | Envía |
| Tab | Se mueve entre los campos y los enlaces del resumen |
Qué hacer y qué evitar
Hacer
- Devuelve { campo: mensaje } desde onSubmit para errores del servidor.
Evitar
- No deshabilites el botón de enviar para mostrar que un formulario está incompleto.