Skip to contents

Toggle Group

Provides a shared state to a series of toggle buttons.

View as Markdown View source

Anatomy

Import the component and use it as a single part:

Anatomy

Examples

Multiple

Add the multiple prop to allow pressing more than one toggle at a time.

API reference

value readonly string[] []
Name
value
Description

Values of the pressed toggles. Use bind:value to share the array with the parent. A value passed without bind: holds until the parent changes it.

Type
readonly string[]
Default
[]
Binding
bind:value
disabled boolean | null false
Name
disabled
Description

Whether the group should ignore user interaction.

Type
boolean | null
Default
false
orientation ToggleGroupOrientation 'horizontal'
Name
orientation
Type
ToggleGroupOrientation
Default
'horizontal'
loopFocus boolean true
Name
loopFocus
Description

Whether arrow keys wrap from the last item to the first.

Type
boolean
Default
true
multiple boolean false
Name
multiple
Description

When false, pressing one toggle releases the others. When true, each toggle changes on its own.

Type
boolean
Default
false
onValueChange function —
Name
onValueChange
Description

Called before the pressed values change. Call eventDetails.cancel() to veto it.

Type
(value: string[], eventDetails: ToggleGroupChangeEventDetails) => void
render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ToggleGroupState, children: Snippet | undefined]> —
Name
render
Description

Replace the default <div>. Spread props onto the host element.

Type
Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ToggleGroupState, children: Snippet | undefined]>
disabled boolean
Name
disabled
Description

Whether the group should ignore user interaction.

Type
boolean
multiple boolean
Name
multiple
Description

When false, only one toggle in the group can be pressed. When true, several can be pressed together.

Type
boolean
orientation ToggleGroupOrientation
Name
orientation
Description

The orientation of the toggle group.

Type
ToggleGroupOrientation
data-orientation
Indicates the orientation of the toggle group.
data-disabled
Present when the toggle group is disabled.
data-multiple
Present when the toggle group allows multiple buttons to be in the pressed state at the same time.