Introducción

El componente ToggleGroup es un conjunto de botones de alternancia diseñados para selección única o múltiple. Se usa ampliamente para permitir a los usuarios elegir estilos de diseño mutuamente excluyentes (p. ej. conmutadores de vista de Cuadrícula vs. Lista) o agrupar modificadores inclusivos (p. ej. botones de formato de texto para Negrita, Cursiva y Subrayado).

El ToggleGroup está totalmente integrado como un bloque toggleGroup en el Page Builder, lo que permite a editores de contenido y desarrolladores configurar fácilmente opciones visuales, comportamientos de multiselección y paletas de color activas directamente en el CMS.

Uso

Estos ejemplos ilustran cómo los editores de contenido enlazan y estructuran botones de alternancia interactivos.

1. Barra de formato de texto de selección múltiple

Permite que varios elementos se mantengan pulsados y activos al mismo tiempo. Excelente para interruptores de funciones de multiselección o paneles de edición de texto.

{
  "type": "toggleGroup",
  "multiple": true,
  "defaultValue": ["bold"],
  "items": [
    { "label": "B", "value": "bold" },
    { "label": "I", "value": "italic" },
    { "label": "U", "value": "underline" }
  ],
  "interactive": true
}

2. Conmutador de diseño de selección única (tema púrpura)

Demuestra el modo de selección única donde solo un elemento puede estar activo a la vez. Las opciones activas se estilizan con tokens de tema púrpura acentuado personalizado.

{
  "type": "toggleGroup",
  "multiple": false,
  "defaultValue": ["list"],
  "items": [
    { "label": "Grid View", "value": "grid" },
    { "label": "List View", "value": "list" }
  ],
  "colorPalette": "purple",
  "interactive": true
}

3. Grupo de navegación vertical compacto

Organiza las opciones de alternancia verticalmente en lugar de horizontalmente, con una escala de tamaño compacto.

{
  "type": "toggleGroup",
  "orientation": "vertical",
  "defaultValue": ["dashboard"],
  "items": [
    { "label": "Dashboard", "value": "dashboard" },
    { "label": "Settings", "value": "settings" }
  ],
  "size": "sm",
  "interactive": true
}

Propiedades

Esquema de elementos del grupo de alternancia

Cada entrada dentro del array items acepta los siguientes parámetros:

Notas para desarrolladores y accesibilidad

• Patrones de accesibilidad WAI-ARIA: Renderiza una barra de herramientas robusta navegable por teclado:
  • El contenedor raíz recibe role="group".
  • Los elementos individuales se renderizan como role="checkbox" con estados aria-checked cuando multiple es true, o como role="radio" con estados aria-checked en caso contrario.
• Navegación por teclado con foco móvil (Roving Focus): Admite el movimiento de foco nativo:
  • Las teclas de flecha (Derecha/Abajo para avanzar, Izquierda/Arriba para retroceder) recorren automáticamente el foco entre los botones activos, coincidiendo con el eje de orientation elegido.
  • Las teclas Inicio y Fin desplazan el foco instantáneamente al primer y último botón habilitado del grupo.
• Asociación de formularios: Las opciones de alternancia actualizan sin problemas el contexto de estado asociado, permitiendo que los contenedores principales o los hooks de formulario capturen los cambios dinámicamente.