number-field

5min

The component can only be used in a jig.default﻿ inside of a form﻿ component for an input of a numeric value. It displays the numeric keyboard on mobile devices when adding a value to the number field.
Number Field Preview
﻿
﻿Configuration options﻿
Some properties are common to all components, see Common component properties﻿ for a list and their configuration options.
﻿
The core structure includes: instanceId and label
Other options:
icon - There is a list of icons available, but you can customize the design with your own icon
color - There is a list of colors available. The color is used in combination with the condition when.
﻿Examples and code snippets ﻿
Number Field on Form
Form with number field
﻿
The form use the number-field property for numeric values with a stepper property to increase or decrease the number.
Examples:
See the full example using static data in GitHub.
See the full example using dynamic data in GitHub.
number-field (static)
number-field (dynamic)
datasources (dynamic)
|
children:
  - type: component.form
    instanceId: number-form
    options:
      children: 
        - type: component.number-field
          instanceId: number
          options:
            label: Number
            stepper:
              isEnabled: true
              value: 1
children:
  - type: component.form
    instanceId: number-form
    options:
      children: 
        - type: component.number-field
          instanceId: number
          options:
            label: Number
            stepper:
              isEnabled: true
              value: 1
﻿
See also
﻿Developer reference﻿
﻿﻿R﻿elated examples (Github)﻿
﻿
﻿