TALY - The Allianz Library

Number Stepper Component

1. Overview

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

2. Key Features

  • Increment and decrement buttons combined with direct numeric input
  • Configurable minimum, maximum, and step values to constrain the accepted range
  • Built-in validation with a customizable error message when the value falls outside the allowed range
  • Optional prefix and suffix displayed inside the input area (e.g. currency symbols or units)
  • Responsive sizing that switches to a compact variant on mobile viewports
  • Translation and string interpolation support for label and note

3. Configuration Properties

Base Properties

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).

Component Specific Properties

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. 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.

4. Configuration Examples

Basic Number Stepper

Example :
{
  "id": "numberOfClaims",
  "type": "NUMBER_STEPPER",
  "label": "Does the policy holder have previous claims?"
}

Custom Range and Step

Example :
{
  "id": "numberOfDependants",
  "type": "NUMBER_STEPPER",
  "label": "How many dependants live in the household?",
  "min": 1,
  "max": 10,
  "step": 1,
  "value": 1
}

Custom Error Message and validation

Example :
{
  "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"
    }
  ]
}

Prefix and Suffix

Example :
{
  "id": "monthlyContribution",
  "type": "NUMBER_STEPPER",
  "label": "Monthly contribution",
  "min": 50,
  "max": 1000,
  "step": 50,
  "value": 100,
  "prefix": "€",
  "suffix": "/month"
}

5. API Reference

For complete API documentation, see DfNumberStepperConfig.

For Aquila component documentation and design guidelines, see Number Stepper - Aquila Design System.

results matching ""

    No results matching ""