@chakra-ui/number-input

@chakra-ui/number-input

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

It follows the WAI-ARIA authoring practices for the Spinbutton widget.

Installation

yarn add @chakra-ui/number-input

# or

npm i @chakra-ui/number-input

Import components

import {
  NumberInput,
  NumberInputField,
  NumberInputStepper,
  NumberIncrementStepper,
  NumberDecrementStepper,
} from "@chakra-ui/react"

Usage

// TO DO

Similar packages

Other packages similar to @chakra-ui/number-input

react-number-format

react-number-format is a library for formatting and masking numeric inputs. It provides features like custom formatting, masking, and validation. Compared to @chakra-ui/number-input, it offers more advanced formatting options but lacks the built-in accessibility and styling provided by Chakra UI.

react-numeric-input

react-numeric-input is a lightweight numeric input component for React. It supports features like custom step intervals, min/max values, and value formatting. While it is simpler and more focused on numeric input, it does not offer the same level of customization and integration with a design system as @chakra-ui/number-input.

rc-input-number

rc-input-number is a numeric input component from the rc-components library. It provides basic numeric input functionality with support for increment/decrement buttons, min/max values, and custom step intervals. It is more basic in terms of styling and customization compared to @chakra-ui/number-input.