Skip to main content

Integer Input

Overview

Use the Integer input to display numeric fields within your form. Configure its properties to control calculation, validation, presentation, and style.

Adding an Integer Input

Drag and Drop Integer Input

Drag the Integer Input component from the Individual Items section of the Component Selector to add it to your form. This action places the field onto your form canvas.

Position Integer Input in Form

To position the Integer Input field accurately within your form, observe the green indicators that appear during the drag operation. A green outline around the entire form or a section signifies the field will be appended as the last item. A green border appearing between or at the end of an existing components indicates the precise location where the field will be inserted.

Integer Input Settings

Set Integer Type

To present numeric fields as a slider instead of a standard input, select the slider display option within the integer input's control properties. This offers users an alternative method for interacting with numeric values.

Enable Digit Separator

To improve readability for large numbers, enable the digit separator. This automatically formats numbers with separators, making values easier for users to understand. Activate this option in the integer input's control properties.

Enable Stepper Control

To allow users to adjust numeric values directly within the form, enable the stepper control. This adds increment and decrement buttons to the field. After enabling, adjust the step level in the control properties to define the amount each button changes the number.

Add Adornment Text or Icons

To provide users with additional context or visual cues for the integer input, add adornment text or icons. This clarifies the field's purpose or indicates units of measure. Specify text or select an icon for either side of the field within the adornment settings.