---
title: "Timer Component"
slug: "timer-component"
tags: ["module-builder", "module-builder-components"]
updated: 2026-09-15T18:15:34Z
published: 2026-09-15T18:15:34Z
canonical: "docs.unqork.io/timer-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.

# Timer Component

The Timer component displays a countdown or count-up timer to end-users and fires a when the duration completes. Use it for session timeouts, quiz timers, or any time-limited interaction.

> **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 | `timer` | 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 displays the timer label. |

### 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 | `helperText` | Text input | — | A single line of guidance text that always displays below the timer. |

### 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 timer from end-users. The timer continues running invisibly. Always displays in the Module Builder. |

### Formatting

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Set Timer Duration | `duration` | Number input | `60` | The timer duration in seconds. |
| Timer Direction | `countUp` | Radio button | **Count Down** | Sets whether the timer counts down from the duration or counts up to it. Options include: **Count Down** or **Count Up**. |
| Set Time Format | `timeFormat` | Text input | `hh:mm:ss` | The display format for the timer using moment.js tokens. Surround static text with square brackets (for example, `[Time Remaining] mm:ss`). |
| Reset When User Activity is Detected | `resetOnUserActivity` | Toggle | OFF | Resets the timer whenever the end-user interacts with the page. |

## 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. |
| ↳ Continue Where User Left Off | `continueTimer` | Toggle | OFF | Resumes the timer from the remaining time stored in the submission. Visible when **Store Data in Database** is **ON**. |

> [!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 timer reaches zero (or the set duration when counting up). |

## Advanced Settings

### 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.

---

**Changelog**

| Date | Change |
| --- | --- |
| — | Initial publication. |

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.

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.

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.