❤️ Support our project - Your donation helps us continue developing awesome tools!
Docs
Toggle Group

Toggle Group

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

DocsAPI Reference

A toggle group with three items.

Component toggle-group-demo not found in registry.

Installation

npx nyxb@latest add toggle-group

Usage

import { ToggleGroup, ToggleGroupItem } from "~/components/ui/toggle-group"
<ToggleGroup type="single">
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
  <ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>

Examples

Default

A toggle group with three items.

Component toggle-group-demo not found in registry.

Outline

A toggle group using the outline variant.

Component toggle-group-outline not found in registry.

Single

A toggle group with single selection.

Component toggle-group-single not found in registry.

Small

A toggle group using the small size.

Component toggle-group-sm not found in registry.

Large

A toggle group using the large size.

Component toggle-group-lg not found in registry.

Disabled

A disabled toggle group.

Component toggle-group-disabled not found in registry.

ToggleTooltip