kt-number-input

A number field with − and + beside it: a quantity, a seat count, an amount.

Typing and stepping

Type a number the way your language writes one — 1 234,5 in French, 1,234.5 in English — or step it:

The − and + buttons step too, and grey out at the bounds. They stay out of the tab order: the arrows already do their work from the field.

What is typed is read when the field is left, or on Enter, and kept within min and max and on step. Text that is no number puts back the value the field had; an emptied field holds null.

Reading at rest

While the field has the focus it shows the plain number, easy to edit. At rest it reads the way the locale writes it, through formatOptions — any Intl.NumberFormat option: a currency, a percentage, a unit, a number of decimals. A screen reader hears that text as the value.

In a form

A form control: it submits the number under name, and nothing while empty. required blocks submission while it is empty, error shows a message, and form.reset() puts back the first value.

API

Accessibility

The field is a spinbutton with its bounds, its value and the text it shows; error is announced with it.