Number Input

Number input allows user to enter a number.

#

#

#

Number input uses Intl.NumberFormat to format the input value. The default formatting style is decimal, but you can configure it via formatOptions prop.

#

Number input supports percentage values. When style: "percent" formatting option is used, value is multiplied by 100 before it's displayed. When the user enters a value, the onChange callback will be triggered with the entered value divided by 100. The default step also automatically changes to 0.01, so that incrementing and decrementing occurs by 1%.

#

Number input can limit the entered value to a specific range via min and max props.

#

Number input can show placeholder text before any value is entered.

#

Use step prop to customize the amount by which the value is incremented or decremented at a time.

#

Input should be disabled, when input shouldn't be allowed to be interacted with.

#

Compared to a disabled input, read only input is usually used for values that user might want to copy to clipboard.

#

Invalid input indicates that value isn't what the system expects.

#

The size prop impacts font-size and height. Default is set to md.

To set the width, use the width prop instead.

#

#

  • Use sentence case for placeholder text.
  • End placeholder text with three dots.

#

  • Code that uses number input should handle undefined gracefully and revert to an appropriate default value. undefined is returned as the value in the onChange callback when user clears out the number input.

#

Inherits margin props.

NameDefaultDescription
isDisabledfalseboolean

Determines whether input is disabled and doesn't respond to any user interactions.

isReadOnlyfalseboolean

Determines whether input can be interacted with, but value can't be changed.

isRequiredfalseboolean

Indicates that input is required to fill out.

isInvalidfalseboolean

Indicates that input value is invalid.

formatOptions{ style: "decimal" }Intl.NumberFormatOptions

Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user.

min

number

The smallest value allowed for the input.

max

number

The largest value allowed for the input.

placeholder

string

The text hint to show before any input is entered.

step

number

The amount that the input value changes with each increment or decrement.

value

number | undefined

Input value.

width"xs""xs" | "sm" | "md" | "lg" | "auto" | "100%"

Input width.

size"md""sm" | "md" | "lg"

Input size.

onChange

(value: number | undefined) => void

The callback fired when the value changes.

On this page

  • Example
  • Usage
  • Formatting
  • Percentages
  • Minimum and maximum values
  • Placeholder text
  • Step values
  • Disabled
  • Read only
  • Invalid
  • Size
  • Guidelines
  • Content
  • Values
  • Props