Checkbox
A single checkbox, and a group of checkboxes bound to a list.
The server echoes whether the box is checked.
Each preview is its own Live page in a frame, because this site is a Vue 3.5 app built on the Pulsar starter kit. An open list or popover stays inside its frame; in your application it opens over the page.
Installation
suprnova live:add checkboxUsage
{% import "suprnova-ui/checkbox/checkbox.html" as checkbox %}
{% call checkbox::checkbox("agree", "I agree to the terms", checked=agree) %}{% endcall %}Examples
Group
A group bound to a list; the server names the choices.
Keyboard and accessibility
suprnova.checkbox - one native checkbox with its label; checked is the island's current value (FORM-009). checkbox_group renders a fieldset of checkboxes over (value, label) pairs bound to a collection model path: selected is the island's current list, whose boxes render checked, and the runtime proposes the list of checked values (LIVE-032), whatever the number of options, because each box carries data-suprnova-live-collection. Each box is keyed by its value, so a choice the user has not sent survives a re-render of the island (FORM-010). authority marks a server correction (Live spec 12).
API reference
checkbox
| Parameter | Default | Description |
|---|---|---|
name | Required | The `bool` model field. |
label | Required | The text beside the box. |
required | false | Marks the control required. |
checked | false | The island's current value of the field, so the control shows it. |
authority | "" | A correction sequence. When set, this render replaces the visitor's unsent edit. |
checkbox_group
| Parameter | Default | Description |
|---|---|---|
name | Required | The `Vec<String>` model field. |
legend | Required | The group's legend. |
options | Required | `(value, label)` pairs, one checkbox each. |
selected | Required | The island's current list, so the chosen boxes show checked. |
authority | "" | A correction sequence. When set, this render replaces the visitor's unsent edit. |