Lily Design System™

Measurement Instance View

A measurement instance view displays a specific measured value in a <span> element. A measurement instance is a concrete data point such as "72 kg", "98.6 F", or "120/80 mmHg". This component is part of the Input/View pattern for measurement data, providing a read-only display of measurement values.

The component supports an optional aria-label for additional accessible context, which is useful when the displayed value alone may not convey enough meaning to screen reader users (e.g., labeling "72 kg" as "Patient weight").

Example

100 cm
Show demo markup 
<span class="measurement-instance-view">100 cm</span>
Usage example 
<script lang="ts">
    import MeasurementInstanceView from "./MeasurementInstanceView.svelte";
</script>

<MeasurementInstanceView value="72 kg" />
Show Svelte source 
// In your Svelte component:
import MeasurementInstanceView from "lily-design-system-svelte-headless/components/MeasurementInstanceView/MeasurementInstanceView.svelte";

<MeasurementInstanceView label="Label" value="Sample value" />

Usage

Display a patient weight reading:

<MeasurementInstanceView value="72 kg" label="Patient weight" />

Display a body temperature in a clinical summary:

<MeasurementInstanceView value="98.6 F" label="Body temperature" />

Display a blood pressure reading:

<MeasurementInstanceView value="120/80 mmHg" label="Blood pressure" />

Props

  • value: string (required) -- the measurement instance value to display
  • label: string (optional) -- accessible name via aria-label for additional context

Keyboard Interactions

None -- this is a display-only component.

ARIA

  • aria-label -- optionally set from the label prop to provide additional context beyond the displayed value

When to Use

  • Use to display a measurement value and unit in read-only format.
  • Use in dashboards, reports, or detail views where the measurement should be visible but not editable.
  • Use when displaying recorded values such as "72 kg", "98.6 F", or "120/80 mmHg".

When Not to Use

  • Do not use for entering measurements -- use MeasurementInstanceInput instead.

Headless

This headless component renders a <span> with the measurement value as text content and optional aria-label for additional accessible context. The consumer provides all visual styling, including typography, color coding based on value ranges, and spacing.

Styles

The consumer provides all CSS styling. The component renders with a .measurement-instance-view class for targeting. No default styles are included — this is a fully headless component.

Testing

  • Verify the component renders a <div> element with class measurement-instance-view
  • Verify aria-label -- optionally set from the label` prop to provide additional context beyond the displayed value
  • Verify pass-through attributes are applied

Advice

  • Designers: Use consistent formatting and alignment for measurement values so users can quickly scan and compare readings across a page.
  • Developers: Provide the label prop when the displayed value alone may be ambiguous to screen reader users, such as labeling "72 kg" as "Patient weight".

Implementation Notes

  • Renders as a <span> element displaying the measurement value as text content
  • A measurement instance is a specific measured value (e.g., "72 kg", "98.6 F", "120/80 mmHg")
  • Optional label prop maps to aria-label for additional accessible context
  • Text content is inherently accessible to screen readers
  • Spreads ...restProps on the root <span> element for consumer customization
  • No hardcoded user-facing strings; all text comes through props

Composition

MeasurementInstanceView is part of the measurement component family. It is the read-only counterpart to MeasurementInstanceInput and works alongside MeasurementUnitView, MeasurementSystemView, and their input counterparts.

Related components

  • measurement-instance-input — an input for entering a measurement value and unit

References

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: measurement-instance-view
  • PascalCase: MeasurementInstanceView
  • Description: a read-only display of a measurement value and unit
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <div>
  • CSS class: .measurement-instance-view
  • Interactive: no

ARIA

  • aria-label -- optionally set from the label prop to provide additional context beyond the displayed value

Keyboard

  • No keyboard interactions — this is a passive element

Props

  • value: string (required) -- the measurement instance value to display
  • label: string (optional) -- accessible name via aria-label for additional context