NumberInput

NumberInput is a component used to obtain numeric input from the user.

Source @yamada-ui/number-input

Props

NumberInputProps

Description

Props for addon component.

Type

HTMLUIProps

Description

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

Type

boolean

Default

false

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

boolean

Default

true

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"

Description

Props for container element.

Type

HTMLUIProps

Description

Props for decrement component.

Type

NumberDecrementStepperProps

Description

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

Type

string | number

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

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

Description

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

Type

boolean

Default

true

Description

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

Type

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

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

Description

Props for increment component.

Type

NumberIncrementStepperProps

Description

If true, the form control will be invalid.

Type

boolean

Default

false

Description

If true, the form control will be disabled.

Deprecated

Use disabled instead.

Type

boolean

Default

false

Description

If true, the form control will be invalid.

Deprecated

Use invalid instead.

Type

boolean

Default

false

Description

If true, the form control will be readonly.

Deprecated

Use readOnly instead.

Type

boolean

Default

false

Description

If true, the form control will be required.

Deprecated

Use required instead.

Type

boolean

Default

false

Description

If true, display the addon for the number input.

Deprecated

Use stepper instead.

Type

boolean

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

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

boolean

Default

true

Description

The maximum value of the counter

Type

number

Default

Number.MAX_SAFE_INTEGER

Description

The minimum value of the counter

Type

number

Default

Number.MIN_SAFE_INTEGER

Description

The callback fired when the value changes.

Type

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

Description

The callback invoked when invalid number is entered.

Type

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

Description

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

Type

(value: string) => string

Description

The number of decimal points used to round the value.

Type

number

Description

The size of the NumberInput.

Type

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

Default

"md"

Description

The step used to increment or decrement the value.

Type

number

Default

1

Description

If true, display the addon for the number input.

Type

boolean

Description

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

Type

string | number

Description

The variant of the NumberInput.

Type

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

Default

"outline"

UseNumberInputProps

Description

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

Type

boolean

Default

false

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

boolean

Default

true

Description

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

Type

string | number

Description

If true, the form control will be disabled.

Type

boolean

Description

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

Type

boolean

Default

true

Description

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

Type

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

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

Type

string

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'

Description

If true, the form control will be invalid.

Type

boolean

Default

false

Description

If true, the form control will be disabled.

Deprecated

Use disabled instead.

Type

boolean

Default

false

Description

If true, the form control will be invalid.

Deprecated

Use invalid instead.

Type

boolean

Default

false

Description

If true, the form control will be readonly.

Deprecated

Use readOnly instead.

Type

boolean

Default

false

Description

If true, the form control will be required.

Deprecated

Use required instead.

Type

boolean

Default

false

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

Description

Type

boolean

Default

true

Description

The maximum value of the counter

Type

number

Default

Number.MAX_SAFE_INTEGER

Description

The minimum value of the counter

Type

number

Default

Number.MIN_SAFE_INTEGER

Description

The HTML name attribute used for forms.

Type

string

Type

FocusEventHandler<HTMLInputElement>

Description

The callback fired when the value changes.

Type

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

Type

FocusEventHandler<HTMLInputElement>

Description

The callback invoked when invalid number is entered.

Type

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

Description

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

Type

(value: string) => string

Description

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

Type

string

Default

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

Description

The number of decimal points used to round the value.

Type

number

Description

If true, the form control will be readonly.

Type

boolean

Description

If true, the form control will be required.

Type

boolean

Description

The step used to increment or decrement the value.

Type

number

Default

1

Description

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

Type

string | number

Edit this page on GitHub

PreviousInput NextPasswordInput