gh-vuer-ai-vuer-skill-marketplace-skills-vuer-uikit/docs/components/toggle-group.md

1. Home
2. Components
3. Toggle Group

Toggle Group

A set of two-state buttons that can be toggled on or off. Toggle buttons share outer rounded corners with sharp inner corners, creating a seamless single-button appearance.

DocsAPI Reference## Props

ToggleGroup

Prop	Type	Default	Description
etype	'single'	'multiple'	'single'
variant	'primary'	'secondary'	'ghost'
size	'sm'	'base'	'lg'
...Radix props	ComponentProps	-	All Radix group props

ToggleGroupItem

Prop	Type	Default	Description
inherits	variant, size from group	-	Styling context from parent
...Radix props	ComponentProps	-	All Radix item props

Multiple buttons can be active at once with etype="multiple".

Variants

Primary (Default)

1 2 3 Selected: option-1

<ToggleGroup variant="primary" type="multiple" size="sm">
  <ToggleGroupItem value="option-1">1</ToggleGroupItem>
  <ToggleGroupItem value="option-2">2</ToggleGroupItem>
  <ToggleGroupItem value="option-3">3</ToggleGroupItem>
</ToggleGroup>

Secondary

1 2 3 Selected: option-1

<ToggleGroup variant="secondary" type="multiple" size="sm">
  <ToggleGroupItem value="option-1">1</ToggleGroupItem>
  <ToggleGroupItem value="option-2">2</ToggleGroupItem>
  <ToggleGroupItem value="option-3">3</ToggleGroupItem>
</ToggleGroup>

Ghost

1 2 3 Selected: option-1

<ToggleGroup variant="ghost" type="multiple" size="sm">
  <ToggleGroupItem value="option-1">1</ToggleGroupItem>
  <ToggleGroupItem value="option-2">2</ToggleGroupItem>
  <ToggleGroupItem value="option-3">3</ToggleGroupItem>
</ToggleGroup>

Single Selection

Selected: center

const [value, setValue] = useState("center");

<ToggleGroup variant="primary" type="single" size="sm" value={value} onValueChange={setValue}>
  <ToggleGroupItem value="left"><AlignLeft className="size-3" /></ToggleGroupItem>
  <ToggleGroupItem value="center"><AlignCenter className="size-3" /></ToggleGroupItem>
  <ToggleGroupItem value="right"><AlignRight className="size-3" /></ToggleGroupItem>
  <ToggleGroupItem value="justify"><AlignJustify className="size-3" /></ToggleGroupItem>
</ToggleGroup>

Only one button can be active at a time with etype="single".

With Icons

Selected: list

const [value, setValue] = useState(["view-1"]);

<ToggleGroup variant="primary" type="multiple" size="sm" value={value} onValueChange={setValue}>
  <ToggleGroupItem value="list"><List className="size-3" /></ToggleGroupItem>
  <ToggleGroupItem value="grid"><Grid className="size-3" /></ToggleGroupItem>
  <ToggleGroupItem value="folder"><Folder className="size-3" /></ToggleGroupItem>
</ToggleGroup>

Toggle group with icon content.

Disabled State

1 2 3 Selected: None

<ToggleGroup variant="primary" type="multiple" size="sm">
  <ToggleGroupItem value="option-1">1</ToggleGroupItem>
  <ToggleGroupItem value="option-2" disabled>2</ToggleGroupItem>
  <ToggleGroupItem value="option-3">3</ToggleGroupItem>
</ToggleGroup>