NumberInput

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

If you are not using FormControl, set aria-label or aria-labelledby to NumberInput.

<NumberInput aria-label="Age" />

Copied!

<VStack gap="sm">
  <Text as="h3" id="label">
    Age
  </Text>

  <NumberInput aria-labelledby="label" />
</VStack>

Copied!

For example, if the day of the week is represented by a number and the value of aria-valuenow is not user-friendly, set aria-valuetext to a human-readable string such as "Monday".

const weekday = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
]

return (
  <NumberInput
    getAriaValueText={(value) => weekday[Number(value)]}
    max={6}
    min={0}
  />
)

Copied!

Key	Description	State
`ArrowUp`	Increases the value based on the `step` value.	-
`ArrowDown`	Decreases the value based on the `step` value.	-
`Home`	Sets the value to `min`.	-
`End`	Sets the value to `max`.	-

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`NumberInput`	`role="group"`	Indicates that it is a group.
`NumberInputField` Internal	`role="spinbutton"`	Indicates that it is a spin button.
	`aria-valuemin`	Sets the `min` value. Default is `Number.MIN_SAFE_INTEGER`.
	`aria-valuemax`	Sets the `max` value. Default is `Number.MAX_SAFE_INTEGER`.
	`aria-valuenow`	Sets the current value.
	`aria-valuetext`	Sets the current value.
`NumberIncrementStepper` Internal	`aria-label`	Sets `"Increase"`.
`NumberDecrementStepper` Internal	`aria-label`	Sets `"Decrease"`.

Edit this page on GitHub

PreviousInput NextPasswordInput