Measurement value

A supplied scientific reading with units, symmetric uncertainty, optional scientific notation and explicit availability.

Preview

Sample mass

1.230± 0.005g

Supplied uncertainty

Balance record, sample 042

In action

Weighing record

Sample 042 / Balance record

Sample mass

1.230± 0.005g

Expanded uncertainty supplied with the record

Balance 03, 6 September

Replicate measurement

Measurement pending

The next reading has not been received

When to use

Use it for

Scientific observations with application-supplied uncertainty and units.
Pass a string to preserve significant figures such as 1.230; scientific notation formats numeric inputs without selecting a precision.
Use uncertaintyLabel to name the supplied uncertainty convention.

Not for

Inferring significant figures, a confidence level, a distribution or unit conversions.
Treating zero as missing, or using a negative uncertainty to express asymmetric bounds.

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

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

2. Vendor the source

npx @noorddev/vlak-cli add measurement-value

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/measurement-value.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 { MeasurementValue } from "@noorddev/vlak-react";

<MeasurementValue label="Sample mass" value="1.230" uncertainty={0.005} unit="g" source="Balance record, sample 042" />
<MeasurementValue label="Small reading" value={0.0000123} notation="scientific" unit="A" />
<MeasurementValue label="Next measurement" status="pending" />

Props

MeasurementValue

A supplied scientific reading without inferred precision, confidence or unit conversion.

Prop	Type	Default	Description
`label`required	`ReactNode`
`value`	`string \| number \| null`		Strings preserve supplied significant figures. Non-finite numbers are unavailable.
`unit`	`string`
`uncertainty`	`number \| null`		A supplied symmetric, non-negative uncertainty in the same unit as value.
`uncertaintyLabel`	`ReactNode`
`notation`	`"plain" \| "scientific"`	`"plain"`	Scientific notation changes numeric formatting only; supplied strings are unchanged.
`status`	`"pending" \| "unavailable" \| "recorded"`	`"recorded"`
`source`	`ReactNode`
`description`	`ReactNode`

Also accepts HTMLAttributes<HTMLDivElement>.

Accessibility

The reading, plus-minus uncertainty, unit and source remain visible text.
Pending and unavailable states suppress the numeric reading. Zero is preserved, while empty strings and non-finite values are unavailable.
Negative or non-finite uncertainty is explicitly unavailable without hiding a valid reading.
The div ref, native attributes, className and style pass through. No automatic announcements or interactive stops are added.

Markup

<div class="rs-measurement-value"><p class="rs-measurement-value-label">Sample mass</p><p class="rs-measurement-value-reading"><span class="rs-measurement-value-number">1.230</span><span class="rs-measurement-value-uncertainty">± 0.005</span><span class="rs-measurement-value-unit">g</span></p><p class="rs-measurement-value-context">Supplied uncertainty</p></div>

Classes

.rs-measurement-value.rs-measurement-value-label.rs-measurement-value-reading.rs-measurement-value-number.rs-measurement-value-uncertainty.rs-measurement-value-unit.rs-measurement-value-context