The number input is a component that allows users to select a number from a range of values. It consists of an input field and two buttons (up and down) to increase or decrease the value.

Base

The number input is a simple input field with up and down buttons. The buttons are used to increment or decrement the value in the input field. They should not be focusable.

When the number input is at min or max, the decrement or increment button should be disabled.

Base with inline label

To add an inline label to the number input, use the label element. The label should be placed before the input field.

With delete button

The delete button should be placed after the input field in the HTML for proper keyboard interation. Visually, it will be moved before the input with CSS.

For the delete button case, min="1" attribute is required for the input.

When the counter is set to 1 you can use number-input--show-delete modifier class to show the delete button. After the counter is incremented to more than 1, the class should be removed.

Large input field

To create a large input field, use the textbox--large modifier class.

Fluid input field

To create a fluid input field, use the textbox--fluid modifier class.

Fluid input field with label

To create a fluid input field with a label, use the textbox--fluid modifier class on the label version of number-input.