ToggleGroup

A segmented group of toggle buttons where one item (single mode) or many items (multiple mode) can be active at once.

Installation

npx dafink-ui add toggle-group

Demo

Composition

</ToggleGroup>

Props

Name	Type	Default	Description
type	"single" \| "multiple"	-	Controls whether one or many items can be active at once.
value	string \| string[]	-	Controlled value. String for single mode, string[] for multiple.
onValueChange	(value: string \| string[]) => void	-	Called with the new value when selection changes.
size	"sm" \| "md" \| "lg"	"md"	Controls height and padding of all items.
disabled	boolean	false	Disables all items in the group.

Accessibility

ToggleGroup uses roving tabindex: only the active or last-focused item sits in the page's Tab order, so Tab moves focus into and out of the whole group in a single stop rather than stepping through every item.

Key	Function
`tab`	Moves focus to the group's active item, or out to the next tabbable element if focus is already inside the group.
`shift`+`tab`	Moves focus out of the group to the previous tabbable element.
`enter`	Activates the focused item.
`space`	Activates the focused item.
`right arrow`	Moves focus to the next item, wrapping from the last item to the first.
`down arrow`	Moves focus to the next item, wrapping from the last item to the first.
`left arrow`	Moves focus to the previous item, wrapping from the first item to the last.
`up arrow`	Moves focus to the previous item, wrapping from the first item to the last.
`home`	Moves focus to the first enabled item.
`end`	Moves focus to the last enabled item.