'/%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
Switch
Un ajuste de encendido y apagado que se aplica al instante: tres tamaños, la etiqueta a cualquier lado, textos cortos dentro del riel, íconos en el control y un estado de guardado.
import { Switch } from '@alea/ui';
Ejemplos
Switch
Se aplica de inmediato.
Filas de ajustes
Etiqueta a la izquierda para listas de ajustes.
Tamaños, etiquetas e íconos
sm, md y lg; onLabel y offLabel dentro del riel (de dos o tres letras); thumbIcon muestra un check y una cruz, o tu propio ícono.
Guardando
isLoading pone un spinner en la manija e ignora los clics mientras se guarda el cambio.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Label Position
labelPosition - Size
size
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.
| size | Alto | Ancho | Padding (y · x) | Radio | Tamaño de texto | Icono | Separación |
|---|---|---|---|---|---|---|---|
sm | - | - | - | - | - | - | - |
md | - | - | - | - | - | - | - |
lg | - | - | - | - | - | - | - |
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-solid…--alea-accent-strong…--alea-accent-subtle…--alea-border…--alea-border-strong…--alea-focus…--alea-status-danger…--alea-surface…--alea-surface-deep…--alea-surface-raised…--alea-text…--alea-text-faint…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…--alea-space-4…
Radius
--alea-radius-full…--alea-radius-md…
Type
--alea-font-family-body…--alea-font-size-base…--alea-font-size-md…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-semibold…
Motion
--alea-motion-duration-base…--alea-motion-duration-fast…--alea-motion-ease-out…
Other
--alea-control-thumb…
Props
Switch props
Un ajuste de encendido/apagado que se aplica de inmediato: tres tamaños, etiquetas en el riel, íconos en la manija y un estado de carga.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
description | ReactNode | - | Texto de ayuda bajo la etiqueta. |
isLoading | boolean | - | Muestra un spinner en la manija mientras se guarda el cambio; se ignoran los clics. |
labelPosition | "start" | "end" | 'end' | Etiqueta a la izquierda (filas de ajustes) o a la derecha (por defecto). |
offLabel | ReactNode | - | Texto corto dentro del riel cuando está apagado. |
onLabel | ReactNode | - | Texto corto dentro del riel cuando está encendido, como ON o I. El riel crece para que quepa. |
size | "sm" | "md" | "lg" | 'md' | sm (36 × 20), md (44 × 24, por defecto) o lg (52 × 28). |
thumbIcon | ReactNode | - | Un ícono en la manija: true para un check y una cruz, o tu propio ícono. |
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.
Size × state
Oscuro
size="sm" | size="md" | |
|---|---|---|
isSelected="false" | ||
isSelected="true" |
Claro
size="sm" | size="md" | |
|---|---|---|
isSelected="false" | ||
isSelected="true" |
Medido: alto · padding horizontal · radio de esquina · tamaño de texto, en px, de la grilla oscura.
- Variantes
labelPositionstartendsizesmmdlg- Estados
- DisabledHoverSelectedIndeterminateKeyboard focusInvalidPressed
- 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-switch.alea-switch-track.alea-switch-label.alea-switch-thumb.alea-check-text.alea-check-desc- Atributos data
data-appearance=cardsdata-label-position=startdata-size=smdata-size=lgdata-loadingdata-labelsdata-variant=outlinedata-appearance=buttons
Accesibilidad
- Rol switch: se anuncia como activado o desactivado.
Teclado
| Tecla | Acción |
|---|---|
| Espacio | Lo activa o desactiva |
Qué hacer y qué evitar
Hacer
- Nombra lo que se activa, no la acción: Modo oscuro.
Evitar
- No lo uses en un formulario que necesita Guardar: usa Checkbox.