Number Input

"use client";

import { NumberInput } from "@/ui";

export default function Demo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <NumberInput defaultValue={2026} thousands prefix="$" suffix="USD" aria-label="Amount in US dollars" />
      <NumberInput defaultValue={5} min={0} max={100} step={5} thousands aria-label="Quantity" />
      <NumberInput defaultValue={3.14} step={0.01} thousands placeholder="0.00" aria-label="Price" />
      <NumberInput defaultValue={5} positiveInteger indicator={false} aria-label="Count" />
    </div>
  );
}

"use client";

import { InputGroup, NumberRoot } from "@/ui";

export default function Demo() {
  return (
    <div className="w-full max-w-md rounded-lg border bg-muted/40 p-4">
      <p className="mb-3 text-sm font-medium">Assemble from Input parts</p>
      <p className="mb-3 text-sm text-muted-foreground">
        The stepping cue, thousands separators and prefix/suffix are composite features.
        For a fully custom panel, combine <code className="rounded bg-muted px-1 py-0.5 text-xs">InputGroup</code>,{" "}
        <code className="rounded bg-muted px-1 py-0.5 text-xs">NumberRoot</code> and plain
        content, driving the value yourself.
      </p>
      <InputGroup className="max-w-3xs">
        <span className="pr-1 text-sm text-muted-foreground">Qty</span>
        <NumberRoot defaultValue="1" inputMode="numeric" aria-label="Quantity" />
        <span className="pr-1 text-sm text-muted-foreground">pcs</span>
      </InputGroup>
    </div>
  );
}