Toggle Group

A group of toggle buttons where one or multiple can be active. Built on Radix UI with CVA variants.

Variants

Sizes

Multiple Selection

Installation

npx visor add toggle-group

This copies two files into your project:

components/ui/toggle-group/toggle-group.tsx — the component
components/ui/toggle-group/toggle-group.module.css — the styles

Usage

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

<ToggleGroup type="single">
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
</ToggleGroup>

API Reference

ToggleGroupProps

Prop	Type	Default	Description
`type`*	`'single' \| 'multiple'`	—	Whether one or multiple items can be active at once.
`variant`	`'default' \| 'outline'`	`'default'`	Visual style variant of the toggle group.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Size of the toggle items.
`value`	`string \| string[]`	—	Controlled active value(s).
`onValueChange`	`(value: string \| string[]) => void`	—	Callback when the active value changes.

Sub-components

Component	Element	Purpose
`ToggleGroup`	`<div>`	Root group container with variant/size context and optional sliding indicator
`ToggleGroupItem`	`<button>`	Individual toggle button inheriting variant and size from the group

Accessibility

Built on @radix-ui/react-toggle-group with full WAI-ARIA toolbar semantics
The group renders with role="group"; each item renders with role="radio" (single) or role="checkbox" (multiple)
Active items have aria-pressed="true" (or aria-checked depending on type)
Provide an aria-label on <ToggleGroup> to describe the purpose of the group (e.g., "Text formatting", "View mode")
Keyboard: Arrow keys navigate between items within the group; Space/Enter toggles the focused item

Toggle Group

On this page