Command Menu

Search documentation, components, and switch theme.

Atoms

Toggle Group

A group of toggle buttons.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/toggle-group

Install the following dependencies:

npm install class-variance-authority radix-ui

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
<ToggleGroup type="multiple">
  <ToggleGroupItem value="bold" aria-label="Toggle bold">
    <Bold className="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="italic" aria-label="Toggle italic">
    <Italic className="size-4" />
  </ToggleGroupItem>
</ToggleGroup>

Examples#

Default#

Outline#

Single#

Small#

Large#

Disabled#