Field
A label, the control, a hint and the field's error output around one model field.
A field with a hint; the server saves what you type.
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 fieldUsage
{% import "suprnova-ui/field/field.html" as field %}
{% call field::field("email", "Email", hint="We never share it.") %}{% call input::input("email", kind="email", value=email) %}{% endcall %}{% endcall %}Examples
Server validation
The server validates the address on submit, and the field shows its error.
Keyboard and accessibility
suprnova.field - label, control, hint and error around one model path. The caller renders the control; it must carry id="{{ name }}" and, when it wants the hint and error announced, aria-describedby="{{ name }}-hint {{ name }}-error". The error output is polite live text bound to the field's validation state (live:error).
API reference
field
| Parameter | Default | Description |
|---|---|---|
name | Required | The model field the control binds. The control carries this `id`; the hint and error elements take theirs from it. |
label | Required | The label text. |
hint | "" | Help text under the control, announced with it through `aria-describedby`. |
required | false | Adds the required mark to the label. Mark the control `required` too. |