Preview Updated 2026-05-10

Countdown

Counts down to a target timestamp. Supports format strings with DD/HH/mm/ss/SSS placeholders.

Basic usage

target accepts a timestamp (ms), a Date, or any string parseable by Date.parse. format controls the display style; onFinish fires when it hits zero.

00:00:00

<CfCountDown :target="target" format="HH:mm:ss" size="lg" @finish="onDone" />

<CfCountDown target={target} format="HH:mm:ss" size="lg" onFinish={onDone} />

API

Prop	Type	Default	Description
`target`	`number \| Date \| string`	`—`	Target time; counter resets to zero when reached
`format`	`string`	`'HH:mm:ss'`	Tokens: DD HH mm ss SSS
`interval`	`number`	`1000`	Tick interval (ms); set to 100 for 100ms precision
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Font size tier

Events: onFinish() when reaching zero, onChange(remaining) on each tick.