Number Input
Numeric input with drag-to-change interaction and value formatting.
Import/Installation
import { NumberInput } from "@lottiefiles/creator-plugins-ui";Preview
Usage
<NumberInput value={value} onChange={setValue} min={0} max={100} suffix="px" align="left" />Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| value | number | — | Yes | Current numeric value. |
| onChange | (value: number) => void | — | Yes | Called when the value changes via typing or drag. |
| min | number | — | No | Minimum allowed value. |
| max | number | — | No | Maximum allowed value. |
| step | number | 1 | No | Step increment used for drag and arrow keys. |
| suffix | string | — | No | Unit suffix to display after the number (e.g. "px", "s", "%"). |
| decimals | number | — | No | Number of decimal places to show. Defaults to 0 for integers, 1 for decimals. |
| dragSensitivity | number | 0.5 | No | Sensitivity multiplier for drag changes. Higher values change the value faster per pixel of movement. |
| align | "left" | "center" | "center" | No | Text alignment. |
| variant | "default" | "error" | "borderless" | "default" | No | "borderless" strips border/background so the input blends into a parent container. |
| disabled | boolean | — | No | Whether the input is disabled. |
| placeholder | string | — | No | Placeholder text. |
Built on Base UI Number Field. See their docs for primitive-level details.
Last updated: August 5, 2026 at 11:47 AMEdit this page