Checkbox
Binary or indeterminate toggle control.
Vista previa
Este ejemplo usa estilos solo para documentación. En producción, utiliza una de las recetas incluidas (CSS, Tailwind o UnoCSS).
Binary or indeterminate toggle control.
Uso
Compón Group, Root, Indicator.
import * as Checkbox from "@solidiom/checkbox"
;<Checkbox.Group>Contenido de Checkbox</Checkbox.Group>Instalación
Instala el paquete con pnpm add @solidiom/checkbox. El paquete requiere dependencias pares compatibles de solid-js y @solidjs/web.
Partes
Checkbox expone 3 partes:
- Group —
data-part="group". - Root —
data-part="root". - Indicator —
data-part="indicator".
Estilos
Checkbox lleva los atributos data-scope="checkbox" y data-part en cada parte para la selección CSS/receta. Los atributos de estado como data-state, data-disabled y data-highlighted se exponen donde corresponda.
Interacción con teclado
| Tecla | Comportamiento |
|---|---|
| Space | Alterna el checkbox entre marcado y desmarcado. |
Composición
Checkbox está diseñado para componerse con otras primitivas. Sus partes pueden combinarse con Field, Button u otras primitivas según sea necesario.
Renderizado SSR e hidratación
Checkbox se renderiza como HTML semántico durante el renderizado en servidor. El comportamiento interactivo (manejadores de teclado, gestión de estado) se activa en la hidratación sin desplazamiento de diseño.