V2 componentsUpdated Oct 23, 2026
To-do Mark
The box at the head of a to do: a status first, where the thing stands, and a target second, since ticking it finishes the thing at once. Use Checkbox instead for a choice beside a label that a Save submits. A native checkbox, so Space, :checked and a label click work as they do on any checkbox.
Source: packages/ui/src/components/todo-mark
import { TodoMark } from '@highlight/ui'One shape for every state; how much of the inner block is filled is the state. Open is the box alone. Drafted fills the left 60% in grey: Highlight has done its half. Ready fills the same 60% in blue: Highlight’s part is finished and there is only reading left, as with a report. Waiting dots the edge: the next move is someone else’s, and it stacks on either. Done fills the block in green. Otherwise colour is kept for the due date: due today turns the edge and any drafted half orange, overdue turns them crimson.
import { TodoMark } from '@highlight/ui' export default function TodoMarkStates() { return ( <div className="flex items-center gap-6"> <TodoMark aria-label="Open" /> <TodoMark aria-label="Drafted" progress="drafted" /> <TodoMark aria-label="Ready" progress="ready" /> <TodoMark aria-label="Waiting" waiting /> <TodoMark aria-label="Drafted, waiting" progress="drafted" waiting /> <TodoMark aria-label="Due today" due="today" /> <TodoMark aria-label="Drafted, overdue" progress="drafted" due="overdue" /> <TodoMark aria-label="Done" defaultChecked /> </div> )}Wrapped in a label with the title, so the whole row ticks it. Ticking a drafted to do wipes the rest of the block in; ticking an open one scales the block up from the centre.
import { useState } from 'react'import { TodoMark } from '@highlight/ui' export default function TodoMarkRow() { const [done, setDone] = useState(false) return ( <label className="type-ui-md text-foreground flex items-center gap-2.5"> <TodoMark progress="drafted" checked={done} onChange={(event) => setDone(event.currentTarget.checked)} /> <span className={done ? 'text-foreground-secondary line-through' : undefined}> Reply to Maya about the offsite </span> </label> )}The root, then any compound sub-components. Every part accepts className and forwards the rest of its props to the element or Base UI part beneath it.
TodoMark- An input type="checkbox" with its own drawing (todo-mark.css). checked, onChange, disabled and the rest of the input props pass through.
Props added on top of the underlying element or Base UI part.
| Prop | Type | Default | Description |
|---|---|---|---|
progress | 'drafted' | 'ready' | — | Highlight has done its half (drafted), or all of its part, leaving only a read (ready). |
waiting | boolean | — | The next move is someone else’s. |
due | 'today' | 'overdue' | — | Due later today (orange) or past due (crimson). Done drops it. |
checked / defaultChecked | boolean | — | Done. |
- The edge is drawn with an SVG mask at a 1.15 stroke, the icons’ weight, rather than a border, which would snap to whole device pixels.
- Disabled is shown, not asked: a done row’s mark, which an Undo answers instead. It keeps its drawing and drops the hover.
- Forwards its ref, so it can be a Tooltip trigger.