Lily Design System™

Measurement System View

A measurement system view displays a measurement system name in a <span> element. A measurement system is a collection of units and rules for measuring, such as "metric", "imperial", or "SI" (International System of Units). This component is part of the Input/View pattern for measurement data, providing a read-only display of measurement system names.

The component supports an optional aria-label for additional accessible context, which is useful when the abbreviated system name alone may not convey enough meaning (e.g., labeling "SI" as "International System of Units").

Example

Metric
Show demo markup 
<span class="measurement-system-view">Metric</span>
Usage example 
<script lang="ts">
    import MeasurementSystemView from "./MeasurementSystemView.svelte";
</script>

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

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

Usage

Display the current measurement system in a settings summary:

<MeasurementSystemView value="metric" />

Display an abbreviated system with accessible label expansion:

<MeasurementSystemView value="SI" label="International System of Units" />

Display imperial system in a patient profile:

<MeasurementSystemView value="imperial" label="Imperial measurement system" />

Props

  • value: string (required) -- the measurement system name 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 system name

When to Use

  • Use to display the current measurement system in read-only format.
  • Use in detail views, reports, or dashboards where the system should be visible but not editable.
  • Use alongside MeasurementInstanceView and MeasurementUnitView for complete measurement display.

When Not to Use

  • Do not use for selecting a system -- use MeasurementSystemInput instead.
  • Do not use for displaying individual units -- use MeasurementUnitView instead.

Headless

This headless component renders a <span> with the measurement system name as text content and optional aria-label for additional accessible context. The consumer provides all visual styling, including typography, abbreviation expansion, and layout.

Styles

The consumer provides all CSS styling. The component renders with a .measurement-system-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-system-view
  • Verify aria-label -- optionally set from the label` prop to provide additional context beyond the displayed system name
  • Verify pass-through attributes are applied

Advice

  • Designers: Display system names consistently using either full names or abbreviations, and consider adding tooltips for abbreviated forms like "SI".
  • Developers: Provide the label prop when displaying abbreviations (e.g., labeling "SI" as "International System of Units") for screen reader clarity.

Implementation Notes

  • Renders as a <span> element displaying the measurement system name as text content
  • A measurement system is a collection of units and rules (e.g., "metric", "imperial", "SI")
  • 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

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

Related components

  • measurement-system-input — an input for selecting a measurement system

References

Canonical contract

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

Metadata

  • Component: measurement-system-view
  • PascalCase: MeasurementSystemView
  • Description: a read-only display of a measurement system
  • 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-system-view
  • Interactive: no

ARIA

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

Keyboard

  • No keyboard interactions — this is a passive element

Props

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