Skip to main content
Switches provide a visual toggle for binary states, offering an alternative to checkboxes.

​
Basic Usage

​
Checked State

Pass value=True to render the switch in its on position from the start. Use this to reflect a setting that already defaults to enabled, so the control matches the state of the system the moment it appears.

​
Sizes

Switches come in two sizes:

​
With Actions

The on_change parameter runs actions when the switch is toggled. The $event variable is true when switched on, false when off. Here, toggling the switch updates a separate status message:

​
Disabled State

Set disabled=True to show a switch whose state is fixed and can’t be toggled. This communicates that a setting is locked by something else — a plan tier, a permission, or another toggle — while still letting the user see whether it’s currently on or off.

​
Reading the Value

Use .rx to get a reactive reference to the switch’s boolean state. The .then() pipe converts true/false into display-friendly strings: Toggle the switch and the input updates to reflect the current state.

​
API Reference

Switch Parameters

​
str | None
default:"None"
Label text displayed next to the switch.
​
bool
default:"False"
Whether the switch is on.
​
str
default:"default"
Switch size: "default", "sm".
​
str | None
default:"None"
State key for the switch’s checked state. Auto-generated if not provided. Use .rx to reference the switch’s boolean state in other components without specifying the name explicitly.
​
bool
default:"False"
Whether the switch is non-interactive.
​
bool
default:"False"
Whether a selection is required for form submission.
​
Action | list[Action] | None
default:"None"
Action(s) to execute when toggled. $event is true when on, false when off.
​
str | None
default:"None"
Additional Tailwind CSS classes appended to the component’s built-in styles.

​
Protocol Reference

Switch
For the complete protocol schema, see Switch.