Formularios

ToggleGroup

Varios Toggle juntos, en modo «uno» o «varios».

import { ToggleGroup, ToggleGroupItem } from "sebs7n-ui/toggle-group"

Ejemplos

Uno de varios

El grupo entero es una sola parada de tabulación; adentro se recorre con las flechas.

import { ToggleGroup, ToggleGroupItem } from "sebs7n-ui/toggle-group"
import { useState } from "react"

function Basico() {
  const [vista, setVista] = useState<string[]>(["tabla"])
  return (
    <ToggleGroup aria-label="Vista" onValueChange={(value) => value[0] && setVista(value as string[])} value={vista}>
      <ToggleGroupItem value="tabla">Tabla</ToggleGroupItem>
      <ToggleGroupItem value="tarjetas">Tarjetas</ToggleGroupItem>
      <ToggleGroupItem value="calendario">Calendario</ToggleGroupItem>
    </ToggleGroup>
  )
}

Props

Generadas del TypeScript del paquete. Solo las props propias: las heredadas del primitivo de Base UI o del elemento HTML están en la línea «hereda de».

ToggleGroup

Hereda las props de ToggleGroup.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—

ToggleGroupItem

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—

Teclado

← →: Se mueve entre ítems.
Espacio · Enter: Alterna el ítem.
Tab: Entra y sale del grupo entero.

Accesibilidad

El grupo necesita aria-label: «Alineación», «Vista».
En modo único es un RadioGroup visualmente distinto; si la lista es larga, usá RadioGroup de verdad.

Reglas de uso

Hasta 4 o 5 ítems: es una barra, no un menú.
Íconos solos únicamente si son universales (alineación, vista); si no, texto.

Relacionados

Toggle RadioGroup Tabs