v0.5.1

Toggle Group

A set of two or more toggle buttons that allows users to choose one option from a group.

Installation

npx paubha@latest add toggle-group

Usage

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

<ToggleGroup defaultValue="day">
  <ToggleGroupItem value="day">Day</ToggleGroupItem>
  <ToggleGroupItem value="week">Week</ToggleGroupItem>
  <ToggleGroupItem value="month">Month</ToggleGroupItem>
</ToggleGroup>

Examples

Sizes

Disabled item

API reference

ToggleGroup

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	Item size, propagated to every ToggleGroupItem via context.
defaultValue	string	—	Uncontrolled initial selected value.
value	string	—	Controlled selected value, pair with onValueChange.
onValueChange	(value: string) => void	—	Called when the selected item changes.

ToggleGroupItem

Prop	Type	Default	Description
value	string	—	Unique identifier for this item.
size	"sm" \| "md" \| "lg"	—	Overrides the size inherited from the parent ToggleGroup.
disabled	boolean	false	Prevents selecting this item.

Accessibility

Roles. Built on Radix RadioGroup underneath, so it gets the exact contract a segmented control needs: role="radiogroup" on the group, role="radio" with aria-checked on each item.
Keyboard. Arrow keys move between items; the newly-focused item is selected automatically (standard radio-group behavior).
Disabled items. Rendered as a native disabled button.
Focus ring. Visible on Tab via shadow-glow-focus.

When to use

Use as a segmented control for 2–4 mutually exclusive choices: view modes, time ranges, filter categories. Acts like styled radio buttons.

Do:

Keep to 2–4 options
Use short labels
Make the active state visually clear

Don't:

Use for more than 4 options, use Select or Tabs instead
Mix with other form controls
Use for triggering actions, use Button instead

Tabs: for switching content views
Radio Group: for form-style selection
Button: for triggering actions

Slider

A range input control for selecting a numeric value within a defined range.

Progress Circle

Circular progress indicator showing completion percentage.

Toggle Group

On this page