Switch
A checkbox with the switch role.
The server echoes the state.
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 switchUsage
{% import "suprnova-ui/switch/switch.html" as switch %}
{% call switch::switch("newsletter", "Send me the newsletter", checked=newsletter) %}{% endcall %}Examples
Settings
Three switches; the server sums up what is on.
Keyboard and accessibility
suprnova.switch - a checkbox with the switch role for a real binary setting (Live spec 21, choice and toggle); the base layer draws it. checked is the island's current value (FORM-009), and authority marks a server correction (Live spec 12).
API reference
switch
| Parameter | Default | Description |
|---|---|---|
name | Required | The `bool` model field. |
label | Required | The text beside the switch. |
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. |