AccentBaseRadiusMode

Number input

A native number input with bounds and a step.

The server prices the seats you choose. Clear the field to see its decode error.

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 number-input

Usage

html

{% import "suprnova-ui/number-input/number-input.html" as number_input %}
{% call number_input::number_input("seats", min="1", max="50", value=seats) %}{% endcall %}

Examples

Step

Steps of five from 0 to 100; the server converts the percentage.

Open in new tab

Keyboard and accessibility

suprnova.number-input - a native number input with inputmode, min, max and step declared on the control (Live spec 21, textual and numeric). value is the island's current number (FORM-009), and authority marks a server correction (Live spec 12).

API reference

`number_input`

Parameter	Default	Description
`name`	Required	The numeric model field the input binds; also its `id` and `name`.
`min`	`""`	The lowest accepted value; empty for none.
`max`	`""`	The highest accepted value; empty for none.
`step`	`"1"`	The increment the arrows and the browser's validation use.
`required`	`false`	Marks the control required.
`value`	`""`	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.