# Number Input
Numeric input with drag-to-change interaction and value formatting.

## Import/Installation

<Tabs items={[{ label: 'Package', value: 'package' }, { label: 'Registry', value: 'registry' }]}>
  <TabsContent value="package">
    ```tsx
    import { NumberInput } from "@lottiefiles/creator-plugins-ui";
    ```
  </TabsContent>

  <TabsContent value="registry">
    ```bash
    npx shadcn@latest add @lottiefiles/number-input
    ```
  </TabsContent>
</Tabs>

## Preview

<iframe src="https://creator-plugins-ds.lottiefiles.com/?story=number-input--all-variants&mode=preview" style={{ width: "100%", border: "1px solid rgba(128, 128, 128, 0.4)", borderRadius: "8px" }} height="348" title="Number Input component live preview" frameBorder="no" loading="lazy" />

## Usage

```tsx
<NumberInput value={value} onChange={setValue} min={0} max={100} suffix="px" align="left" />
```

## Props

<PropsTable
  props={[
  {
    name: "value",
    type: "number",
    required: true,
    description: "Current numeric value.",
  },
  {
    name: "onChange",
    type: "(value: number) => void",
    required: true,
    description: "Called when the value changes via typing or drag.",
  },
  {
    name: "min",
    type: "number",
    description: "Minimum allowed value.",
  },
  {
    name: "max",
    type: "number",
    description: "Maximum allowed value.",
  },
  {
    name: "step",
    type: "number",
    default: "1",
    description: "Step increment used for drag and arrow keys.",
  },
  {
    name: "suffix",
    type: "string",
    description: 'Unit suffix to display after the number (e.g. "px", "s", "%").',
  },
  {
    name: "decimals",
    type: "number",
    description: "Number of decimal places to show. Defaults to 0 for integers, 1 for decimals.",
  },
  {
    name: "dragSensitivity",
    type: "number",
    default: "0.5",
    description:
      "Sensitivity multiplier for drag changes. Higher values change the value faster per pixel of movement.",
  },
  {
    name: "align",
    type: '"left" | "center"',
    default: '"center"',
    description: "Text alignment.",
  },
  {
    name: "variant",
    type: '"default" | "error" | "borderless"',
    default: '"default"',
    description: '"borderless" strips border/background so the input blends into a parent container.',
  },
  {
    name: "disabled",
    type: "boolean",
    description: "Whether the input is disabled.",
  },
  {
    name: "placeholder",
    type: "string",
    description: "Placeholder text.",
  },
]}
/>

Built on [Base UI Number Field](https://base-ui.com/react/components/number-field). See their docs for primitive-level details.