Skip to main content

Input (number)

Since 2.6.0 Form-ready since 2.6.0
Show deprecated version


Guidelines​

The number input component allows users to enter and adjust numerical values. It’s commonly used in forms, calculators, and other areas where precise numerical input is required. We typically use the number input component to ensure accurate and efficient data entry.

Number input overview

  1. Label
  2. Required field indicator
  3. Value
  4. Stepper buttons
  5. Input field
  6. Helper or feedback text

Options​

  • Label: See form field.
  • Value: See form field.
  • Required: See form field.
  • Helper text: See form field.
  • Feedback text: See form field.
  • Show text as tooltip: See form field.
  • Placeholder: See form field.
  • Allowed characters pattern: Specify the characters allowed for input. We typically use this to reject invalid characters, such as decimal points. When users type an invalid character, a shaking animation is immediately triggered.
  • Pattern: Define the expected input using regular expressions, such as an integer between 1 and 100. We often use this to validate the input when the user leaves the field or clicks submit.
  • Min/Max: Specify the minimum and maximum values that can be entered to ensure the input stays within the defined range. We typically use this option to prevent invalid entries and guide users towards acceptable values.
  • Show stepper buttons: Use these optional controls to increment or decrement the value (suitable for small ranges with few steps). We typically use these buttons when precise adjustments are needed, such as in quantity selectors, rating systems or form inputs requiring fine-tuned numerical values.

Behavior in context​

  • Interaction: Users can type a value or use stepper buttons to adjust it. We recommend using stepper buttons, especially for touch interactions, to enhance usability and precision.
  • Validation: See form field.
  • Overflow: Numbers are truncated to fit within the input field. Ensure that the expected value is visible in the input field so it can be properly displayed.
  • Alignment: Number inputs are always aligned to the right.

States​

The number input has five states: default, hover, focused, disabled and read-only. Number input states

Dos and Don’ts​

  • Do set appropriate min and max values to prevent invalid entries and guide user input
  • Do provide clear error messages when the input value is out of the allowed range or does not match the required pattern
  • Do consider special cases such as zero, negative numbers and very large numbers to ensure all possible inputs are handled correctly
  • Don't specify patterns that do not align with your use case, e.g. inappropriate intervals between valid values