Number Input

Basics

A count people nudge up and down: guests, seats, retries. A native <input type="number"> with min, max and step in a .canon-number, between two icon-only Buttons that step it (command="--canon-step-down" and "--canon-step-up", commandfor the input). The value stays the input's: typing, the arrow keys, the form value and the browser's checks. The buttons are left out of the tab order; hold one down to keep stepping. At min or max its button is unavailable.

Buttons at the end

For a number typed as often as nudged (a port, a year, a quantity in a long form), lined up with the text fields around it: put the input first, then the step-up button and the step-down button, with chevron-up and chevron-down icons. The box fills its place like a Text Input, the value starts where a text field's does, and the two buttons stack at its end. Everything else is the same: one Tab stop, the arrow keys, holding a button down, the limits.

Size

Size

data-size on the field, the box or a container: a text input's height, the buttons square. The value grows with what is typed.

Step

step sets how far one press goes, and which values are valid.

States

Text Input's states, over the whole number: focus, an error (aria-invalid="true" and a danger message), disabled, readonly (the buttons are unavailable too).

Edge cases

A long number widens the value. Right to left, the minus is on the right and the plus on the left: the start steps down.