Number input

• Overview
• Live demo
• Formatting
• Feedback

Overview

Live demo

    <NumberInput
      helperText="Optional helper text"
      id="tj-input"
      invalidText="Number is not valid"
      label="Number input label"
      max={100}
      min={0}
      step={10}
      value={50}
    />
  

Formatting

• Do not use number inputs when large value changes are expected. They work best for making small, incremental changes that require only a few clicks.
• Enable the user to also choose to type a number in the field.
• Ensure that a default value is shown within the field.
• Use a clear and concise label for the number input.
• Use sentence-style capitalization (only the first word in a phrase and any proper nouns capitalized) for the label.
• See further guidance for using number labels within forms.

Feedback