Input Number

Numeric input with up/down steppers, optional unit suffix, and arrow-key stepping (Shift = 10×). Designed for designer property panels.

When To Use

Use Input Number when the user needs to enter or choose information as part of a larger form or workflow.
Start from this pattern when you need the interaction, spacing, and state treatment to match the rest of the system.
Use the examples below to choose the least complex control that still communicates the user’s next step clearly.

Do not introduce a heavier or more customizable control when a simpler native-style field is sufficient.
Do not hide required context, validation, or option meaning behind placeholder text alone.

Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.

Props

value, onChange, min, max, step, unit

import { InputNumber } from "@hilum/ui"

const [value, setValue] = React.useState(0)

<InputNumber value={value} onChange={setValue} />

Basic

Numeric input with steppers

With units

px, %, and ° unit suffixes

Decimal precision

step=0.1, precision=2

No steppers

Text-only variant without up/down buttons