Docs

Toggle Group

Toggle Group

A set of two-state buttons that can be toggled on (pressed) or off (not pressed).

Docs API Reference

Installation

npx shadcn-solid@latest add toggle-group

Usage

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

<ToggleGroup>
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
  <ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>

Examples

Outline

Single

Small

Large

Disabled