Timer

A timer / countdown. Segments carry data-type (days/hours/minutes/ seconds); action triggers carry data-action.

A countdown runs from start-ms down to target-ms (0 by default), so a one-minute countdown sets start-ms. Leaving start-ms at 0 means the timer has already reached its target and completes on the first tick.

:

<div
  data-controller="zag-timer"
  data-part="root"
  data-zag-timer-start-ms-value="90000"
  data-zag-timer-countdown-value="true"
  class="space-y-3"
>
  <div data-part="area" class="flex items-center gap-1 font-mono text-3xl tabular-nums">
    <div data-part="item" data-type="minutes">
      <span data-part="item-value"></span>
    </div>
    <span data-part="separator">:</span>
    <div data-part="item" data-type="seconds">
      <span data-part="item-value"></span>
    </div>
  </div>
  <div data-part="control" class="flex gap-2">
    <button
      data-part="action-trigger"
      data-action="start"
      class="bg-primary text-primary-foreground hover:bg-primary/90 rounded-lg px-3 py-1.5 text-sm font-medium"
    >
      Start
    </button>
    <button
      data-part="action-trigger"
      data-action="pause"
      class="border-input hover:bg-accent rounded-lg border px-3 py-1.5 text-sm"
    >
      Pause
    </button>
    <button
      data-part="action-trigger"
      data-action="reset"
      class="border-input hover:bg-accent rounded-lg border px-3 py-1.5 text-sm"
    >
      Reset
    </button>
  </div>
</div>

Parts

root, area, control, item, item-value, item-label, action-trigger, separator.

Values

Attribute	Type	Default	Description
data-zag-timer-start-ms-value	Number	0	Time to start from, in ms. A countdown counts down from this.
data-zag-timer-target-ms-value	Number	0	Time to stop at, in ms.
data-zag-timer-countdown-value	Boolean	false	Count down instead of up.
data-zag-timer-interval-value	Number	1000	Tick interval (ms).
data-zag-timer-auto-start-value	Boolean	false	Start automatically.

Events

Emits zag-timer:tick and zag-timer:complete.

Programmatic control

running (getter), start(), pause(), resume(), reset().