NumberInput

NumberInputは、ユーザーからの数値入力を取得するために使用されるコンポーネントです。

ソース @yamada-ui/number-input

Props

NumberInputProps

説明

Props for addon component.

タイプ

HTMLUIProps

説明

If true, the input's value will change based on mouse wheel.

タイプ

boolean

デフォルト

false

説明

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

デフォルト

true

説明

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"

説明

Props for container element.

タイプ

HTMLUIProps

説明

Props for decrement component.

タイプ

NumberDecrementStepperProps

説明

The initial value of the counter. Should be less than max and greater than min.

タイプ

string | number

説明

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 ... | [...]

説明

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 ... | [...]

説明

If true, the input will be focused as you increment or decrement the value with the stepper.

タイプ

boolean

デフォルト

true

説明

If using a custom display format, this converts the default format to the custom format.

タイプ

(value: string | number) => string | number

説明

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 | undefined

説明

Props for increment component.

タイプ

NumberIncrementStepperProps

説明

If true, the form control will be invalid.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be disabled.

非推奨

Use disabled instead.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be invalid.

非推奨

Use invalid instead.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be readonly.

非推奨

Use readOnly instead.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be required.

非推奨

Use required instead.

タイプ

boolean

デフォルト

false

説明

If true, display the addon for the number input.

非推奨

Use stepper instead.

タイプ

boolean

説明

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) => boolean

説明

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

デフォルト

true

説明

The maximum value of the counter

タイプ

number

デフォルト

Number.MAX_SAFE_INTEGER

説明

The minimum value of the counter

タイプ

number

デフォルト

Number.MIN_SAFE_INTEGER

説明

The callback fired when the value changes.

タイプ

(valueAsString: string, valueAsNumber: number) => void

説明

The callback invoked when invalid number is entered.

タイプ

(
message: ValidityState,
value: string,
valueAsNumber: number,
) => void

説明

If using a custom display format, this converts the custom format to a format parseFloat understands.

タイプ

(value: string) => string

説明

The number of decimal points used to round the value.

タイプ

number

説明

The size of the NumberInput.

タイプ

"xs" | "sm" | "md" | "lg" | "xl"

デフォルト

"md"

説明

The step used to increment or decrement the value.

タイプ

number

デフォルト

1

説明

If true, display the addon for the number input.

タイプ

boolean

説明

The value of the counter. Should be less than max and greater than min.

タイプ

string | number

説明

The variant of the NumberInput.

タイプ

"filled" | "flushed" | "outline" | "unstyled"

デフォルト

"outline"

UseNumberInputProps

説明

If true, the input's value will change based on mouse wheel.

タイプ

boolean

デフォルト

false

説明

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

デフォルト

true

説明

The initial value of the counter. Should be less than max and greater than min.

タイプ

string | number

説明

If true, the form control will be disabled.

タイプ

boolean

説明

If true, the input will be focused as you increment or decrement the value with the stepper.

タイプ

boolean

デフォルト

true

説明

If using a custom display format, this converts the default format to the custom format.

タイプ

(value: string | number) => string | number

説明

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 | undefined

タイプ

string

説明

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'

説明

If true, the form control will be invalid.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be disabled.

非推奨

Use disabled instead.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be invalid.

非推奨

Use invalid instead.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be readonly.

非推奨

Use readOnly instead.

タイプ

boolean

デフォルト

false

説明

If true, the form control will be required.

非推奨

Use required instead.

タイプ

boolean

デフォルト

false

説明

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) => boolean

説明

タイプ

boolean

デフォルト

true

説明

The maximum value of the counter

タイプ

number

デフォルト

Number.MAX_SAFE_INTEGER

説明

The minimum value of the counter

タイプ

number

デフォルト

Number.MIN_SAFE_INTEGER

説明

The HTML name attribute used for forms.

タイプ

string

タイプ

FocusEventHandler<HTMLInputElement>

説明

The callback fired when the value changes.

タイプ

(valueAsString: string, valueAsNumber: number) => void

タイプ

FocusEventHandler<HTMLInputElement>

説明

The callback invoked when invalid number is entered.

タイプ

(
message: ValidityState,
value: string,
valueAsNumber: number,
) => void

説明

If using a custom display format, this converts the custom format to a format parseFloat understands.

タイプ

(value: string) => string

説明

The pattern used to check the <input> element's value against on form submission.

タイプ

string

デフォルト

'[0-9]*(.[0-9]+)?'

説明

The number of decimal points used to round the value.

タイプ

number

説明

If true, the form control will be readonly.

タイプ

boolean

説明

If true, the form control will be required.

タイプ

boolean

説明

The step used to increment or decrement the value.

タイプ

number

デフォルト

1

説明

The value of the counter. Should be less than max and greater than min.

タイプ

string | number

GitHubでこのページを編集する

前Input 次PasswordInput