PrimitiveDisponible

Toggle Group

Conjunto de botones de alternancia con selección compartida.

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/toggle-group.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

'use client';

import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';

export default function Demo() {
  return (
    <ToggleGroup defaultValue={['left']} aria-label="Text alignment">
      <ToggleGroupItem value="left" aria-label="Align left">
        Left
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Align center">
        Center
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Align right">
        Right
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

Documenta el valor inicial, seleccionado, deshabilitado y foco. La selección cambia el indicador o la posición, además del color.
Usa Espacio para activar botones de selección; las flechas cambian radios y sliders. Checkbox admite un estado mixto.
Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
value	string[]	uncontrolled	Selected toggle values.
multiple	boolean	false	Allows multiple pressed items.
orientation	horizontal / vertical	horizontal	Controls layout and the keyboard navigation axis.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.