AccentBaseRadiusMode

Label

A label for a control you render yourself, with an optional required mark.

A label for a plain input; the server echoes the value.

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

bash

suprnova live:add label

Usage

html

{% import "suprnova-ui/label/label.html" as label %}
{% call label::label("nickname", "Nickname") %}{% endcall %}
<input class="sn-input" id="nickname" name="nickname" value="{{ nickname }}" live:model="nickname">

Examples

Required

The required mark is visual; the control itself carries `required`.

Open in new tab

Keyboard and accessibility

suprnova.label - a programmatic label for one control (FORM-002). for_id names the control; required marks the visual asterisk only, the control itself carries the required attribute.

API reference

`label`

Parameter	Default	Description
`for_id`	Required	The `id` of the control the label names.
`text`	Required	The label text.
`required`	`false`	Adds the required mark, hidden from assistive technology.