addonProps
説明
Props for addon component.
タイプ
HTMLUIPropsNumberInput
NumberInputは、ユーザーからの数値入力を取得するために使用されるコンポーネントです。
Props
NumberInputProps
allowMouseWheel
説明
If true, the input's value will change based on mouse wheel.
タイプ
booleanデフォルト
falseclampValueOnBlur
説明
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.
タイプ
booleanデフォルト
truecolorScheme
説明
The visual color appearance of the component.
タイプ
"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
説明
Props for container element.
タイプ
HTMLUIPropsdecrementProps
説明
Props for decrement component.
タイプ
NumberDecrementStepperPropsdefaultValue
説明
The initial value of the counter.
Should be less than max and greater than min.
タイプ
string | numbererrorBorderColor
説明
The border color when the input is invalid.
タイプ
"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
説明
The border color when the input is focused.
タイプ
"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
説明
If true, the input will be focused as you increment or decrement the value with the stepper.
タイプ
booleanデフォルト
trueformat
説明
If using a custom display format, this converts the default format to the custom format.
タイプ
(value: string | number) => string | numbergetAriaValueText
説明
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.
タイプ
(value: string | number) => string | undefinedincrementProps
説明
Props for increment component.
タイプ
NumberIncrementStepperPropsisDisabled
説明
If true, the form control will be disabled.
タイプ
booleanデフォルト
falseisInvalid
説明
If true, the form control will be invalid.
タイプ
booleanデフォルト
falseisReadOnly
説明
If true, the form control will be readonly.
タイプ
booleanデフォルト
falseisRequired
説明
If true, the form control will be required.
タイプ
booleanデフォルト
falseisStepper
説明
If true, display the addon for the number input.
タイプ
booleanisValidCharacter
説明
Whether the pressed key should be allowed in the input. The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+-.]$/.
タイプ
(value: string) => booleankeepWithinRange
説明
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.
タイプ
booleanデフォルト
truemax
説明
The maximum value of the counter
タイプ
numberデフォルト
Number.MAX_SAFE_INTEGERmin
説明
The minimum value of the counter
タイプ
numberデフォルト
Number.MIN_SAFE_INTEGERonChange
説明
The callback fired when the value changes.
タイプ
(valueAsString: string, valueAsNumber: number) => voidonInvalid
説明
The callback invoked when invalid number is entered.
タイプ
(
message: ValidityState,
value: string,
valueAsNumber: number,
) => voidparse
説明
If using a custom display format, this converts the custom format to a format parseFloat understands.
タイプ
(value: string) => stringprecision
説明
The number of decimal points used to round the value.
タイプ
numbersize
説明
The size of the NumberInput.
タイプ
"xs" | "sm" | "md" | "lg" | "xl"デフォルト
"md"step
説明
The step used to increment or decrement the value.
タイプ
numberデフォルト
1value
説明
The value of the counter.
Should be less than max and greater than min.
タイプ
string | numbervariant
説明
The variant of the NumberInput.
タイプ
"filled" | "flushed" | "outline" | "unstyled"デフォルト
"outline"UseNumberInputProps
allowMouseWheel
説明
If true, the input's value will change based on mouse wheel.
タイプ
booleanデフォルト
falseclampValueOnBlur
説明
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.
タイプ
booleanデフォルト
truedefaultValue
説明
The initial value of the counter.
Should be less than max and greater than min.
タイプ
string | numberdisabled
タイプ
booleanfocusInputOnChange
説明
If true, the input will be focused as you increment or decrement the value with the stepper.
タイプ
booleanデフォルト
trueformat
説明
If using a custom display format, this converts the default format to the custom format.
タイプ
(value: string | number) => string | numbergetAriaValueText
説明
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.
タイプ
(value: string | number) => string | undefinedid
タイプ
stringinputMode
説明
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 ONLY_FOR_FORMAT =
| "text"
| "search"
| "decimal"
| "none"
| "tel"
| "url"
| "email"
| "numeric"デフォルト
'decimal'isDisabled
説明
If true, the form control will be disabled.
タイプ
booleanデフォルト
falseisInvalid
説明
If true, the form control will be invalid.
タイプ
booleanデフォルト
falseisReadOnly
説明
If true, the form control will be readonly.
タイプ
booleanデフォルト
falseisRequired
説明
If true, the form control will be required.
タイプ
booleanデフォルト
falseisValidCharacter
説明
Whether the pressed key should be allowed in the input. The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+-.]$/.
タイプ
(value: string) => booleankeepWithinRange
説明
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.
タイプ
booleanデフォルト
truemax
説明
The maximum value of the counter
タイプ
numberデフォルト
Number.MAX_SAFE_INTEGERmin
説明
The minimum value of the counter
タイプ
numberデフォルト
Number.MIN_SAFE_INTEGERname
説明
The HTML name attribute used for forms.
タイプ
stringonBlur
タイプ
FocusEventHandler<HTMLInputElement>onChange
説明
The callback fired when the value changes.
タイプ
(valueAsString: string, valueAsNumber: number) => voidonFocus
タイプ
FocusEventHandler<HTMLInputElement>onInvalid
説明
The callback invoked when invalid number is entered.
タイプ
(
message: ValidityState,
value: string,
valueAsNumber: number,
) => voidparse
説明
If using a custom display format, this converts the custom format to a format parseFloat understands.
タイプ
(value: string) => stringpattern
説明
The pattern used to check the <input> element's value against on form submission.
タイプ
stringデフォルト
'[0-9]*(.[0-9]+)?'precision
説明
The number of decimal points used to round the value.
タイプ
numberreadOnly
タイプ
booleanrequired
タイプ
booleanstep
説明
The step used to increment or decrement the value.
タイプ
numberデフォルト
1value
説明
The value of the counter.
Should be less than max and greater than min.
タイプ
string | numberGitHubでこのページを編集する