Toggle Group

Ready

A set of two-state buttons that can be toggled on or off

Interactive Preview

Single selection toggle group

Single Selection

Only one item can be active at a time

Selected: left

Multiple Selection

Multiple items can be active at the same time

Selected: bold

Variants

Toggle Group comes in two visual variants

Default

Outline

Sizes

Three size options: small, medium, and large

Small

Medium

Large

Usage

How to use the Toggle Group component

// Single selection
<ToggleGroup type="single" defaultValue="left">
<ToggleGroupItem value="left">Left</ToggleGroupItem>
<ToggleGroupItem value="center">Center</ToggleGroupItem>
<ToggleGroupItem value="right">Right</ToggleGroupItem>
</ToggleGroup>
// Multiple selection
<ToggleGroup type="multiple" defaultValue={["bold"]}
<ToggleGroupItem value="bold">Bold</ToggleGroupItem>
<ToggleGroupItem value="italic">Italic</ToggleGroupItem>
</ToggleGroup>

API Reference

ToggleGroup Props

type-"single" | "multiple"
variant-"default" | "outline"
size-"sm" | "md" | "lg"
value-string | string[] (controlled)
defaultValue-string | string[] (uncontrolled)
onValueChange-(value: string | string[]) => void

ToggleGroupItem Props

value-string (required)