Radio Group Nuevo

El componente hp-radio-group permite seleccionar una sola opción de un conjunto mutuamente excluyente. Implementa el patrón WAI-ARIA Radio Group con roving tabindex.

Demostración

Sin estilos (solo base.css)

Opción 1 Opción 2 Deshabilitada

Con estilos personalizados

Opción Uno

Opción Dos

index.html

<hp-radio-group value="1" name="options">
  <div class="field-group">
    <hp-radio value="1" id="r1" class="my-radio"></hp-radio>
    <hp-label for="r1">Opción 1</hp-label>
  </div>
  <div class="field-group">
    <hp-radio value="2" id="r2" class="my-radio"></hp-radio>
    <hp-label for="r2">Opción 2</hp-label>
  </div>
</hp-radio-group>

style.css

.my-radio {
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.my-radio[aria-checked="true"] {
  border-color: #0070f3;
}

.my-radio[aria-checked="true"]::after {
  content: "";
  width: 12px;
  height: 12px;
  background: #0070f3;
  border-radius: 50%;
}

Instalación

pnpm

pnpm add @headless-primitives/radio-group

npm

npm install @headless-primitives/radio-group

yarn

yarn add @headless-primitives/radio-group

bun

bun add @headless-primitives/radio-group

Features

• ⌨️ Navegación con flechas, Home, End — selección automática al navegar.
• ♿️ role="radiogroup", role="radio", aria-checked y aria-orientation automáticos.
• 🎨 Sin estilos visuales (Headless).
• 🔒 Soporte para items individuales deshabilitados y grupo completo deshabilitado.
• 📐 Orientación configurable (horizontal / vertical).

Anatomía

<hp-radio-group>
  <hp-radio value="1"></hp-radio>
  <hp-radio value="2"></hp-radio>
</hp-radio-group>

API Reference

hp-radio-group

Contenedor raíz con roving tabindex.

Atributos / Propiedades

Atributo / Propiedad	Tipo	Por Defecto	Descripción
value	string	""	Valor de la opción seleccionada.
disabled	boolean	false	Deshabilita todo el grupo.
required	boolean	false	Marca el grupo como requerido.
orientation	"horizontal" | "vertical"	"vertical"	Orientación del grupo.

Eventos

Evento	Detalle	Descripción
hp-change	{ value: string }	Cuando cambia la selección.

Atributos ARIA gestionados automáticamente

• role="radiogroup" — Asignado si no se especifica.
• aria-orientation — Sincronizado con orientation.
• aria-required — Presente cuando required es true.

hp-radio

Opción individual dentro del grupo.

Atributos / Propiedades

Atributo / Propiedad	Tipo	Por Defecto	Descripción
value	string	""	Valor único de esta opción.
disabled	boolean	false	Deshabilita esta opción.

Atributos ARIA gestionados automáticamente

• role="radio" — Asignado si no se especifica.
• aria-checked — "true" | "false".
• aria-disabled — Sincronizado con disabled.
• tabindex — 0 para el seleccionado, -1 para los demás (roving).

Accesibilidad

Adhiere al patrón WAI-ARIA APG para Radio Group.

Navegación por teclado

Tecla	Acción
ArrowDown / ArrowRight	Selecciona la siguiente opción.
ArrowUp / ArrowLeft	Selecciona la opción anterior.
Home	Selecciona la primera opción.
End	Selecciona la última opción.