Visão geral

ToggleGroup gerencia o estado de múltiplos Toggles com seleção single ou multiple.

Single (exclusivo)

Multiple (cumulativo)

Import

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

Padrão de implementação

Snippets para uso do ToggleGroup.

Seleção de visualização (single)

"use client"
import { useState } from "react"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

export function ViewToggle() {
  const [view, setView] = useState("grid")

  return (
    <ToggleGroup type="single" value={view} onValueChange={(v) => v && setView(v)}>
      <ToggleGroupItem value="list">Lista</ToggleGroupItem>
      <ToggleGroupItem value="grid">Grade</ToggleGroupItem>
    </ToggleGroup>
  )
}

Filtros de formatação (multiple)

const [formatos, setFormatos] = useState<string[]>(["bold"])

<ToggleGroup
  type="multiple"
  value={formatos}
  onValueChange={setFormatos}
>
  <ToggleGroupItem value="bold" aria-label="Negrito">B</ToggleGroupItem>
  <ToggleGroupItem value="italic" aria-label="Itálico">I</ToggleGroupItem>
  <ToggleGroupItem value="underline" aria-label="Sublinhado">U</ToggleGroupItem>
</ToggleGroup>

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter