Forms & Inputs
Number Input
A numeric field with its own increment and decrement controls, bounded by min, max and step.
A numeric field with its own stepper buttons. The value is held as text while you type, so a half-entered number survives; it is clamped and rounded once the field is left.
Preview
Section titled “Preview”<nana-number-input
label="Quantity"
value="1"
min="0"
max="10"
></nana-number-input>Installation
Section titled “Installation”npm install @nana-tec/ui-componentsimport "@nana-tec/ui-components/number-input";Bounds
Section titled “Bounds”min and max close the range. The button that would do nothing is disabled
rather than silently ignored, so the limit is visible before it is hit.
<nana-number-input label="Guests" value="2" min="1" max="4"></nana-number-input>Step and precision
Section titled “Step and precision”step sets how far one move travels. Decimal steps keep their precision rather
than drifting — stepping 0.1 by 0.2 lands on 0.3, not 0.30000000000000004.
<nana-number-input label="Rate" value="0.1" step="0.2"></nana-number-input>Set precision to fix the number of decimal places kept when stepping and on
blur.
Tidying on blur
Section titled “Tidying on blur”Typing is left alone until focus leaves. Enter 42 into a field capped at 10
and it stays 42 while you are in it, then settles to 10. Text that is not a
number is cleared the same way.
<nana-number-input
label="Capped at 10"
max="10"
helper="Type 42, then click away"
></nana-number-input>Keyboard
Section titled “Keyboard”| Key | Result |
|---|---|
| ↑ | One step up |
| ↓ | One step down |
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
disabled | disabled | boolean | false | |
helper | helper | string | '' | Line under the field. |
label | label | string | '' | Visible label. |
max | max | number | undefined | — | Largest accepted value. |
min | min | number | undefined | — | Smallest accepted value. |
name | name | string | '' | |
placeholder | placeholder | string | '' | |
precision | precision | number | undefined | — | Decimal places kept when stepping and on blur. |
readonly | readonly | boolean | false | |
required | required | boolean | false | |
step | step | number | 1 | How far one step moves. |
value | value | string | '' | The field's text, so a partially typed number is not thrown away. |
Events
| Event | Description |
|---|---|
nana-input | While typing; detail: { value: number | undefined } |
nana-change | Once the value settles; detail: { value: number | undefined } |
CSS parts
| Part | Description |
|---|---|
::part(base) | The field wrapper |
::part(input) | The text field |
::part(decrement) | The decrement button |
::part(increment) | The increment button |
::part(label) | The field label |
::part(helper) | The helper or error line |
CSS custom properties
| Property | Description |
|---|---|
--nana-number-input-bg | Field background |
--nana-number-input-color | Field text colour |
--nana-number-input-radius | Corner radius |
--nana-number-input-border-color | Border colour |
--nana-number-input-height | Field height |
--nana-number-input-button-width | Width of each stepper button |
Events
Section titled “Events”| Event | Type | Description |
|---|---|---|
nana-input | CustomEvent | While typing; detail.value is the number, or undefined. |
nana-change | CustomEvent | Once the value settles; detail.value is the number, or undefined. |
Accessibility
Section titled “Accessibility”The field is a spinbutton carrying aria-valuenow, aria-valuemin and
aria-valuemax. The stepper buttons are labelled and kept out of the tab order,
so a keyboard reaches the value directly and moves it with the arrow keys.