'/%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
Checkbox
Una casilla con estados marcado, indeterminado, inválido, solo lectura y deshabilitado; tres tamaños, relleno u outline, la etiqueta a cualquier lado; grupos desde items con un padre Seleccionar todo, en lista o como tarjetas.
import { Checkbox, CheckboxGroup } from '@alea/ui';
Ejemplos
Checkbox
Marcada, sin marcar, indeterminada, con texto de ayuda.
Grupo de casillas
Varias opciones con una etiqueta. El valor es la lista de valores marcados.
Selected: contrast
Seleccionar todo
Pasa items y selectAllLabel: la casilla padre marca o desmarca cada opción habilitada y muestra un guion cuando solo algunas están marcadas. Las opciones deshabilitadas quedan como están.
Value: ["palette"]
Tarjetas
Varias opciones como mosaicos, para complementos o funciones.
Tamaños, estilos y lado de la etiqueta
Casillas sm (16 px), md (20 px) y lg (24 px); filled (por defecto) u outline; la etiqueta a cualquier lado. Define size en un grupo para dar tamaño a todas las opciones.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Label Position
labelPosition - Size
size - 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.
Medidas
Medido del componente renderizado a 2x: alto, ancho, padding, radio e icono.
Cada tamaño y espacio es múltiplo de 4 px.
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-accent…--alea-accent-on…--alea-accent-strong…--alea-accent-subtle…--alea-border…--alea-border-control…--alea-border-strong…--alea-field-bg…--alea-focus…--alea-status-danger…--alea-surface…--alea-text…--alea-text-faint…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…--alea-space-4…
Radius
--alea-radius-md…
Type
--alea-font-size-base…--alea-font-size-md…--alea-font-size-sm…--alea-font-size-xs…
Motion
--alea-motion-duration-base…--alea-motion-duration-fast…--alea-motion-ease-out…
Component
--alea-check-icon…--alea-check-radius…--alea-check-size…
Props
Checkbox props
Una casilla con estados marcada, indeterminada, inválida, solo lectura y deshabilitada, tres tamaños y dos estilos.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
children | ReactNode | - | La etiqueta junto a la casilla. |
description | ReactNode | - | Texto de ayuda bajo la etiqueta. |
labelPosition | "start" | "end" | - | Etiqueta a la derecha (por defecto) o a la izquierda. |
size | "sm" | "md" | "lg" | - | sm (casilla de 16 px), md (20 px, por defecto) o lg (24 px). En un grupo, defínelo en el grupo. |
variant | "filled" | "outline" | - | filled (por defecto: una casilla de acento cuando está marcada) u outline (un borde y check de acento). |
CheckboxGroup props
Un conjunto de casillas con etiqueta; value es la lista de valores marcados. Pasa items y selectAllLabel para una casilla padre "Seleccionar todo".
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
appearance | "cards" | "default" | 'default' | default (una lista) o cards (mosaicos con borde, para planes o funciones). |
description | ReactNode | - | Texto de ayuda bajo el grupo. |
errorMessage | ReactNode | ((v: ValidationResult) => ReactNode) | - | Texto de error, mostrado cuando el grupo es inválido. |
items | ChoiceOption[] | - | Las opciones como datos, en lugar de hijos Checkbox o Radio. |
label | ReactNode | - | La etiqueta visible del grupo. |
orientation | "horizontal" | "vertical" | 'vertical' | vertical (por defecto) u horizontal. |
selectAllLabel | ReactNode | - | Con items: una casilla padre que las marca o desmarca todas, y muestra un guion cuando solo algunas están marcadas. |
size | "sm" | "md" | "lg" | - | sm, md (por defecto) o lg para todas las opciones. |
variant | "filled" | "outline" | - | filled (por defecto) u outline para todas las opciones. |
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.
Checkbox
- Variantes
labelPositionstartendsizesmmdlgvariantfilledoutline- Estados
- DisabledHoverSelectedIndeterminateKeyboard focusInvalid
- Motion
- morphmore
- 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-check.alea-check-box.alea-check-text.alea-check-desc- Atributos data
data-appearance=cardsdata-size=smdata-size=lgdata-label-position=startdata-variant=outlinedata-appearance=buttons
CheckboxGroup
- Variantes
appearancecardsdefaultorientationhorizontalverticalsizesmmdlgvariantfilledoutline- Estados
- DisabledHoverSelectedIndeterminateKeyboard focusInvalid
- Motion
- morphmore
- 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-choice-group.alea-check.alea-check-all.alea-check-box.alea-check-text.alea-choice-items- Atributos data
data-orientation=horizontaldata-appearance=cardsdata-size=smdata-size=lgdata-label-position=startdata-variant=outlinedata-nesteddata-appearance=buttons
Accesibilidad
- Un input checkbox real, así que funciona con formularios y con toda tecnología de asistencia.
- CheckboxGroup es un grupo con etiqueta.
Teclado
| Tecla | Acción |
|---|---|
| Espacio | Marca o desmarca la casilla |
Qué hacer y qué evitar
Hacer
- Escribe las etiquetas en positivo: Envíame novedades.
Evitar
- No uses una casilla para un ajuste que se aplica al instante: usa Switch.
En Figma
Checkbox con State (Unchecked, Checked, Indeterminate) × Interaction × Invalid.