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

​
Basic Usage

​
Checked State

​
Sizes

Switches come in two sizes:

​
Disabled State

​
API Reference

Switch Parameters

​
label
str | None
default:"None"
Label text displayed next to the switch.
​
checked
bool
default:"False"
Whether the switch is on.
​
size
str
default:"default"
Switch size: "default", "sm".
​
name
str | None
default:"None"
Form field name for submission.
​
disabled
bool
default:"False"
Whether the switch is non-interactive.
​
required
bool
default:"False"
Whether a selection is required for form submission.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes appended to the component’s built-in styles.

​
Protocol Reference

Switch
{
  "type": "Switch",
  "label?": "string",
  "checked?": false,
  "size?": "sm | default",
  "name?": "string",
  "disabled?": false,
  "required?": false,
  "onChange?": "Action | Action[]",
  "cssClass?": "string"
}
For the complete protocol schema, see Switch.