Overview
Use the Decimal input to display numeric fields that accept decimal values within a form. Configure its properties to control its calculation, validation, presentation, and style.
Adding Decimal Input to Your Form
Drag Decimal Input to Form
Drag the Decimal Input component from the Individual Items section of the Component Selector to add it to your form. The field appears on your form canvas.
Position Decimal Input in Form
To position the Decimal 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.
Configuring Decimal Input Properties
Set Decimal Display Type
Present decimal fields as a slider instead of a standard input by selecting the slider display option within the decimal input's control properties. This offers users an alternative method for interacting with numeric values.
Enable Digit Separator
Improve readability for large numbers by enabling the digit separator. This formats numbers with separators, making values easier for users to understand. Activate this option in the decimal input's control properties.
Enable Stepper Control
Allow users to adjust numeric values directly within the form by enabling 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.
See below for an example of the stepper in use in a form.
Change Decimal Places (Front and Backend)
To change the Decimal Places on the Front end of the form use the field "Decimal Places" and enter how many decimal places should be in use. If you want to always have these decimal places appear (even if they are zero) ensure that the Pad with 0 is kept on.
To change the Backend storage of the decimal place include the number in the Field properties of the decimal.
Add Adornment Text or Icons
Provide users with additional context or visual cues for the decimal input by adding 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.