addonProps
Description
Props for addon component.
Type
HTMLUIPropsNumberInput
NumberInput is a component used to obtain numeric input from the user.
Props
NumberInputProps
allowMouseWheel
Description
If true, the input's value will change based on mouse wheel.
Type
booleanDefault
falseclampValueOnBlur
Description
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
Description
The visual color appearance of the component.
Type
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"containerProps
Description
Props for container element.
Type
HTMLUIPropsdecrementProps
Description
Props for decrement component.
Type
NumberDecrementStepperPropsdefaultValue
Description
The initial value of the counter.
Should be less than max and greater than min.
Type
string | numbererrorBorderColor
Description
The border color when the input is invalid.
Type
"border" | "link" | BorderColor | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 319 more ... | [...]focusBorderColor
Description
The border color when the input is focused.
Type
"border" | "link" | BorderColor | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 319 more ... | [...]focusInputOnChange
Description
If true, the input will be focused as you increment or decrement the value with the stepper.
Type
booleanDefault
trueformat
Description
If using a custom display format, this converts the default format to the custom format.
Type
(value: string | number) => string | numbergetAriaValueText
Description
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 | undefinedincrementProps
Description
Props for increment component.
Type
NumberIncrementStepperPropsisDisabled
Description
If true, the form control will be disabled.
Type
booleanDefault
falseisInvalid
Description
If true, the form control will be invalid.
Type
booleanDefault
falseisReadOnly
Description
If true, the form control will be readonly.
Type
booleanDefault
falseisRequired
Description
If true, the form control will be required.
Type
booleanDefault
falseisStepper
Description
If true, display the addon for the number input.
Type
booleanisValidCharacter
Description
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) => booleankeepWithinRange
Description
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
Description
The maximum value of the counter
Type
numberDefault
Number.MAX_SAFE_INTEGERmin
Description
The minimum value of the counter
Type
numberDefault
Number.MIN_SAFE_INTEGERonChange
Description
The callback fired when the value changes.
Type
(valueAsString: string, valueAsNumber: number) => voidonInvalid
Description
The callback invoked when invalid number is entered.
Type
(
message: ValidityState,
value: string,
valueAsNumber: number,
) => voidparse
Description
If using a custom display format, this converts the custom format to a format parseFloat understands.
Type
(value: string) => stringprecision
Description
The number of decimal points used to round the value.
Type
numbersize
Description
The size of the NumberInput.
Type
"xs" | "sm" | "md" | "lg" | "xl"Default
"md"step
Description
The step used to increment or decrement the value.
Type
numberDefault
1value
Description
The value of the counter.
Should be less than max and greater than min.
Type
string | numbervariant
Description
The variant of the NumberInput.
Type
"filled" | "flushed" | "outline" | "unstyled"Default
"outline"UseNumberInputProps
allowMouseWheel
Description
If true, the input's value will change based on mouse wheel.
Type
booleanDefault
falseclampValueOnBlur
Description
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
truedefaultValue
Description
The initial value of the counter.
Should be less than max and greater than min.
Type
string | numberdisabled
Type
booleanfocusInputOnChange
Description
If true, the input will be focused as you increment or decrement the value with the stepper.
Type
booleanDefault
trueformat
Description
If using a custom display format, this converts the default format to the custom format.
Type
(value: string | number) => string | numbergetAriaValueText
Description
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 | undefinedid
Type
stringinputMode
Description
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
type ONLY_FOR_FORMAT =
| "text"
| "search"
| "decimal"
| "none"
| "tel"
| "url"
| "email"
| "numeric"Default
'decimal'isDisabled
Description
If true, the form control will be disabled.
Type
booleanDefault
falseisInvalid
Description
If true, the form control will be invalid.
Type
booleanDefault
falseisReadOnly
Description
If true, the form control will be readonly.
Type
booleanDefault
falseisRequired
Description
If true, the form control will be required.
Type
booleanDefault
falseisValidCharacter
Description
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) => booleankeepWithinRange
Description
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
Description
The maximum value of the counter
Type
numberDefault
Number.MAX_SAFE_INTEGERmin
Description
The minimum value of the counter
Type
numberDefault
Number.MIN_SAFE_INTEGERname
Description
The HTML name attribute used for forms.
Type
stringonBlur
Type
FocusEventHandler<HTMLInputElement>onChange
Description
The callback fired when the value changes.
Type
(valueAsString: string, valueAsNumber: number) => voidonFocus
Type
FocusEventHandler<HTMLInputElement>onInvalid
Description
The callback invoked when invalid number is entered.
Type
(
message: ValidityState,
value: string,
valueAsNumber: number,
) => voidparse
Description
If using a custom display format, this converts the custom format to a format parseFloat understands.
Type
(value: string) => stringpattern
Description
The pattern used to check the <input> element's value against on form submission.
Type
stringDefault
'[0-9]*(.[0-9]+)?'precision
Description
The number of decimal points used to round the value.
Type
numberreadOnly
Type
booleanrequired
Type
booleanstep
Description
The step used to increment or decrement the value.
Type
numberDefault
1value
Description
The value of the counter.
Should be less than max and greater than min.
Type
string | numberEdit this page on GitHub