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.
Switch.Root
Represents the switch itself. Renders a <span> element and a hidden <input> beside.
Props
defaultChecked boolean false
- Name
defaultChecked- Description
Uncontrolled initial checked state.
- Type
boolean- Default
false
onCheckedChange function —
- Name
onCheckedChange- Description
Event handler called when the checked state changes.
- Type
((checked: boolean, event: Event) => void) | undefined
disabled boolean false
- Name
disabled- Description
Whether the control ignores user interaction.
- Type
boolean- Default
false
required boolean false
- Name
required- Description
Whether the user must activate the switch before submitting a form.
- Type
boolean- Default
false
Data attributes
| Attribute | Description |
|---|---|
data-checked | Present when the switch is checked. |
data-disabled | Present when the switch is disabled. |
data-unchecked | Present when the switch is not checked. |
Switch.Thumb
The movable part of the switch that indicates whether the switch is on or off. Renders a <span>.
Props
Data attributes
| Attribute | Description |
|---|---|
data-checked | Present when the switch is checked. |
data-disabled | Present when the switch is disabled. |
data-unchecked | Present when the switch is not checked. |