Toggle Group

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

Anatomy

To set up the toggle group correctly, you’ll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the ToggleGroup component in your project. Let’s take a look at the most basic example:

Multiple Selection

Demonstrates how to enable multiple selection within the group.

Initial Value

Shows how to set an initial value in the toggle group.

API Reference

Item

PropTypeDefault
value
string
asChild
boolean
disabled
boolean

Root

PropTypeDefault
asChild
boolean
defaultValue
string[]
dir
'ltr' | 'rtl'"ltr"
disabled
boolean
getRootNode
() => ShadowRoot | Node | Document
id
string
ids
Partial<{ root: string; toggle(value: string): string }>
loop
boolean
multiple
boolean
onValueChange
(details: ValueChangeDetails) => void
orientation
Orientation
rovingFocus
boolean
value
string[]

Previous

Toast