Skip to main content
Skip to main content

Input - Number

A number input is a single-line text field with behaviors to support number functionality.

Code documentation

Web

Anatomy

The number input component is made up of 14 elements.

Anatomy diagram numbering 14 elements of a number input.
  1. Label
  2. Optional indicator
  3. Increment stepper
  4. Decrement stepper
  5. Counter
  6. Clear button
  7. Value
  8. Left slot
  9. Helper text
  10. Required indicator
  11. Current value length
  12. Max value length
  13. Counter divider
  14. Error text

Variants

Number input extends the input component which allows for the use of its properties, events, slots, methods, and styles. Refer to the input documentation for detailed information on these features.

The following variants are unique features to number input.

Step

The number input provides an increment and decrement button within the right slot. These buttons can be respectively used to increase and decrease the value. By default, the value steps in increments of 1. However, this can be adjusted by the user to be any numeric value including decimals.

A number input displays two buttons side-by-side aligned to the right edge of the input field. The left button includes a minus sign icon. The right button includes a plus sign icon.

Alternate icons can be slotted into the either stepper button if thematic customizations are required.