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

PropTypeDefaultRequiredDescription
valuenumberYesCurrent numeric value.
onChange(value: number) => voidYesCalled when the value changes via typing or drag.
minnumberNoMinimum allowed value.
maxnumberNoMaximum allowed value.
stepnumber1NoStep increment used for drag and arrow keys.
suffixstringNoUnit suffix to display after the number (e.g. "px", "s", "%").
decimalsnumberNoNumber of decimal places to show. Defaults to 0 for integers, 1 for decimals.
dragSensitivitynumber0.5NoSensitivity multiplier for drag changes. Higher values change the value faster per pixel of movement.
align"left" | "center""center"NoText alignment.
variant"default" | "error" | "borderless""default"No"borderless" strips border/background so the input blends into a parent container.
disabledbooleanNoWhether the input is disabled.
placeholderstringNoPlaceholder 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