Numeric Field component
in Common Forms

creates a input field for numbers

  • create input fields for numbers
  • create silders

The Numeric Field component is used to create input fields and sliders for numbers. There are several styling options to adapt its appearance and also different constraint options.

on this page:
Display & Usage , Opens In New Window Component settings , Opens In New Window
Step by step , Opens In New Window

Introduction

The Numeric Field component is used to create input fields for numbers. There are 2 different Display Modes available: Input Field and Sliders. A help text, placeholder and different constraints can be set up. The Numeric Field can also be configured for 3 types of numeric values: Numbers, Currency or Percentage. For Currency and Percentage, a percentage or currency sign will be displayed at the end of the Numeric Field.

Glossary:

Example:

Display in Form Reference

Display in Modal Overlay

Display & Usage

Display Mode

There are two different Display Modes available that define which kind of numeric fields ahould be used:

Input Field

A simple input field, that accepts only digits.

 

Slider

A slider that lets the viewer choose a numeric value.

 

Type

The Numeric Field can have 3 ypes of numeric values: Numbers, Currency or Percentage. For Currency and Percentage, a percentage or currency sign will be displayed at the end of the Numeric Field.

Number

Currency

Percentage

Field Placeholder

A Field Placeholder can be configured for the Numeric Field component, if the Display mode is set to Input Field. It will be displayed in grey faded out text in the input field. It can be used to suggest a value or tell the user what this field is for.

Slider styling options

If the Display Mode is set to Slider, there are a few additional styling options available.

Static Input

Highlighted Amount

Component settings

The Numeric Field component is available in the Common Forms component group in a Modal Content template.

tab: Name

In the Name tab, settings for the general appearance of the Numeric Field are set up.

tab: Constraints

Common Form Constraints element to restrict the display of the component (via Expressions) and to set the Mandatory Type.

tab: Styling

In the Styling tab, besides the Style (width) of the component, the Display Mode is defined.

The styling options are different if Display Mode = Input Field or if Display Mode = Slider.

Step by step

1

2

3

4

5

Related topics

Used recurring elements