Skip to main content
Checkboxes let users select one or more options from a set.

​
Basic Usage

​
Checked State

​
Multiple Checkboxes

​
With Actions

The on_change parameter runs actions when the checkbox is toggled. $event is true when checked, false when unchecked:

​
With Disabled State

​
Reading the Value

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

​
API Reference

Checkbox Parameters

​
label
str | None
default:"None"
Label text displayed next to the checkbox.
​
value
bool
default:"False"
Whether the checkbox is initially checked.
​
name
str | None
default:"None"
State key for the checkbox’s checked state. Auto-generated if not provided. Use .rx to reference the checkbox’s boolean value in other components.
​
disabled
bool
default:"False"
Whether the checkbox is non-interactive.
​
required
bool
default:"False"
Whether the checkbox is required for form submission.
​
on_change
Action | list[Action] | None
default:"None"
Action(s) to execute when toggled. $event is true when checked, false when unchecked.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes appended to the component’s built-in styles.

​
Protocol Reference

Checkbox
{
  "type": "Checkbox",
  "name?": "string",
  "label?": "string",
  "value?": false,
  "disabled?": false,
  "required?": false,
  "onChange?": "Action | Action[]",
  "cssClass?": "string"
}
For the complete protocol schema, see Checkbox.