NumberInput

NumberInput are used to let the user enter a number. They include built-in validation to reject non-numerical entries. They provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip.

When to use

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.

When not to use

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.

Reference

Carbon Design System Usage for number input

On this page

Reference

References

Storybook