If true, the input's value will change based on mouse wheel
Number Input
The NumberInput component is similar to the Input component, but it has controls for incrementing or decrementing numeric values.
Props#
NumberInput Props#
NumberInput composes Flex with some additional props listed below.
allowMouseWheel
allowMouseWheelDescription
Type
booleanaria-describedby
aria-describedbyType
stringaria-label
aria-labelType
stringaria-labelledby
aria-labelledbyType
stringclampValueOnBlur
clampValueOnBlurDescription
This controls the value update when you blur out of the input.
- If true and the value is greater than max, the value will be reset to max
- Else, the value remains the same.
Type
booleanDefault
truecolorScheme
colorSchemeDescription
Color Schemes for NumberInput are not implemented in the default theme. You can extend the theme to implement them.
Type
stringdefaultValue
defaultValueDescription
The initial value of the counter. Should be less than max and greater than min
Type
string | numbererrorBorderColor
errorBorderColorDescription
The border color when the input is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"
Type
stringfocusBorderColor
focusBorderColorDescription
The border color when the input is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"
Type
stringfocusInputOnChange
focusInputOnChangeDescription
If true, the input will be focused as you increment
or decrement the value with the stepper
Type
booleanDefault
trueformat
formatDescription
If using a custom display format, this converts the default format to the custom format.
Type
((value: string | number) => string | number)getAriaValueText
getAriaValueTextDescription
This is used to format the value so that screen readers can speak out a more human-friendly value. It is used to set the `aria-valuetext` property of the input
Type
((value: string | number) => string)id
idDescription
The id to use for the number input field.
Type
stringinputMode
inputModeDescription
Hints at the type of data that might be entered by the user. It also determines the type of keyboard shown to the user on mobile devices
Type
"text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"Default
"decimal"isDisabled
isDisabledDescription
Whether the input should be disabled
Type
booleanisInvalid
isInvalidDescription
If true, the input will have `aria-invalid` set to true
Type
booleanisReadOnly
isReadOnlyDescription
If true, the input will be in readonly mode
Type
booleanisRequired
isRequiredDescription
Whether the input is required
Type
booleanisValidCharacter
isValidCharacterDescription
Whether the pressed key should be allowed in the input. The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\-.]$/
Type
((value: string) => boolean)keepWithinRange
keepWithinRangeDescription
This controls the value update behavior in general.
- If true and you use the stepper or up/down arrow keys,
the value will not exceed the max or go lower than min
- If false, the value will be allowed to go out of range.
Type
booleanDefault
truemax
maxDescription
The maximum value of the counter
Type
numberDefault
Number.MAX_SAFE_INTEGERmin
minDescription
The minimum value of the counter
Type
numberDefault
Number.MIN_SAFE_INTEGERname
nameDescription
The HTML name attribute used for forms
Type
stringonBlur
onBlurType
FocusEventHandler<HTMLInputElement>onChange
onChangeDescription
The callback fired when the value changes
Type
((valueAsString: string, valueAsNumber: number) => void)onFocus
onFocusType
FocusEventHandler<HTMLInputElement>onInvalid
onInvalidType
((message: ValidityState, value: string, valueAsNumber: number) => void)parse
parseDescription
If using a custom display format, this converts the custom format to a format parseFloat understands.
Type
((value: string) => string)pattern
patternDescription
The pattern used to check the <input> element's value against on form submission.
Type
stringDefault
"[0-9]*(.[0-9]+)?"precision
precisionDescription
The number of decimal points used to round the value
Type
numbersize
sizeType
"xs" | "sm" | "md" | "lg"Default
"md"step
stepDescription
The step used to increment or decrement the value
Type
numberDefault
1value
valueDescription
The value of the counter. Should be less than max and greater than min
Type
string | numbervariant
variantType
"outline" | "filled" | "flushed" | "unstyled"Default
"outline"NumberInputField Props#
NumberInputField composes Input so you can pass all Input props. If you
want to change the size, pass the size prop to the NumberInput component
instead, as demonstrated above.
NumberInputStepper Props#
NumberInputStepper composes Flex so you can pass all Flex props.
NumberDecrementStepper and NumberIncrementStepper Props#
NumberDecrementStepper and NumberIncrementStepper composes the Box props
so you can pass all Box props.
Props#
NumberInput Props#
NumberInput composes Flex with some additional props listed below.
allowMouseWheel
allowMouseWheelDescription
If true, the input's value will change based on mouse wheel
Type
booleanaria-describedby
aria-describedbyType
stringaria-label
aria-labelType
stringaria-labelledby
aria-labelledbyType
stringclampValueOnBlur
clampValueOnBlurDescription
This controls the value update when you blur out of the input.
- If true and the value is greater than max, the value will be reset to max
- Else, the value remains the same.
Type
booleanDefault
truecolorScheme
colorSchemeDescription
Color Schemes for NumberInput are not implemented in the default theme. You can extend the theme to implement them.
Type
stringdefaultValue
defaultValueDescription
The initial value of the counter. Should be less than max and greater than min
Type
string | numbererrorBorderColor
errorBorderColorDescription
The border color when the input is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"
Type
stringfocusBorderColor
focusBorderColorDescription
The border color when the input is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"
Type
stringfocusInputOnChange
focusInputOnChangeDescription
If true, the input will be focused as you increment
or decrement the value with the stepper
Type
booleanDefault
trueformat
formatDescription
If using a custom display format, this converts the default format to the custom format.
Type
((value: string | number) => string | number)getAriaValueText
getAriaValueTextDescription
This is used to format the value so that screen readers can speak out a more human-friendly value. It is used to set the `aria-valuetext` property of the input
Type
((value: string | number) => string)id
idDescription
The id to use for the number input field.
Type
stringinputMode
inputModeDescription
Hints at the type of data that might be entered by the user. It also determines the type of keyboard shown to the user on mobile devices
Type
"text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"Default
"decimal"isDisabled
isDisabledDescription
Whether the input should be disabled
Type
booleanisInvalid
isInvalidDescription
If true, the input will have `aria-invalid` set to true
Type
booleanisReadOnly
isReadOnlyDescription
If true, the input will be in readonly mode
Type
booleanisRequired
isRequiredDescription
Whether the input is required
Type
booleanisValidCharacter
isValidCharacterDescription
Whether the pressed key should be allowed in the input. The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\-.]$/
Type
((value: string) => boolean)keepWithinRange
keepWithinRangeDescription
This controls the value update behavior in general.
- If true and you use the stepper or up/down arrow keys,
the value will not exceed the max or go lower than min
- If false, the value will be allowed to go out of range.
Type
booleanDefault
truemax
maxDescription
The maximum value of the counter
Type
numberDefault
Number.MAX_SAFE_INTEGERmin
minDescription
The minimum value of the counter
Type
numberDefault
Number.MIN_SAFE_INTEGERname
nameDescription
The HTML name attribute used for forms
Type
stringonBlur
onBlurType
FocusEventHandler<HTMLInputElement>onChange
onChangeDescription
The callback fired when the value changes
Type
((valueAsString: string, valueAsNumber: number) => void)onFocus
onFocusType
FocusEventHandler<HTMLInputElement>onInvalid
onInvalidType
((message: ValidityState, value: string, valueAsNumber: number) => void)parse
parseDescription
If using a custom display format, this converts the custom format to a format parseFloat understands.
Type
((value: string) => string)pattern
patternDescription
The pattern used to check the <input> element's value against on form submission.
Type
stringDefault
"[0-9]*(.[0-9]+)?"precision
precisionDescription
The number of decimal points used to round the value
Type
numbersize
sizeType
"xs" | "sm" | "md" | "lg"Default
"md"step
stepDescription
The step used to increment or decrement the value
Type
numberDefault
1value
valueDescription
The value of the counter. Should be less than max and greater than min
Type
string | numbervariant
variantType
"outline" | "filled" | "flushed" | "unstyled"Default
"outline"NumberInputField Props#
NumberInputField composes Input so you can pass all Input props. If you
want to change the size, pass the size prop to the NumberInput component
instead, as demonstrated above.
NumberInputStepper Props#
NumberInputStepper composes Flex so you can pass all Flex props.
NumberDecrementStepper and NumberIncrementStepper Props#
NumberDecrementStepper and NumberIncrementStepper composes the Box props
so you can pass all Box props.