---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-timer
widgetname: Timer
description: "This documentation details a customizable timer widget for displaying countdown or stopwatch durations within a UI"
---

# Timer

![Screenshot showing a countdown timer icon.](images/countdowntimer_icon.png)

## Overview

The Timer widget places a timer in a UI Page that can be configured to run as a countdown timer or as a stopwatch. The user can configure the widget with an end date or with a specific time to countdown until the timer expires. Separate warning levels can also be configured so that the timer can change color to indicate that those thresholds have been reached. When the timer reaches zero, the time values on the widget will flash to indicate the final value has been reached.

![Screenshot showing a countdown timer configuration interface.](images/countdowntimer_preview.gif)

## General Steps

{% include-markdown 'includes/pages/ui_widgets_general_steps.md' %}

![Screenshot showing a countdown timer interface with start, pause, and reset buttons.](images/countdowntimer_general.png)

## Widget Customization

1. Optionally, in the **Style** tab, you can define a Border Width and Color.

    ![timerStyle](images/timer_style.png)

2. In the **Setup** tab, you can configured the widget using the following fields:

    * **Display Mode** - Choose between Standard or Minimal display modes.
    * **Timer Type** - Select the type of timer to use. Options include Countdown Timer or Stopwatch.
  
    If the Timer Type is Countdown:

    * **Countdown by** - Specify whether to countdown by Date or Time.
        * If Date is selected, choose the **End Date** and the **Time Format** from the available options.
        * If Time is selected, choose values for Days, Hours, Minutes and Seconds.
    * **Show Time Units** - Determine whether to display the time units. This option is set to `true` by default.
    * **Show End Date** - Decide whether to display the end date. This option is set to `false` by default.
    * **Use Warning Colors** - Specify whether to use warning colors. This option is set to `false` by default. If enabled, you should define the **Warning Date** and **Danger Date**.

    If the Timer Type is Stopwatch:

    * **Auto Start** - Determine whether the timer should start automatically upon component initialization. This option is set to `true` by default.
    * **Start Date** - Set the start date for the stopwatch.
    * **Time Format** - Select the desired time display format.

    === "Countdown Timer"

        ![Screenshot showing a countdown timer setup with options for selecting a time display format.](images/countdowntimer_setup.png)

    === "Stopwatch"

        ![Screenshot showing a countdown timer setup with stopwatch options.](images/countdowntimer_setup_stopwatch.png)

3. Optionally, define the **Links** between this widget and other elements of the UI Page.

    ![timerLinks](images/timer_links.png)

4. By saving and closing the settings, the widget will be changed accordingly.