Toggle

A two-state button that can be either on or off.

View as Markdown

Sizes

Toggle group

API Reference

Props mirror Base UI React where applicable, adapted for Svelte 5. Native HTML attributes for the rendered element are also accepted unless noted.

Toggle

Extends button HTML attributes.

Property	Type	Default	Description
`pressed`	`boolean \| undefined`	`—`	Controlled pressed state.
`defaultPressed`	`boolean`	`—`	Uncontrolled initial pressed state.
`onPressedChange`	`((pressed: boolean, event: Event) => void) \| undefined`	`—`	Event handler called when the pressed state changes.
`disabled`	`boolean`	`false`	Whether the control ignores user interaction.
`value`	`string \| undefined`	`—`	Controlled value.
`children`	`Snippet<[{ pressed: boolean; disabled: boolean }]>`	`—`	Content rendered inside the part.

Data attribute	Description
`data-disabled`	Present when the part is disabled.
`data-pressed`	Present when the toggle is pressed.

ToggleGroup

Extends div HTML attributes.

Property	Type	Default	Description
`value`	`string[] \| undefined`	`—`	Controlled value.
`defaultValue`	`string[]`	`—`	Uncontrolled initial value.
`onValueChange`	`((value: string[], event: Event) => void) \| undefined`	`—`	Event handler called when the value changes.
`multiple`	`boolean`	`—`	—
`disabled`	`boolean`	`false`	Whether the control ignores user interaction.
`orientation`	`ToggleGroupOrientation`	`'horizontal'`	—
`children`	`Snippet<[{ value: string[]; disabled: boolean }]>`	`—`	Content rendered inside the part.

Data attribute	Description
`data-disabled`	Present when the part is disabled.
`data-orientation`	The orientation of the component.