Number stepper input

The Number Stepper Input component allows users a way to enter numerical values. Users can easily adjust values by utilizing increment and decrement buttons, ensuring accurate input and improving the overall user experience. This component is commonly used in apps for tasks such as adjusting settings, selecting quantities, or entering precise values.

Properties Settings

Link with

Specify the column where user interaction data will be saved in the data table.

This setting is exclusive to the Detail page and ensures seamless integration between the Number Stepper Input component and the linked data table.

Label & Icon

Assign a descriptive label to the component to indicate its purpose or function within the app. You can also choose an icon that visually represents numerical values.

Initial Value

Set an initial value, which represents the starting point of the numerical input. This allows users to have a predefined value as a reference.

Layout

Determine the step value for the Number Stepper Input component. This defines the increment or decrement value when users interact with the associated buttons. It enables precise adjustments and provides flexibility in numerical input.

Hidden

Activate this checkbox to hide the component from the user interface. This can be useful when controlling the component's visibility based on specific conditions or user interactions.

Disabled

Configure the permission for users to change the number with the number stepper.

You may consider whether or not disabling the ability to interact with a component in many cases. For instance, you may showcase information in read-only mode, prevent accidental changes to critical data, or disable the component until users go through several steps.

Tag

Name the component for use with the Typescript.

currentPage.components.componentTag

Interactions settings

You can empower the "Number Stepper input" component and enhance the user experience with it by specifying the component's behavior when a user changes the value on the component.

You can choose one from a wide range of supported actions, such as updating your table or sending a notification on the interaction.

Explore all the available types of actions and find detailed instructions on their configuration here.

pageItem action