Number Inputs

A comprehensive collection of numeric input components with drag-to-modify functionality, specialized inputs for measurements, angles, and multi-dimensional data types.

Basic Number Input (InputRoot)

The fundamental numeric input using InputRoot with etype="number". Mouse dragging is not supported.

const [value, setValue] = useState(42.5);

<InputRoot
  size="sm"
  type="number"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  placeholder="Enter a number"
/>

InputNumbers(Single)

Props

Prop	Type	Default	Description
`value`	`number[]`	-	Array of numbers for each input
`onValuesChange`	`(value: number[]) => void`	-	Callback when values change
`step`	`number`	`0.1`	Step size for drag modifications
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Input size variant
`side`	`'left' \| 'center' \| 'right'`	`'left'`	Text alignment
`prefix`	`ReactNode[]`	-	Array of prefix labels/units for each input
`suffix`	`ReactNode[]`	-	Array of suffix labels/units for each input

Types

interface InputNumbersProps extends Pick<InputRootProps, "size" | "side"> {
  step?: number;
  value: number[];
  prefix?: ReactNode[];
  suffix?: ReactNode[];
  onValuesChange?: (value: Array<number>) => void;
}

Advanced numeric input with drag-to-modify functionality and enhanced UX.

const [value, setValue] = useState([42.5]);

<InputNumbers
  size="sm"
  value={value}
  onValuesChange={setValue}
  step={0.1}
/>

InputNumbers Text Alignment

InputNumbers supports different text alignment options.

Left aligned (default)

Center aligned

Right aligned

const [leftValue, setLeftValue] = useState([123.45]);
<InputNumbers
  size="sm"
  value={leftValue}
  onValuesChange={setLeftValue}
  side="left"
/>

const [centerValue, setCenterValue] = useState([123.45]);
<InputNumbers
  size="sm"
  value={centerValue}
  onValuesChange={setCenterValue}
  side="center"
/>

const [rightValue, setRightValue] = useState([123.45]);
<InputNumbers
  size="sm"
  value={rightValue}
  onValuesChange={setRightValue}
  side="right"
/>

InputNumbers with Prefix/Suffix

InputNumbers with prefixes or suffixes for better context.

prefix

suffix

const [price, setPrice] = useState([299.99]);
<InputNumbers
  size="sm"
  value={price}
  onValuesChange={setPrice}
  prefix={["$"]}
  step={0.01}
/>

const [weight, setWeight] = useState([75.5]);
<InputNumbers
  size="sm"
  value={weight}
  onValuesChange={setWeight}
  suffix={["kg"]}
  step={0.1}
/>

InputNumbers (Grouped)

Multiple numeric inputs grouped together with coordinated drag selection.

Position (x, y, z)

const [position, setPosition] = useState([10.5, 20.3, -5.8]);
<InputNumbers
  size="sm"
  value={position}
  onValuesChange={setPosition}
  prefix={["x", "y", "z"]}
  step={0.1}
/>

For specialized input components with built-in units and advanced data types, see Specialized Input Components.

Drag Interaction Features

All InputNumbers components support advanced drag interactions:

Vertical drag: Select multiple inputs by dragging up/down
Horizontal drag: Modify selected values by dragging left/right
Modifier keys:
- Shift + drag: 5x step size
- Alt + drag: 0.2x step size