Grupo de alternancia

Un grupo de alternancia es una fila de opciones que se lee como un solo control. Constrúyelo a partir de items, y di cuál está activo con value.

Grupo básico

toggleGroup({
  label: 'Alineación del texto',
  value: 'center',
  items: [
    { value: 'left', label: 'Izquierda' },
    { value: 'center', label: 'Centro' },
    { value: 'right', label: 'Derecha' },
  ],
})

Cadenas simples

toggleGroup({ label: 'Densidad', value: 'cómoda', items: ['compacta', 'cómoda', 'amplia'] })

Enlaces

Esta es la forma que suele querer un sitio estático: cada segmento es una página. Los elementos con href se dibujan como anclas y el activo se marca con aria-current="page", no con aria-pressed, porque un enlace no es un botón que hayas dejado hundido.

Documentación UI Ejemplos

toggleGroup({
  label: 'Sección',
  value: 'ui',
  items: [
    { value: 'docs', label: 'Documentación', href: '/es/docs' },
    { value: 'ui', label: 'UI', href: '/es/ui' },
    { value: 'examples', label: 'Ejemplos', href: '/es/examples' },
  ],
})

Más de uno activo

Pasa un array como value. El contenedor es un group normal en ambos casos: un radiogroup estaría mal, porque esto son botones pulsados y no radios.

toggleGroup({
  label: 'Formato',
  value: ['bold', 'underline'],
  items: [
    { value: 'bold', label: 'Negrita' },
    { value: 'italic', label: 'Cursiva' },
    { value: 'underline', label: 'Subrayado' },
  ],
})

Tamaños y variantes

stack({ gap: 'md' },
  toggleGroup({ size: 'sm', label: 'Pequeño', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ size: 'md', label: 'Mediano', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ size: 'lg', label: 'Grande', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ variant: 'ghost', label: 'Ghost', value: 'b', items: ['a', 'b', 'c'] }),
)

Elementos deshabilitados

toggleGroup({
  label: 'Renderizado',
  value: 'static',
  items: [
    { value: 'static', label: 'Estático' },
    { value: 'islands', label: 'Islas' },
    { value: 'ssr', label: 'SSR', disabled: true },
  ],
})

En una barra de herramientas

stack({ direction: 'row', gap: 'md', wrap: true, align: 'center' },
  toggleGroup({ label: 'Alineación', value: 'Izquierda', size: 'sm', items: ['Izquierda', 'Centro', 'Derecha'] }),
  divider({ orientation: 'vertical' }),
  toggleGroup({ label: 'Estilo', value: ['Negrita'], size: 'sm', items: ['Negrita', 'Cursiva'] }),
)

Cuándo usar otra cosa

Si la elección se envía con un formulario, usa choiceGroup(): radios de verdad, sin script. Si cada segmento es una página, prefiere la forma de enlaces de arriba. Un grupo de alternancia es para una elección sobre la que actúa la propia página.

Props

Prop	Tipo	Por defecto	Descripción
`items`	`Array`	`[]`	Cadenas, u objetos { value, label, href, disabled }.
`value`	`string \| number \| Array`	—	Qué elemento está activo. Un array cuando pueden serlo varios.
`label`	`string`	—	Nombre accesible del grupo.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Se aplica a todos los elementos.
`variant`	`'outline' \| 'ghost' \| 'soft'`	`'outline'`	Cómo se ve un elemento apagado.