Number stepper
A number input between decrement and increment buttons, sharing one focus ring.
Examples
Stepper
Anatomy
.number | Filled inline row. Draws the focus ring when anything inside has focus. |
> button | Decrement before, increment after. Square, muted until hover. |
> input[type=number] | Four characters wide, centred, tabular figures, native spinners hidden. |
API
| Attribute | Values | Description |
|---|---|---|
data-step | <n> | On a button: a negative value steps down, a positive one up. The amount comes from the input's step, not from this value. |
min | <n> | Native, on the input: the stepper stops here. |
max | <n> | Native, on the input: the stepper stops here. |
step | <n> | Native, on the input: the amount each button press or arrow key changes the value. Default 1. |
Behaviour
A click on .number > button[data-step] calls stepDown() or stepUp() on the input, by the sign of data-step, and dispatches an input event. Without aequitas.js the buttons do nothing, but the input still takes typing and the arrow keys.
From aequitas.js. It initialises itself and enhances markup added later on its own, so it works the same in an SPA.
Accessibility
- The buttons are icon-only: give each an
aria-label. The input needs one too when there is no visible label. - Use
type="button"on the buttons, or they submit the surrounding form.
| Key | Effect |
|---|---|
| ↑ / ↓ | In the input: steps the value up or down (native). |