---
title: "Number Component"
slug: "number-component"
tags: ["module-builder", "module-builder-components"]
updated: 2026-09-15T17:55:27Z
published: 2026-09-15T17:55:27Z
canonical: "docs.unqork.io/number-component"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 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 UnqorkAI platform. 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](/unqorkai/docs/autocomplete-values). |
| 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**. |

  

> **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)**. |

  

> **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)**. |

## 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](/unqorkai/docs/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.

The Number data type accepts integer or floating point values. The number data type does not use quotes around numerical values.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

Formats the value as currency, applying the Prefix, Suffix, and Thousands Separator settings.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

If you allow decimal places, use this setting to limit the number of decimal places the end-user can enter.

APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services.

Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.

The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience.

The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience.