The NUMBER_STEPPER component provides a numeric input field with increment and decrement buttons, allowing users to adjust a value within a configurable range.
🛝 Use the Dynamic Form Playground to see the Number Stepper component in action and try out different configurations
| Property | Type | Required | Description |
|---|---|---|---|
type | 'NUMBER_STEPPER' | Yes | Specifies the field type as NUMBER_STEPPER. |
id | string | Yes | Unique identifier for the field. The field's value is stored in the form state under this key. |
renderName | string | No | Optional name added as data-render-name attribute to locate the rendered element in the DOM. |
label | string | No | Label text displayed above the options. Supports translation and string interpolation. |
value | number | No | The field's initial value. |
note | string | No | Informational note displayed when there are no errors. |
infoIcon | DfInfoIconConfig | No | Info icon with popover. Object with popoverText (string, required) and popoverDirection ('top', 'bottom', 'left', 'right'). |
validators | array | No | Validation rules for the field. Common type: REQUIRED. Each validator has type and optional errorMessage. |
testId | string | No | Test identifier for automated testing. Set as data-testid attribute. |
acl | array | No | Access control rules for field visibility/editability. Each rule has state ('hidden', 'readonly', 'disabled', 'visible', 'editable') and optional condition (Filtrex expression). |
spacing | string | No | Margin spacing before the next field: 'NONE' (0px), 'XS' (8px), 'S' (16px), 'M' (24px), 'L' (32px), 'XL' (40px), 'XXL' (48px). |
Note: This component does not support the hint property, unlike most other interactive components. The columnSpan property is also not supported, meaning the component always spans the full width of the form (12 columns).
| Property | Type | Required | Description |
|---|---|---|---|
decrementAriaLabel | string | No | Sets the aria-label for the decrement button. |
incrementAriaLabel | string | No | Sets the aria-label for the increment button. |
inputAriaLabel | string | No | Sets the aria-label for the input of the number stepper. |
invalidFormatErrorMessage | string | No | Custom error message to display when the value has an invalid format. |
max | number | No | Sets the maximum accepted number in the stepper. Default: 100 |
min | number | No | Sets the minimum accepted number in the stepper. Default: 0 |
prefix | string | No | Optional prefix displayed in the input area |
size | string | No | Defines the size of the number stepper ('big' or 'normal').In retail, the default value is 'big' and in expert the default value is 'normal' |
step | number | No | Sets the step size. Controls the increment/decrement applied when clicking the stepper buttons, and restricts validation to values that match the step. Default: 1 |
suffix | string | No | Optional suffix displayed in the input area |
valueOutsideRangeErrorMessage | string | No | Custom error message to display when the value is not within the allowed range. |
{
"id": "numberOfClaims",
"type": "NUMBER_STEPPER",
"label": "Does the policy holder have previous claims?"
}{
"id": "numberOfDependants",
"type": "NUMBER_STEPPER",
"label": "How many dependants live in the household?",
"min": 1,
"max": 10,
"step": 1,
"value": 1
}{
"id": "annualMileage",
"type": "NUMBER_STEPPER",
"label": "Estimated annual mileage (in thousands of km)",
"min": 5,
"max": 50,
"step": 5,
"errorMessage": "Please choose a mileage between 5,000 and 50,000 km, in steps of 5,000.",
"validators": [
{
"type": "REQUIRED"
}
]
}{
"id": "monthlyContribution",
"type": "NUMBER_STEPPER",
"label": "Monthly contribution",
"min": 50,
"max": 1000,
"step": 50,
"value": 100,
"prefix": "€",
"suffix": "/month"
}For complete API documentation, see DfNumberStepperConfig.
For Aquila component documentation and design guidelines, see Number Stepper - Aquila Design System.