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

A two-state button that can be on or off. Renders a <button> element.

Props

pressed boolean —

Name: pressed
Description: Controlled pressed state.
Type: boolean | undefined

defaultPressed boolean false

Name: defaultPressed
Description: Uncontrolled initial pressed state.
Type: boolean
Default: false

onPressedChange function —

Name: onPressedChange
Description: Event handler called when the pressed state changes.
Type: ((pressed: boolean, event: Event) => void) | undefined

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

value string —

Name: value
Description: Controlled value.
Type: string | undefined

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet<[{ pressed: boolean; disabled: boolean }]>

Data attributes

Attribute	Description
`data-disabled`	Present when the toggle button is disabled.
`data-pressed`	Present when the toggle button is pressed.

ToggleGroup

Extends div HTML attributes.

Props

value string —

Name: value
Description: Controlled value.
Type: string[] | undefined

defaultValue string —

Name: defaultValue
Description: Uncontrolled initial value.
Type: string[]

onValueChange function —

Name: onValueChange
Description: Event handler called when the value changes.
Type: ((value: string[], event: Event) => void) | undefined

multiple boolean —

Name: multiple
Description: —
Type: boolean

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

orientation ToggleGroupOrientation 'horizontal'

Name: orientation
Description: —
Type: ToggleGroupOrientation
Default: 'horizontal'

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet<[{ value: string[]; disabled: boolean }]>

Data attributes

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