Select
A native select bound to one value.
The server names the chosen country's capital.
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 selectUsage
{% import "suprnova-ui/select/select.html" as select %}
{% call select::select("country", countries, placeholder="Choose a country", selected=country) %}{% endcall %}Examples
Dependent options
The server narrows the city list to the chosen country.
Keyboard and accessibility
suprnova.select - a native select over (value, label) pairs bound to one model path; an empty placeholder option keeps "nothing chosen" explicit. selected is the island's current value, whose option renders selected (FORM-009), and authority marks a server correction (Live spec 12).
API reference
select
| Parameter | Default | Description |
|---|---|---|
name | Required | The `String` model field the select binds; also its `id` and `name`. |
options | Required | `(value, label)` pairs, one option each. |
placeholder | "" | An empty first option with this text; empty for none. |
required | false | Marks the control required. |
selected | "" | 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. |