toggle group
A set of two-state buttons that can be toggled on or off.
Installation
npx duck-ui@latest add toggle-group
npx duck-ui@latest add toggle-group
Usage
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
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>
<ToggleGroup type="single">
<ToggleGroupItem value="a">A</ToggleGroupItem>
<ToggleGroupItem value="b">B</ToggleGroupItem>
<ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>
Examples
Default
Outline
Single
Small
Large
Disabled
API Reference
ToggleGroup
variant
(string
, optional, default:'default'
): Visual style variant for the toggles (passed down to items).size
(string
, optional): Size variant for the toggles (passed down to items).type
('single' | 'multiple'
, optional): Determines selection behavior.'single'
allows only one toggle selected at a time;'multiple'
allows multiple toggles selected.onValueChange
((value: string) => void
, optional): Callback invoked when a toggle item is selected or deselected....props
(React.HTMLProps<HTMLUListElement>
): Additional native props forwarded to the root<ul>
element.
Behavior:
Renders a group of toggle items as a flex container. Manages internal refs for all toggle items and tracks selected toggles depending on the type
(single
or multiple
). Selection state is synchronized via ARIA attributes and the native checked
property on underlying inputs. The onValueChange
callback is called with the value of the selected toggle(s). Supports variant
and size
styling passed down to child toggles.
ToggleGroupItem
variant
(string
, optional): Visual style variant for the toggle item.size
(string
, optional): Size variant for the toggle item.value
(string
, required): The unique value identifying this toggle item....props
(React.ComponentProps<typeof Toggle.Toggle>
): Additional props forwarded to the internalToggle.Toggle
component.
Behavior:
Represents an individual toggle item inside a ToggleGroup
. Receives style and behavior context from the parent group via React context. The item updates the group's selection state on interaction and synchronizes its own checked state and ARIA attributes accordingly. The duck-toggle-group-item
attribute is added for targeting.