Skip to main contentCarbon Design System

Number input

The number input component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.

Overview

Number inputs are similar to text inputs, but contain controls used to increase or decrease an incremental value.

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.
number input example

Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.