Lily Design System™

Measurement System Input

A measurement system input provides a text field for entering a measurement system name, such as "metric", "imperial", or "SI". A measurement system is a collection of units and rules for measuring physical quantities.

The component uses aria-label for accessible labeling in a headless context, and the value prop is two-way bindable for reactive form integration. It supports required and disabled states for form validation and conditional interactivity.

Example

Show demo markup 
<select class="measurement-system-input" aria-label="System"><option>Metric</option><option>Imperial</option></select>
Usage example 
<script lang="ts">
    import MeasurementSystemInput from "./MeasurementSystemInput.svelte";
    let system = $state("");
</script>

<MeasurementSystemInput label="Measurement system" bind:value={system} />
Show Svelte source 
// In your Svelte component:
import MeasurementSystemInput from "lily-design-system-svelte-headless/components/MeasurementSystemInput/MeasurementSystemInput.svelte";

<MeasurementSystemInput label="Label" />

Usage

Measurement system selection in a user preferences form:

<MeasurementSystemInput label="Measurement system" value={system} />

Required measurement system in a clinical configuration:

<MeasurementSystemInput label="System" value={system} required />

Disabled system input showing the current setting:

<MeasurementSystemInput label="Measurement system" value="metric" disabled />

Props

  • label: string (required) -- accessible name via aria-label
  • value: string (default: "", bindable) -- bindable measurement system name
  • required: boolean (default: false) -- whether the field is required
  • disabled: boolean (default: false) -- whether the field is disabled
  • ...restProps: Any additional HTML attributes passed to the <input> element

Keyboard Interactions

  • Native <input type="text"> keyboard behavior (typing, selection, clipboard)

ARIA

  • aria-label -- set from the label prop to provide an accessible name

When to Use

  • Use for selecting a measurement system (metric, imperial, etc.).
  • Use in settings or configuration forms where measurement system selection affects how values are interpreted.
  • Use when the set of valid systems may vary or is not fully known at design time.

When Not to Use

  • Do not use for selecting individual units -- use MeasurementUnitInput instead.
  • Do not use for display only -- use MeasurementSystemView instead.
  • Do not use when the valid options are a fixed, known set -- consider Select or RadioGroup instead.

Headless

This headless component provides a text input with aria-label for accessible naming and two-way bindable value for reactive form integration. The consumer provides all visual styling, including input dimensions, borders, and any autocomplete or suggestion UI.

Styles

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

Testing

  • Verify the component renders a <input> element with class measurement-system-input
  • Verify aria-label -- set from the label` prop to provide an accessible name
  • Verify keyboard interactions work correctly
  • Verify pass-through attributes are applied

Advice

  • Designers: If the measurement system options are limited, consider pairing with a dropdown or autocomplete pattern for faster selection.
  • Developers: Validate system names on the consumer side if only specific values are acceptable, as this component accepts free-text input.

Implementation Notes

  • Uses <input type="text"> with aria-label for accessible naming
  • A measurement system is a collection of units (e.g., "metric", "imperial", "SI")
  • Bindable value prop for two-way data binding via two-way binding
  • Supports required and disabled HTML attributes
  • Spreads ...restProps on the root <input> element
  • All text content comes through props for internationalization

Composition

MeasurementSystemInput is part of the measurement component family. It works alongside MeasurementSystemView, MeasurementUnitInput, MeasurementUnitView, MeasurementInstanceInput, and MeasurementInstanceView.

Related components

  • measurement-system-view — a read-only display of a measurement system
  • text-input — a single-line text input field <input type="text">

References

Canonical contract

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

Metadata

  • Component: measurement-system-input
  • PascalCase: MeasurementSystemInput
  • Description: an input for selecting 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: <input>
  • CSS class: .measurement-system-input
  • Interactive: no

ARIA

  • aria-label -- set from the label prop to provide an accessible name

Keyboard

  • Native <input type="text"> keyboard behavior (typing, selection, clipboard)

Props

  • label: string (required) -- accessible name via aria-label
  • value: string (default: "", bindable) -- bindable measurement system name
  • required: boolean (default: false) -- whether the field is required
  • disabled: boolean (default: false) -- whether the field is disabled
  • ...restProps: Any additional HTML attributes passed to the <input> element