rc-input-number

Basic Numeric Input

This code sample demonstrates how to create a basic numeric input field with a default value, minimum, and maximum value.

import InputNumber from 'rc-input-number';

function App() {
  return (
    <InputNumber
      defaultValue={3}
      min={1}
      max={10}
    />
  );
}

Precision Control

This code sample shows how to set the step and precision for the numeric input, allowing users to increment or decrement by a specific value and control the number of digits after the decimal point.

import InputNumber from 'rc-input-number';

function App() {
  return (
    <InputNumber
      defaultValue={3.5}
      step={0.1}
      precision={2}
    />
  );
}

Keyboard Navigation

This code sample illustrates how to handle keyboard events, enabling users to navigate and modify the input value using their keyboard.

import InputNumber from 'rc-input-number';

function App() {
  return (
    <InputNumber
      defaultValue={3}
      onKeyDown={(e) => console.log('KeyDown', e)}
    />
  );
}

Custom Styles

This code sample demonstrates how to apply custom styles to the numeric input component to match the design requirements of your application.

import InputNumber from 'rc-input-number';

function App() {
  return (
    <InputNumber
      defaultValue={3}
      style={{ width: 100 }}
    />
  );
}