Radio Group
Single-select radio button set with keyboard navigation.
Vista previa
Este ejemplo usa estilos solo para documentación. En producción, utiliza una de las recetas incluidas (CSS, Tailwind o UnoCSS).
Single-select radio button set with keyboard navigation.
Uso
Compón Root, Item, Indicator.
import * as RadioGroup from "@solidiom/radio-group"
;<RadioGroup.Root>Contenido de Radio Group</RadioGroup.Root>Instalación
Instala el paquete con pnpm add @solidiom/radio-group. El paquete requiere dependencias pares compatibles de solid-js y @solidjs/web.
Partes
Radio Group expone 3 partes:
- Root —
data-part="root". - Item —
data-part="item". - Indicator —
data-part="indicator".
Estilos
Radio Group lleva los atributos data-scope="radio-group" 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 |
|---|---|
| ArrowDown/ArrowRight | Mueve la selección al siguiente elemento radio. |
| ArrowUp/ArrowLeft | Mueve la selección al elemento radio anterior. |
Composición
Radio Group 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
Radio Group 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.