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.
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.
Name | Default | Description |
---|---|---|
isDisabled | false | boolean Determines whether input is disabled and doesn't respond to any user interactions. |
isReadOnly | false | boolean Determines whether input can be interacted with, but value can't be changed. |
isRequired | false | boolean Indicates that input is required to fill out. |
isInvalid | false | boolean 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. |