Basic Usage
Checked State
Passvalue=True to render a checkbox already ticked. Use this for options that should be opted in by default, like a newsletter subscription the user can clear if they’d rather not.
Multiple Checkboxes
Each checkbox binds to its own independent state key, so toggling one never affects the others. Reach for a set of checkboxes when the choices are not mutually exclusive and any combination is valid — unlike a grouped Radio, where selecting one option clears the rest.With Actions
Theon_change parameter runs actions when the checkbox is toggled. $event is true when checked, false when unchecked:
With Disabled State
Setdisabled=True to show an option that can’t be changed right now while still keeping its checked or unchecked value visible. This is the right state for a choice that’s locked by a permission or a prerequisite the user hasn’t met yet.
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
str | None
default:"None"
Label text displayed next to the checkbox.
bool
default:"False"
Whether the checkbox is initially checked.
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.bool
default:"False"
Whether the checkbox is non-interactive.
bool
default:"False"
Whether the checkbox is required for form submission.
Action | list[Action] | None
default:"None"
Action(s) to execute when toggled.
$event is true when checked, false when unchecked.str | None
default:"None"
Additional Tailwind CSS classes appended to the component’s built-in styles.
Protocol Reference
Checkbox