Number Field
An input field optimized for numeric values with increment and decrement buttons.
Installation
$ npx shadcn@latest add "/r/number-field.json"
Usage
Props
NumberField
| Prop | Type | Default | Description |
|---|
| defaultValue | number | - | The default value. |
| value | number | - | The current value. |
| onValueChange | (value: number) => void | - | Callback when the value changes. |
| min | number | - | The minimum value. |
| max | number | - | The maximum value. |
| step | number | 1 | The increment/decrement step. |
NumberFieldGroup
| Prop | Type | Default | Description |
|---|
| children | React.ReactNode | - | The input and buttons. |
| className | string | - | Additional CSS classes. |
NumberFieldInput
| Prop | Type | Default | Description |
|---|
| className | string | - | Additional CSS classes. |
NumberFieldIncrement
| Prop | Type | Default | Description |
|---|
| children | React.ReactNode | - | Custom increment icon. |
| className | string | - | Additional CSS classes. |
NumberFieldDecrement
| Prop | Type | Default | Description |
|---|
| children | React.ReactNode | - | Custom decrement icon. |
| className | string | - | Additional CSS classes. |