Ring Progress Goal Tracker

ProNew

A goal ring with the percentage in the middle, a button to log progress and a reached state that stops accepting more and says so.

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.

goal1

initial1

unit

step1

label

Guide and examples

When to use it

Use this when people track a daily or weekly target and log progress in steps: water, steps, study hours, sales calls.

Do not use it when progress comes from another system and cannot be logged by hand (show a read-only ring).

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
`goal`	`number`	required	-
`initial`	`number`	optional	-
`unit`	`string`	required	-
`step`	`number`	optional	What one press of the button adds. Default 1.
`label`	`string`	required	-
`onChange`	`(value: number) => void`	optional	-

Accessibility

The ring has a text name; the numbers are also in words beside it.
Goal reached is a status message, not only a green ring.
Undo gives a way back from a mis-tap.

Testing

The pattern ships with a Testing Library test (ring-progress-goal-tracker.test.tsx) that covers words and percentage, adding progress, the reached state with Undo and the lower bound.

Guide and examples

When to use it

Use this when people track a daily or weekly target and log progress in steps: water, steps, study hours, sales calls.

Do not use it when progress comes from another system and cannot be logged by hand (show a read-only ring).

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
`goal`	`number`	required	-
`initial`	`number`	optional	-
`unit`	`string`	required	-
`step`	`number`	optional	What one press of the button adds. Default 1.
`label`	`string`	required	-
`onChange`	`(value: number) => void`	optional	-

Accessibility

The ring has a text name; the numbers are also in words beside it.
Goal reached is a status message, not only a green ring.
Undo gives a way back from a mis-tap.

Testing

The pattern ships with a Testing Library test (ring-progress-goal-tracker.test.tsx) that covers words and percentage, adding progress, the reached state with Undo and the lower bound.