Toggle Group

Grupo de toggles single/multiple.

Ações e indicadores

Carregando demonstração…

Código da demo

"use client";

import * as React from "react";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon, CalendarDaysIcon, ListIcon } from "lucide-react";

export function Demo() {
  const [view, setView] = React.useState("lista");
  return (
    <div className="flex flex-col items-start gap-fe-4">
      <ToggleGroup type="single" defaultValue="left" variant="outline">
        <ToggleGroupItem value="left" aria-label="Alinhar à esquerda">
          <AlignLeftIcon />
        </ToggleGroupItem>
        <ToggleGroupItem value="center" aria-label="Centralizar">
          <AlignCenterIcon />
        </ToggleGroupItem>
        <ToggleGroupItem value="right" aria-label="Alinhar à direita">
          <AlignRightIcon />
        </ToggleGroupItem>
      </ToggleGroup>

      <ToggleGroup
        type="single"
        variant="segmented"
        value={view}
        onValueChange={setView}
        aria-label="Modo de visualização"
      >
        <ToggleGroupItem value="lista">
          <ListIcon />
          Lista
        </ToggleGroupItem>
        <ToggleGroupItem value="semana">
          <CalendarDaysIcon />
          Semana
        </ToggleGroupItem>
        <ToggleGroupItem value="mes">Mês</ToggleGroupItem>
      </ToggleGroup>
    </div>
  );
}

Use

variant segmented para alternar a visão de um mesmo conteúdo.
type single no segmentado: sempre uma opção ativa.
Rótulo curto; ícone opcional ao lado do texto.

Não use

Não use segmentado para trocar de página: use Tabs.
Não passe de quatro opções: use Select.
Não recrie o segmentado localmente: use esta variante.

Acessibilidade: role=group; cada item com label.
Importar: import { ToggleGroup, ToggleGroupItem } from "@financeequity/ui/toggle-group"
Neste repositório:
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
Dependências: radix-ui