Lab results

A named collection of supplied laboratory results with units, reference intervals, report times and amendment notes.

Preview

Example result
Final
Result4.2 units
Reference interval3–5 units
Additional result
Pending

In action

Report received

Laboratory inbox / Example data

Reported measurement
Amended
Result24 units
Reference interval20–30 units
Updated 6 Sep, 10:15 CEST
This amended result replaces the earlier report
Additional analysis
Pending
The laboratory has not released this result
Sample analysis
Unavailable
No result was included in the report

When to use

Use it for

Review numeric and qualitative results from an existing report.
Supply report states and flags from the source; the component never derives them from a reading.
Attach note to explain an amendment or unavailable result; provide stable result ids.

Not for

Calculating diagnoses, critical-result alerts or treatment recommendations.
Implying that final means clinically normal or that an amended value is the original report.
Using the synthetic example values as clinical reference intervals.

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 { LabResults } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/lab-results.

2. Vendor the source

npx @noorddev/vlak-cli add lab-results

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/lab-results.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 { LabResults } from "@noorddev/vlak-react";

<LabResults label="Latest report" results={[
  { id: "reported", name: "Reported measurement", value: 24, unit: "units", minimum: 20, maximum: 30, status: "amended", note: "Replaces the earlier report" },
  { id: "analysis", name: "Additional analysis", status: "pending" },
  { id: "sample", name: "Sample analysis", status: "unavailable", note: "The laboratory did not release a result" },
]} />

Props

LabResults

Supplied laboratory results with explicit report states and optional reference intervals.

Prop	Type	Default	Description
`label`required	`string`		Accessible collection name.
`results`required	`readonly LabResult[]`
`emptyLabel`	`string`	`"No results available"`

Also accepts Omit<HTMLAttributes<HTMLUListElement>, "results">.

Accessibility

The root is a native list named by label, with one item per result and a forwarded list ref.
Final, pending, unavailable and amended states are explicit text; caller-supplied flags supplement the report state.
Pending and unavailable results hide any supplied value. Zero and qualitative result strings remain valid readings.
Numeric reference intervals reuse ReferenceRange, including its visible text equivalent and invalid-bound handling.
An amended report without a reading explicitly says result unavailable. No live announcements are added automatically.

Markup

<ul class="rs-lab-results" aria-label="Latest report">
  <li class="rs-lab-results-item" data-status="amended"><div class="rs-lab-results-head"><p class="rs-lab-results-name">Reported measurement</p><p class="rs-lab-results-status">Amended</p></div><p class="rs-lab-results-reading"><span class="rs-lab-results-reading-label">Result</span><span class="rs-lab-results-reading-value">24 <span class="rs-lab-results-unit">units</span></span></p><p class="rs-lab-results-note">Replaces the earlier report</p></li>
  <li class="rs-lab-results-item" data-status="pending"><div class="rs-lab-results-head"><p class="rs-lab-results-name">Additional analysis</p><p class="rs-lab-results-status">Pending</p></div></li>
</ul>

Classes

.rs-lab-results.rs-lab-results-item.rs-lab-results-head.rs-lab-results-name.rs-lab-results-status.rs-lab-results-reading.rs-lab-results-reading-label.rs-lab-results-reading-value.rs-lab-results-unit.rs-lab-results-note.rs-lab-results-time

Depends on

/reference-range