Number Input

Numeric field with increment and decrement controls and Ark Number Input behavior

A number input built on Ark UI Number Input. The convenience <NumberInput /> adds a label, styled field, and stepper buttons. Use the compound parts when you need a custom layout or to split controls.

Quantity

import { NumberInput } from "@/components/ui/number-input";

export default function Example() {
  return <NumberInput label="Quantity" defaultValue="2" min={1} max={10} />;
}

View Code

Installation

bash

liminal add number-input

Usage

Pass min, max, step, defaultValue or controlled value / onValueChange, and disabled as needed. Props are forwarded to NumberInputRoot (Ark NumberInput.Root).

Step 0.5

import { NumberInput } from "@/components/ui/number-input";

export default function Example() {
  return (
    <NumberInput label="Step 0.5" step={0.5} min={0} max={10} defaultValue="1" />
  );
}

View Code

Examples

Disabled

Locked

<NumberInput label="Locked" defaultValue="5" disabled />

View Code

Compound API

Exports include NumberInputRoot, NumberInputLabel, NumberInputInput, NumberInputControl, NumberInputIncrementTrigger, and NumberInputDecrementTrigger.

tsx

import {
  NumberInputRoot,
  NumberInputLabel,
  NumberInputInput,
  NumberInputControl,
  NumberInputIncrementTrigger,
  NumberInputDecrementTrigger,
} from "@/components/ui/number-input";

export default function Example() {
  return (
    <NumberInputRoot min={0} max={100} defaultValue="10">
      <NumberInputLabel>Amount</NumberInputLabel>
      <div className="relative">
        <NumberInputInput />
        <NumberInputControl>
          <NumberInputIncrementTrigger />
          <NumberInputDecrementTrigger />
        </NumberInputControl>
      </div>
    </NumberInputRoot>
  );
}

API

Prop	Type	Default	Description
label	string	-	Optional label above the control.

Also accepts Ark NumberInput.Root props (min, max, step, value, onValueChange, disabled, formatOptions, etc.). See Ark Number Input.