An accessible number input field with increment and decrement steppers, built on React Aria Components with shadcn styling.
"use client";
import NumberField from "@/components/ui/oui-number-field";
import { Label, Input, Button, Group } from "react-aria-components";
import { Minus, Plus } from "lucide-react";
export default function Demo() {
return (
<NumberField defaultValue={10} minValue={0} className="w-56">
<Label className="text-sm font-medium">Quantity</Label>
<Group className="flex items-center gap-2">
<Button
slot="decrement"
className="inline-flex size-9 items-center justify-center rounded-md border bg-background shadow-xs data-[hovered]:bg-accent"
>
<Minus className="size-4" />
</Button>
<Input className="h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-center text-sm shadow-xs outline-none" />
<Button
slot="increment"
className="inline-flex size-9 items-center justify-center rounded-md border bg-background shadow-xs data-[hovered]:bg-accent"
>
<Plus className="size-4" />
</Button>
</Group>
</NumberField>
);
}