Number Component

The Number component captures numeric input from end-users. It supports three interaction modes: standard field, range slider, and stepper. It also includes decimal control, thousands separator formatting, and currency display options.

How to read settings tables

The tables below describe each configurable option as it displays in the Unqork IDE. Values are formatted as follows: inline code — a value to type exactly as shown | Bold — a value selected from a drop-down, radio button, tab, or choice chip | ON/OFF — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked

General Settings

Setting	Field	Type	Default	Description
Property ID	`key`	Text input	`number`	The unique identifier for this component instance.

Display Settings

Field Text

Setting	Field	Type	Default	Description
Label Text	`label`	Text input	—	Identifies the component on the canvas and informs end-users what information is requested.
Placeholder Text	`placeholder`	Text input	—	Hint text displayed inside the input field to guide end-users on what to enter.
Prefix	`prefix`	Text input	—	Text or symbol displayed before the input (for example, `$`).
Suffix	`suffix`	Text input	—	Text or symbol displayed after the input.

Contextual Help

Setting	Field	Type	Default	Description
Tooltip	`tooltip`	Text input	—	A brief description that displays when a cursor is positioned over the tooltip icon.
Helper Text	`description`	Text input	—	A single line of guidance text that always displays below the input field.

Default State Options

Setting	Field	Type	Default	Description
Hide Label	`hideLabel`	Toggle	OFF	Hides the label. The label remains visible in the Module Builder.
Hide Field	`hidden`	Toggle	OFF	Hides the component from end-users but always displays in the Module Builder.
Hide Helper Text	`hideHelperText`	Toggle	OFF	Hides the helper text displayed below the input field.

Formatting

Setting	Field	Type	Default	Description
Autocomplete	`disableAutoComplete`	Toggle	ON	Lets the browser suggest and autofill previously entered values.
↳ Autocomplete Value	`autocomplete`	Drop-down	—	Specifies the type of data the browser can autofill. Visible when Autocomplete is ON. See Autocomplete Values Reference.
Show Thousands Separator	`showThousandsSeparator`	Toggle	OFF	Formats the number with thousands separators (for example, `1,000,000`).
Currency	`formatAsCurrency`	Toggle	OFF	Formats the number as a currency value. Automatically sets prefix, suffix, and thousands separator.
↳ Currency Code	`currencyCode`	Drop-down	USD	Selects the currency to use for formatting. Visible when Currency is ON.

Interaction Type

Setting	Field	Type	Default	Description
Interaction Type	`interactionType`	Choice chip	Field	Sets how end-users enter the number.

Field — Standard text input.

Setting Field Type Default Description

Default Value defaultValue Text input 0 The initial value displayed before end-user interaction.

Don't Allow Decimals disallowDecimal Toggle OFF Restricts input to whole numbers only.

↳ Decimal Places decimalLimit Number input 16 The number of decimal places allowed. Visible when Don't Allow Decimals is OFF.

↳ Decimal Separator decimalCharacter Radio button Automatic Sets the decimal separator character. Options include: Automatic (inferred from end-user locale), , (Comma), . (Period). Visible when Don't Allow Decimals is OFF.

Setting	Field	Type	Default	Description
Default Value	`defaultValue`	Text input	`0`	The initial value displayed before end-user interaction.
Don't Allow Decimals	`disallowDecimal`	Toggle	OFF	Restricts input to whole numbers only.
↳ Decimal Places	`decimalLimit`	Number input	`16`	The number of decimal places allowed. Visible when Don't Allow Decimals is OFF.
↳ Decimal Separator	`decimalCharacter`	Radio button	Automatic	Sets the decimal separator character. Options include: Automatic (inferred from end-user locale), , (Comma), . (Period). Visible when Don't Allow Decimals is OFF.

Range Slider — Draggable slider input.

Setting Field Type Default Description

Hide Minimum and Maximum Values hideMinMaxLabels Toggle OFF Hides the min and max value labels on the slider.

Hide Selected Value Label hideComponentValueLabel Toggle OFF Hides the label displaying the currently selected value.

Default Value defaultValue Text input 0 The initial slider position.

Step Increments step Text input 2 The amount the slider moves with each step.

Don't Allow Decimals disallowDecimal Toggle OFF Restricts the value to whole numbers.

↳ Decimal Places decimalLimit Number input 16 The number of decimal places allowed. Visible when Don't Allow Decimals is OFF.

Decimal Separator decimalCharacter Radio button Automatic Sets the decimal separator. Options include: Automatic, , (Comma), . (Period).

Setting	Field	Type	Default	Description
Hide Minimum and Maximum Values	`hideMinMaxLabels`	Toggle	OFF	Hides the min and max value labels on the slider.
Hide Selected Value Label	`hideComponentValueLabel`	Toggle	OFF	Hides the label displaying the currently selected value.
Default Value	`defaultValue`	Text input	`0`	The initial slider position.
Step Increments	`step`	Text input	`2`	The amount the slider moves with each step.
Don't Allow Decimals	`disallowDecimal`	Toggle	OFF	Restricts the value to whole numbers.
↳ Decimal Places	`decimalLimit`	Number input	`16`	The number of decimal places allowed. Visible when Don't Allow Decimals is OFF.
Decimal Separator	`decimalCharacter`	Radio button	Automatic	Sets the decimal separator. Options include: Automatic, , (Comma), . (Period).

Stepper — Increment and decrement buttons.

Setting Field Type Default Description

Hide Minimum and Maximum Values hideMinMaxLabels Toggle OFF Hides the min and max value labels.

Default Value defaultValue Text input 0 The initial stepper value.

Step Increments step Text input 2 The amount incremented or decremented per step button click.

Don't Allow Decimals disallowDecimal Toggle OFF Restricts the value to whole numbers.

↳ Decimal Places decimalLimit Number input 16 The number of decimal places allowed. Visible when Don't Allow Decimals is OFF.

Decimal Separator decimalCharacter Radio button Automatic Sets the decimal separator. Options include: Automatic, , (Comma), . (Period).

Setting	Field	Type	Default	Description
Hide Minimum and Maximum Values	`hideMinMaxLabels`	Toggle	OFF	Hides the min and max value labels.
Default Value	`defaultValue`	Text input	`0`	The initial stepper value.
Step Increments	`step`	Text input	`2`	The amount incremented or decremented per step button click.
Don't Allow Decimals	`disallowDecimal`	Toggle	OFF	Restricts the value to whole numbers.
↳ Decimal Places	`decimalLimit`	Number input	`16`	The number of decimal places allowed. Visible when Don't Allow Decimals is OFF.
Decimal Separator	`decimalCharacter`	Radio button	Automatic	Sets the decimal separator. Options include: Automatic, , (Comma), . (Period).

Data Settings

Data Storage

Setting	Field	Type	Default	Description
Store Data in Database	`persistent`	Toggle	ON	When set to ON, this setting this setting stores field values to the database when the module saves, end-users navigate between Panel components, or end-users navigate between workflow screens. Set to OFF to exclude this field from server-side submissions.

Note: Fields with Store Data in Database set to OFF are excluded from Plug-In component's API responses and Unqork's built-in tracker. When using a Plug-In component to remote-execute a module, any component whose value must be included in the API response requires Store Data in Database set to ON.

Actions Settings

Triggers

Setting	Field	Type	Default	Description
Trigger	`trigger`	Property ID	—	Triggers another component when the field value changes.

Validation Settings

Valid Number

Setting	Field	Type	Default	Description
Number Error Message	`errors.number`	Text input	`Must be a number`	Displays when the entered value is not a valid number.

User Input

Setting	Field	Type	Default	Description
Required	`validate.required`	Toggle	OFF	Requires a value before the module can be submitted.
Required Error Message	`errors.required`	Text input	`is required`	Displays when the required field is left empty.

Advanced Settings

Additional Validation Options

Setting	Field	Type	Default	Description
Set Minimum Number	`validate.min`	Number input	—	The minimum numeric value accepted.
Minimum Number Error Message	`errors.min`	Text input	`Must be greater than or equal to`	Displays when the entered value is below the minimum.
Set Maximum Number	`validate.max`	Number input	—	The maximum numeric value accepted.
Maximum Number Error Message	`errors.max`	Text input	`Must be less than or equal to`	Displays when the entered value exceeds the maximum.

Additional Styling

Setting	Field	Type	Default	Description
custom CSS class	`customClass`	Text input	—	A CSS class applied to the component for custom styling.

Operations Builder

This component supports the Operations Builder in Vega modules. When the module or panel runtime is set to Vega (2.0), an Event Handlers section displays in the settings panel for configuring event-driven operations.

Changelog

Date	Change
—	Initial publication.

Documentation Index