Docs/ToggleGroup

ToggleGroup

A group of toggles for single or multi selection, like a segmented control.

Usage

tsx

1import { ToggleGroup, ToggleGroupItem } from '@storm-ds/ui'
2
3<ToggleGroup>
4  <ToggleGroupItem active>Option A</ToggleGroupItem>
5  <ToggleGroupItem>Option B</ToggleGroupItem>
6  <ToggleGroupItem>Option C</ToggleGroupItem>
7</ToggleGroup>

Default

tsx

1<ToggleGroup>
2  <ToggleGroupItem active>Left</ToggleGroupItem>
3  <ToggleGroupItem>Center</ToggleGroupItem>
4  <ToggleGroupItem>Right</ToggleGroupItem>
5</ToggleGroup>

Outline

tsx

1<ToggleGroup variant="outline">
2  <ToggleGroupItem active>Day</ToggleGroupItem>
3  <ToggleGroupItem>Week</ToggleGroupItem>
4  <ToggleGroupItem>Month</ToggleGroupItem>
5</ToggleGroup>

Sizes

tsx

1<ToggleGroup>
2  <ToggleGroupItem active size="sm">Sm</ToggleGroupItem>
3  <ToggleGroupItem size="sm">Sm</ToggleGroupItem>
4</ToggleGroup>
5<ToggleGroup>
6  <ToggleGroupItem active size="md">Md</ToggleGroupItem>
7  <ToggleGroupItem size="md">Md</ToggleGroupItem>
8</ToggleGroup>
9<ToggleGroup>
10  <ToggleGroupItem active size="lg">Lg</ToggleGroupItem>
11  <ToggleGroupItem size="lg">Lg</ToggleGroupItem>
12</ToggleGroup>

Props

Prop	Type	Default	Description
variant	'default' \| 'outline'	'default'	Group style
size	'sm' \| 'md' \| 'lg'	'md'	Items size
className	string	-	Custom classes

Use with AI

Create a Next.js component using Storm UI's ToggleGroup. Import: `import { ToggleGroup, ToggleGroupItem } from '@storm-ds/ui'`. Use `active` prop on items. Variants: default (gap), outline (bordered container). Sizes: sm, md, lg. Server component compatible. Example: `<ToggleGroup variant="outline"><ToggleGroupItem active>Day</ToggleGroupItem><ToggleGroupItem>Week</ToggleGroupItem></ToggleGroup>`

Toggle

Combobox