Getting ready together
Fictional coordination tasks. Changes stay in this example; unknown completion stays unmarked.
Confirm the preferred contact method
Care plan
Lists supplied care tasks, owners, due labels, and statuses with controlled completion requests.
Preview
Confirm the next visit
In action
When to use
Use it for
- Existing care plans with named owners and application-supplied deadlines and task status.
- Supply an explicit completed boolean and onCompletedChange to enable a completion control.
Not for
- Generating treatment plans or deriving task urgency from dates.
- Treating an unknown completion state as unchecked or showing success before the caller updates the record.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { CarePlan } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/care-plan.
2. Vendor the source
npx @noorddev/vlak-cli add care-plan
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/care-plan.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { CarePlan } from "@noorddev/vlak-react";
<CarePlan tasks={[{ id: "visit", title: "Confirm the next visit", owner: "Robin Ellis", dueLabel: "17 September", status: "Open", completed: false }]} />
// Pass onCompletedChange(taskId, completed) to request changes.
// The caller persists completion and supplies updated tasks and pending states.Props
CarePlan
A supplied care task list with controlled completion requests and explicit pending states.
| Prop | Type | Default | Description |
|---|---|---|---|
tasksrequired | readonly CarePlanTask[] | ||
description | ReactNode | ||
emptyLabel | ReactNode | "No care tasks supplied" | |
onCompletedChange | (taskId: string, completed: boolean) => void | Requests a change only. Persist it and return updated tasks from the caller. |
Also accepts HTMLAttributes<HTMLDivElement>.
Keyboard
| Keys | Does |
|---|---|
| Tab | Moves between enabled completion checkboxes when editing is available. |
| Space | Requests a completion change through onCompletedChange. The checkbox stays at the supplied value until the caller updates it. |
Accessibility
- Task labels name native checkboxes with at least 44px label targets; the recorded status describes each checkbox.
- Pending or disabled tasks cannot be changed. Pending text is visible in a polite status region with aria-busy on the task.
- Tasks with unknown completion or no change callback render as static text, without an invented checkbox state.
- Owner and due-date omissions are explicitly marked as not supplied. Dates are never parsed or inferred.
Markup
<div class="rs-care-plan" role="group" aria-label="Care plan"><ul class="rs-care-plan-list"><li class="rs-care-plan-row"><p class="rs-care-plan-title">Confirm the next visit</p><dl class="rs-care-plan-metadata"><div class="rs-care-plan-field"><dt class="rs-care-plan-label">Owner</dt><dd class="rs-care-plan-value">Robin Ellis</dd></div><div class="rs-care-plan-field"><dt class="rs-care-plan-label">Due</dt><dd class="rs-care-plan-value">17 September</dd></div><div class="rs-care-plan-field"><dt class="rs-care-plan-label">Status</dt><dd class="rs-care-plan-value">Open</dd></div></dl></li></ul></div>
Classes
.rs-care-plan.rs-care-plan-description.rs-care-plan-list.rs-care-plan-row.rs-care-plan-title.rs-care-plan-check.rs-care-plan-detail.rs-care-plan-metadata.rs-care-plan-field.rs-care-plan-label.rs-care-plan-value.rs-care-plan-pending.rs-care-plan-empty