Statistic Countdown Target

ProNew

A statistic that counts down to a date as days, hours and minutes, announces only once a minute and shows a done message when the time arrives.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

title

doneLabel

Guide and examples

When to use it

Use this when you count to an event: a launch, a sale ending, a trial expiring, a maintenance window.

Do not use it when the time left is not important to read second by second (show a plain relative date such as in 3 days).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`title`	`string`	required	-
`target`	`Date \| number \| string`	required	The moment to count down to.
`doneLabel`	`string`	optional	Shown when the time has passed.
`onDone`	`() => void`	optional	Called once when the target is reached.
`now`	`() => number`	optional	Clock override for tests and previews: returns the current time in ms.

Accessibility

The per-second digits are aria-hidden; a polite status carries the minute-level sentence.
The status re-announces at most once a minute.
The done state is text, not just a changed colour.

Testing

The pattern ships with a Testing Library test (statistic-countdown-target.test.tsx) that covers the displayed parts, the spoken minute-level status, finishing once and a past target.

Guide and examples

When to use it

Use this when you count to an event: a launch, a sale ending, a trial expiring, a maintenance window.

Do not use it when the time left is not important to read second by second (show a plain relative date such as in 3 days).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`title`	`string`	required	-
`target`	`Date \| number \| string`	required	The moment to count down to.
`doneLabel`	`string`	optional	Shown when the time has passed.
`onDone`	`() => void`	optional	Called once when the target is reached.
`now`	`() => number`	optional	Clock override for tests and previews: returns the current time in ms.

Accessibility

The per-second digits are aria-hidden; a polite status carries the minute-level sentence.
The status re-announces at most once a minute.
The done state is text, not just a changed colour.

Testing

The pattern ships with a Testing Library test (statistic-countdown-target.test.tsx) that covers the displayed parts, the spoken minute-level status, finishing once and a past target.