Number field
A number with a unit, steppers and spinbutton keys.
<mm-number-field name="timeout" label="Query timeout" unit="ms" min="100" max="30000" step="100" value="500"></mm-number-field>
Guidance
Number fields take a quantity: a retention period, a row limit, a timeout. Numbers are set in
tabular figures and right-aligned so they line up with the tables they configure. An optional
unit follows the number after a non-breaking space ("500 ms", "10,000 rows").
Keyboard follows the WAI-ARIA spinbutton pattern
(https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/): ArrowUp and ArrowDown change the value
by step, PageUp and PageDown by ten steps, Home and End jump to min and max when set. Steps
count from step-base (default 0), not from min, so min="1" step="100" gives 1, 100, 200 and
so on; min and max themselves are always valid. The
stepper buttons are labelled for assistive technology and stay out of the tab order, since the
arrow keys do the same job.
Form-associated: submits the number as text under name, validates required, min, max and
step, resets with the form and is disabled by a disabled fieldset.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
value | value | string | '' | The current value as text, as it submits. The value attribute is the default the form resets to. |
min | min | number | undefined | ||
max | max | number | undefined | ||
step | step | number | undefined | Step for the arrow keys and steppers; PageUp and PageDown move ten steps. Default 1. | |
stepBase | step-base | number | undefined | The value the step grid counts from. Default 0, so steps stay round numbers whatever min is. Unlike a native number input, min is not the base. | |
unit | unit | string | '' | Unit shown after the number, such as ms or rows. |
placeholder | placeholder | string | '' | |
readonly | readonly | boolean | false | |
noSteppers | no-steppers | boolean | false | Hides the stepper buttons; the arrow keys still work. |
valueAsNumber | number | The value as a number, or NaN when empty. | ||
label | label | string | '' | Field label. Rendered above the control unless hide-label, and always the accessible name. |
help | help | string | '' | Help text under the control. |
error | error | string | '' | Error text: a sentence saying what to fix. Shows the crimson border, an icon and sets aria-invalid. |
hideLabel | hide-label | boolean | false | Hides the label visually; it stays the accessible name. |
optional | optional | boolean | false | Marks the field as optional, in words. |
name | name | string | '' | Name submitted with the form. |
disabled | disabled | boolean | false | Disables the control and excludes it from submission. |
required | required | boolean | false | Requires a value before the form submits. |
form | HTMLFormElement | null | |||
validity | ValidityState | |||
validationMessage | string | |||
willValidate | boolean | |||
isDisabled | boolean | True when disabled directly or by a disabled ancestor fieldset. |
Methods
| Method | Description |
|---|---|
formResetCallback() | Restore the initial value when the owning form resets. |
stepBy() | Moves the value by n steps, clamped to min and max. |
Events
| Event | Detail | Description |
|---|---|---|
mm-input | CustomEvent<MmValueDetail> | On every edit and every step. |
mm-change | CustomEvent<MmValueDetail> | When the value is committed (blur after typing, or a step). |
input | InputEvent | Native, composed; on every edit and step. |
change | Event | Native, re-dispatched on the host when the value is committed. |
CSS parts
| Part | Description |
|---|---|
label | The label. |
control | The bordered box. |
input | The native number input. |
unit | The unit suffix. |
stepper | Each stepper button. |
help | The help line. |
error | The error line. |
Examples
Every state of mm-number-field in Storybook, with keyboard and screen reader tests.