Use the buttons or type to adjust the quantity.
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { InputNumber } from "@/components/ui/input-number"
export function InputNumberDemo() {
return (Installation
pnpm slabui add input-number
Usage
import { InputNumber } from "@/components/ui/input-number"<InputNumber />API Reference
InputNumber
A numeric input component with increment and decrement buttons.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | string | Controlled value of the input | |
defaultValue | number | Initial value of the input | |
multiple | number | 1 | Step value for increment/decrement operations |
negative | boolean | false | Whether to allow negative numbers |
editable | boolean | true | Whether the input can be manually edited |
disabled | boolean | false | Whether the input is disabled |
variant | "outline" | "default" | "blend" | "outline" | Visual style of the component |
size | "default" | "sm" | "lg" | "default" | Size of the input and buttons |
invalid | boolean | false | Whether the input is in an invalid state |
delay | number | 800 | Delay in milliseconds before validating input changes |
onChange | (value, numericValue) => void | Callback fired when the value changes |
<InputNumber
defaultValue={10}
multiple={5}
negative={true}
variant="outline"
onChange={(value, numericValue) => console.log(numericValue)}
/>