Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.1

NumberInput

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

Source@yamada-ui/number-input

Props

NumberInputProps

addonProps

Description

Props for addon component.

Type

HTMLUIProps<"div">

allowMouseWheel

Description

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

Type

boolean

Default

false

clampValueOnBlur

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

colorScheme

Description

The visual color appearance of the component.

Type

"whiteAlpha" | "blackAlpha" | "gray" | "neutral" | "red" | "danger" | "rose" | "pink" | "flashy" | "orange" | "warning" | "amber" | "yellow" | "lime" | "green" | "success" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "primary" | "info" | "link" | "indigo" | "violet" | "secondary" | "purple" | "fuchsia"

containerProps

Description

Props for container element.

Type

HTMLUIProps<"div">

decrementProps

Description

Props for decrement component.

Type

NumberDecrementStepperProps

errorBorderColor

Description

The border color when the input is invalid.

Type

"border" | "link" | BorderColor | "current" | "focus" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | ... 319 more ... | ColorModeArray<...>

focusBorderColor

Description

The border color when the input is focused.

Type

"border" | "link" | BorderColor | "current" | "focus" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | ... 319 more ... | ColorModeArray<...>

focusInputOnChange

Description

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

Type

boolean

Default

true

format

Description

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

Type

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

getAriaValueText

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

incrementProps

Description

Props for increment component.

Type

NumberIncrementStepperProps

isDisabled

Description

If true, the form control will be disabled.

Type

boolean

Default

false

isInvalid

Description

If true, the form control will be invalid.

Type

boolean

Default

false

isReadOnly

Description

If true, the form control will be readonly.

Type

boolean

Default

false

isRequired

Description

If true, the form control will be required.

Type

boolean

Default

false

isStepper

Description

If true, display the addon for the number input.

Type

boolean

isValidCharacter

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

keepWithinRange

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

onChange

Description

The callback fired when the value changes.

Type

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

parse

Description

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

Type

(value: string) => string

precision

Description

The number of decimal points used to round the value.

Type

number

size

Description

The size of the NumberInput.

Type

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

Default

md

variant

Description

The variant of the NumberInput.

Type

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

Default

outline

UseNumberInputProps

allowMouseWheel

Description

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

Type

boolean

Default

false

clampValueOnBlur

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

defaultValue

Description

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

Type

string | number

disabled

Type

boolean

focusInputOnChange

Description

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

Type

boolean

Default

true

format

Description

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

Type

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

getAriaValueText

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

id

Type

string

inputMode

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" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"

Default

'decimal'

isDisabled

Description

If true, the form control will be disabled.

Type

boolean

Default

false

isInvalid

Description

If true, the form control will be invalid.

Type

boolean

Default

false

isReadOnly

Description

If true, the form control will be readonly.

Type

boolean

Default

false

isRequired

Description

If true, the form control will be required.

Type

boolean

Default

false

isValidCharacter

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

keepWithinRange

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

max

Description

The maximum value of the counter

Type

number

Default

Number.MAX_SAFE_INTEGER

min

Description

The minimum value of the counter

Type

number

Default

Number.MIN_SAFE_INTEGER

name

Description

The HTML name attribute used for forms.

Type

string

onBlur

Type

FocusEventHandler<HTMLInputElement>

onChange

Description

The callback fired when the value changes.

Type

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

onFocus

Type

FocusEventHandler<HTMLInputElement>

onInvalid

Description

The callback invoked when invalid number is entered.

Type

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

parse

Description

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

Type

(value: string) => string

pattern

Description

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

Type

string

Default

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

precision

Description

The number of decimal points used to round the value.

Type

number

readOnly

Type

boolean

required

Type

boolean

step

Description

The step used to increment or decrement the value.

Type

number

Default

1

value

Description

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

Type

string | number

Edit this page on GitHub

PreviousInputNextPinInput