Skip to contents

Toggle

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

View as Markdown View source

Anatomy

Import the component and use it as a single part:

Anatomy

API reference

pressed boolean false
Name
pressed
Description

Whether the toggle is pressed. Use bind:pressed to share it with the parent. A value passed without bind: holds until the parent changes it. Inside a group, the group value wins.

Type
boolean
Default
false
Binding
bind:pressed
disabled boolean | null false
Name
disabled
Description

Whether the toggle should ignore user interaction.

Type
boolean | null
Default
false
value string —
Name
value
Description

Identifies this toggle inside a ToggleGroup. An empty string is treated as omitted and replaced with a generated id.

Type
string
nativeButton boolean true
Name
nativeButton
Description

Whether the host is a native <button>. Set false when render supplies a non-button element.

Type
boolean
Default
true
onPressedChange function —
Name
onPressedChange
Description

Called before the pressed state changes. Call eventDetails.cancel() to veto it.

Type
(pressed: boolean, eventDetails: ToggleChangeEventDetails) => void
onclick MouseEventHandler<HTMLButtonElement> | null —
Name
onclick
Description

Runs before the Toggle's handler. Call event.preventDefault() to skip it.

Type
MouseEventHandler<HTMLButtonElement> | null
render Snippet<[props: ToggleHostProps, state: ToggleState, children: Snippet | undefined]> —
Name
render
Description

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

Type
Snippet<[props: ToggleHostProps, state: ToggleState, children: Snippet | undefined]>
pressed boolean
Name
pressed
Description

Whether the toggle is currently pressed.

Type
boolean
disabled boolean
Name
disabled
Description

Whether the toggle should ignore user interaction.

Type
boolean
data-pressed
Present when the toggle button is pressed.
data-disabled
Present when the toggle button is disabled.