Number Input

The NumberInput component is similar to the Input component, but it has controls for incrementing or decrementing numeric values.

    SourceTheme source@chakra-ui/number-input

Props#

NumberInput Props#

NumberInput composes Flex with some additional props listed below.

allowMouseWheel

Description

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

Type
boolean

aria-describedby

Type
string

aria-label

Type
string

aria-labelledby

Type
string

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" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

defaultValue

Description

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

Type
string | number

errorBorderColor

Description

The border color when the input is invalid. Use color keys in `theme.colors`

Type
string

focusBorderColor

Description

The border color when the input is focused. Use color keys in `theme.colors`

Type
string

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

Description

The id to use for the number input field.

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

Whether the input should be disabled

Type
boolean

isInvalid

Description

If true, the input will have `aria-invalid` set to true

Type
boolean

isReadOnly

Description

If true, the input will be in readonly mode

Type
boolean

isRequired

Description

Whether the input is required

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

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

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

size

Description

The size of the NumberInput

Type
"xs" | "sm" | "md" | "lg"
Default
md

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

variant

Description

The variant of the NumberInput

Type
"outline" | "filled" | "flushed" | "unstyled"
Default
outline

NumberInputField Props#

NumberInputField composes Input so you can pass all Input props. If you want to change the size, pass the size prop to the NumberInput component instead, as demonstrated above.

NumberInputStepper Props#

NumberInputStepper composes Flex so you can pass all Flex props.

NumberDecrementStepper and NumberIncrementStepper Props#

NumberDecrementStepper and NumberIncrementStepper composes the Box props so you can pass all Box props.

Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel