@chakra-ui/number-input

What is @chakra-ui/number-input?

@chakra-ui/number-input is a component from the Chakra UI library that provides a customizable and accessible number input field. It allows users to input numerical values with ease and provides features such as increment and decrement buttons, value formatting, and validation.

What are @chakra-ui/number-input's main functionalities?

Basic Number Input

This code demonstrates a basic number input with increment and decrement buttons. The input is restricted to values between 10 and 20, with a default value of 15.

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

function BasicNumberInput() {
  return (
    <NumberInput defaultValue={15} min={10} max={20}>
      <NumberInputField />
      <NumberInputStepper>
        <NumberIncrementStepper />
        <NumberDecrementStepper />
      </NumberInputStepper>
    </NumberInput>
  );
}

Formatted Number Input

This code shows a number input with formatted values. The input allows for two decimal places and increments/decrements by 0.2.

import { NumberInput, NumberInputField } from '@chakra-ui/react';

function FormattedNumberInput() {
  return (
    <NumberInput defaultValue={15} precision={2} step={0.2}>
      <NumberInputField />
    </NumberInput>
  );
}

Controlled Number Input

This code demonstrates a controlled number input where the value is managed by React state. The input value is updated based on user interaction.

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

function ControlledNumberInput() {
  const [value, setValue] = useState(10);

  return (
    <NumberInput value={value} onChange={(valueString) => setValue(parseInt(valueString))}>
      <NumberInputField />
      <NumberInputStepper>
        <NumberIncrementStepper />
        <NumberDecrementStepper />
      </NumberInputStepper>
    </NumberInput>
  );
}

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.

README

@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