Number Input

A formatted number input component with support for integer and decimal formats, automatic number formatting, and validation.

1. Import

Import the Number Input component from the design system.

import { NumberInput } from "@/design-system/components/ui/number-input"

2. Props

Number Input component props.

Prop	Type	Default
label	string \| React.ReactNode	--
format	'integer' \| 'decimal'	'integer'
max	number	999999999999
allowNegative	boolean	false
decimalMaxFractionDigits	number	3
placeholder	string	--
value	number	--
onChange	(e: React.ChangeEvent<HTMLInputElement>) => void	--
wrapperClassName	string	--
inputClassName	string	--
rightOutside	React.ReactNode	--
error	string	--

3. Usages

Common Number Input patterns and configurations.

Amount

import { NumberInput } from "@/design-system/components/ui/number-input";
import { useState } from "react";

function Example() {
  const [value, setValue] = useState<number | undefined>(undefined);

  return (
    <NumberInput
      label="Amount"
      placeholder="Enter amount"
      value={value}
      onChange={(e) => setValue(e.target.value ? parseFloat(e.target.value) : undefined)}
    />
  );
}