Number input

    <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}
    />
  

General guidance

Format

• Do not use number inputs when large value changes are expected. They work best for making small, incremental changes that only require 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.