@chakra-ui/number-input

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>
  );
}