Number Field
Compose a numeric input from primitives: NumberField + NumberFieldContent + Increment/Decrement buttons + NumberFieldInput. Use when you need a different layout than the bundled InputNumber.
When to use NumberField vs InputNumber
InputNumber is a single-component shortcut. Reach for NumberField when you want a different layout (e.g. stacked increment/decrement buttons or icon-only triggers).
Default
Inline +/- with the input in the middle.
With bounds
Constrain the value with min, max, and step.
Disabled
Pass disabled to block the input and step buttons.
API Reference
Props, events, and slots for each sub-component.
NumberField
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| modelValue | number | — | Current value. Supports v-model. |
| min | number | — | Minimum value. |
| max | number | — | Maximum value. |
| step | number | 1 | Increment / decrement step. |
| disabled | boolean | false | Disable the field. |
Events
| Event | Description |
|---|---|
| update:modelValue | Fires with the new number. Enables v-model. |
NumberFieldInput
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | The editable number input. Forwards to reka-ui NumberFieldInput. |
NumberFieldIncrement / NumberFieldDecrement
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Step buttons. Default slot overrides the +/- icon. Forwards to reka-ui. |
NumberFieldContent
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Row wrapper that groups the input with the step buttons. |