Timer

A component for counting down or tracking elapsed time.

Hours

Minutes

Seconds

Usage

<script>
  import {Timer} from 'ui-ingredients';
</script>

<Timer.Root
  startMs={1000 * 60 * 60}
  targetMs={1000 * 60 * 60 * 5}
  autoStart
  countdown
>
  <Timer.Area>
    <Timer.Item type="hours">
      <Timer.ItemValue />
    </Timer.Item>
    <Timer.Separator>:</Timer.Separator>
    <Timer.Item type="minutes">
      <Timer.ItemValue />
    </Timer.Item>
    <Timer.Separator>:</Timer.Separator>
    <Timer.Item type="seconds">
      <Timer.ItemValue />
    </Timer.Item>
  </Timer.Area>
  <Timer.Control>
    <Timer.ActionTrigger action="start">Play</Timer.ActionTrigger>
    <Timer.ActionTrigger action="pause">Pause</Timer.ActionTrigger>
  </Timer.Control>
</Timer.Root>

API Reference

Root

Prop	Default	Description
`autoStart`		`boolean` Whether the timer should start automatically
`countdown`		`boolean` Whether the timer should countdown, decrementing the timer on each tick.
`id`		`string` The unique identifier of the machine.
`ids`		`{ root?: string; area?: string; }` The ids of the timer parts
`interval`	`1000`	`number` The interval in milliseconds to update the timer count.
`onComplete`		`() => void` Function invoked when the timer is completed
`onTick`		`(details: TickDetails) => void` Function invoked when the timer ticks
`startMs`		`number` The total duration of the timer in milliseconds.
`targetMs`		`number` The minimum count of the timer in milliseconds.
`asChild`		`Snippet` Render a different element.

ActionTrigger

Prop	Default	Description
`action`		`TimerAction`
`asChild`		`Snippet` Render a different element.

Area

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Control

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Item

Prop	Default	Description
`type`		`keyof Time<number>`
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	item
`data-scope`	timer
`data-type`	The type of the item

ItemLabel

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	item-label
`data-scope`	timer
`data-type`	The type of the item

ItemValue

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	item-value
`data-scope`	timer
`data-type`	The type of the item

Separator

Prop	Default	Description
`asChild`		`Snippet` Render a different element.