Number Input
freeNumber input with 3 variants (input, counter, stepper) and min/max value validation.
Overview
The Number Input supports three visual variants: a plain input field, a counter with +/- buttons, and a stepper with up/down arrows. Validates numeric value ranges (min/max), not character length.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
name | String | "quantity" | Field name used in form data. |
label | String | "Quantity" | Label displayed above the input. |
placeholder | String | "0" | Placeholder text. |
variant | Enum | "input" | Visual style: "input" (plain), "counter" (- value +), or "stepper" (input with up/down arrows). |
step | Number | 1 | Increment/decrement step value. |
required | Boolean | false | Whether the field must be filled. |
min | Number | -- | Minimum allowed value. |
max | Number | -- | Maximum allowed value. |
Features
- 3 visual variants: input, counter, stepper
- Min/max value range validation (not character length)
- Configurable step increment (supports decimals)
- +/- buttons auto-disable at min/max limits
- Hides native browser spin buttons for counter/stepper
Tips
Use the counter variant for quantity selectors (e-commerce, tickets).
Set step to 0.01 for currency inputs.
min/max validate the numeric value, not character count. Use Text input if you need character length validation.
Validation
This component uses number validation. See the Validation Guide for details on configuring rules and error messages.