'/%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
Fieldset
Agrupa campos relacionados bajo una leyenda, con una descripción opcional, y puede deshabilitarlos todos.
import { Fieldset } from '@alea/ui';
Ejemplos
Campos agrupados
La leyenda se lee al entrar al grupo.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Variant
variant
Estados
Cada estado de interacción, forzado para compararlos, en ambos temas.
Oscuro
Claro
Anatomía
Las partes del componente y la clase que da estilo a cada una.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-border…--alea-surface…--alea-text…--alea-text-muted…
Space
--alea-space-1…--alea-space-4…--alea-space-5…
Radius
--alea-radius-lg…
Type
--alea-font-family-body…--alea-font-size-base…--alea-font-size-sm…--alea-font-weight-semibold…
Props
Fieldset props
Agrupa campos relacionados bajo una leyenda: una dirección, un método de pago (fieldset de HTML).
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
legendobligatoria | ReactNode | - | El nombre del grupo, que se lee antes de cada campo. |
className | string | - | Clases extra para el elemento raíz. |
description | ReactNode | - | Una oración bajo la leyenda, enlazada al grupo. |
isDisabled | boolean | - | Deshabilita todos los campos de adentro. |
variant | "filled" | "plain" | 'filled' | filled (un panel, por defecto) o plain. |
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.
- Variantes
variantfilledplain- Estados
- Disabled
- 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-fieldset.alea-fieldset-legend.alea-fieldset-desc.alea-fieldset-body- Atributos data
data-variant=filleddata-variant=plain
Accesibilidad
- Un fieldset y legend reales: los lectores de pantalla anuncian la leyenda al entrar al grupo.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Entra a los campos; se anuncia la leyenda |
Qué hacer y qué evitar
Hacer
- Agrupa campos que responden una sola pregunta (una dirección, una tarjeta).
- Usa la descripción para reglas que aplican a todos los campos de adentro.
Evitar
- No anides fieldsets más de una vez.
- No uses un fieldset alrededor de un solo campo.