Lily Design System™

ConvertDiv

A group that converts a value from one unit into another, such as dollars into euros or miles into kilometres.

Status: beta — implemented and unit-tested in all nine headless libraries; not yet exercised in composed flows.

The root of a converter: a labelled group holding a ConvertFromDiv (the value and unit to convert from) and a ConvertIntoDiv (the value and unit to convert into). The consumer does the arithmetic and supplies any rates. The component decides no layout, performs no arithmetic, fetches no rates and carries no strings of its own.

Example

Show demo markup 
<div class="convert-div" role="group" aria-label="Currency converter"><div class="convert-from-div"><div class="convert-from-value-div"><label for="convert-from-value">Amount</label> <input id="convert-from-value" type="text" inputmode="decimal" value="100"></div><div class="convert-from-unit-div"><label for="convert-from-unit">From</label> <select id="convert-from-unit"><option value="USD">US dollars</option><option value="EUR">Euros</option></select></div></div><div class="convert-into-div"><div class="convert-into-value-div"><label for="convert-into-value">Converted</label> <input id="convert-into-value" type="text" inputmode="decimal" value="92.10" readonly></div><div class="convert-into-unit-div"><label for="convert-into-unit">Into</label> <select id="convert-into-unit"><option value="EUR">Euros</option><option value="USD">US dollars</option></select></div></div></div>
Usage example 
<ConvertDiv label="Currency converter">
  <ConvertFromDiv>
    <ConvertFromValueDiv>
      <label for="from-value">Amount</label>
      <input id="from-value" type="text" inputmode="decimal" value="100" />
    </ConvertFromValueDiv>
    <ConvertFromUnitDiv>
      <label for="from-unit">From</label>
      <select id="from-unit"><option value="USD">US dollars</option><option value="EUR">Euros</option></select>
    </ConvertFromUnitDiv>
  </ConvertFromDiv>
  <ConvertIntoDiv>
    <ConvertIntoValueDiv>
      <label for="into-value">Converted</label>
      <input id="into-value" type="text" inputmode="decimal" value="92.10" readonly />
    </ConvertIntoValueDiv>
    <ConvertIntoUnitDiv>
      <label for="into-unit">Into</label>
      <select id="into-unit"><option value="EUR">Euros</option><option value="USD">US dollars</option></select>
    </ConvertIntoUnitDiv>
  </ConvertIntoDiv>
</ConvertDiv>
Show Svelte source 
// In your Svelte component:
import ConvertDiv from "lily-design-system-svelte-headless/components/ConvertDiv/ConvertDiv.svelte";

<ConvertDiv>
  <!-- content -->
</ConvertDiv>

Usage

<ConvertDiv label="Currency converter">
  <ConvertFromDiv>
    <ConvertFromValueDiv>
      <label for="from-value">Amount</label>
      <input id="from-value" type="text" inputmode="decimal" value="100" />
    </ConvertFromValueDiv>
    <ConvertFromUnitDiv>
      <label for="from-unit">From</label>
      <select id="from-unit"><option value="USD">US dollars</option><option value="EUR">Euros</option></select>
    </ConvertFromUnitDiv>
  </ConvertFromDiv>
  <ConvertIntoDiv>
    <ConvertIntoValueDiv>
      <label for="into-value">Converted</label>
      <input id="into-value" type="text" inputmode="decimal" value="92.10" readonly />
    </ConvertIntoValueDiv>
    <ConvertIntoUnitDiv>
      <label for="into-unit">Into</label>
      <select id="into-unit"><option value="EUR">Euros</option><option value="USD">US dollars</option></select>
    </ConvertIntoUnitDiv>
  </ConvertIntoDiv>
</ConvertDiv>

Props

Prop Type Default Description
label string — (required) Accessible name of the group, set as aria-label
class string "" Appended to the base class
children slot — The content
...restProps HTML attributes — Spread onto the root <div>

Keyboard Interactions

  • None of its own; Tab moves through the consumer's controls in source order

ARIA

  • role="group" with aria-label from label; the label names the whole converter, for example "Currency converter"

When to Use

  • A converter between two units of one kind: currency, length, mass, temperature, time zone
  • A calculator-style form where one value is derived from another
  • Anywhere the pair of value-and-unit controls must be announced as one group

When Not to Use

  • Use Form + Field — for ordinary input with no derived value
  • Use MeasurementInstanceInput — for one measurement with its unit, nothing to convert into
  • Use Select — for choosing a unit without any converted value

Headless

This component decides semantics only. It decides no layout (side by side, stacked, an arrow or equals sign between the sides), no colour, no number formatting and no motion.

Styles

Target .convert-div. No default styles are included.

Testing

  • Renders <div> with the base class convert-div and appends the consumer class
  • label becomes aria-label and the root has role="group"
  • Children render; rest props reach the root

Advice

Conversion belongs to the consumer: keep the rates, rounding and Intl.NumberFormat formatting in your own code, and give the converted value a live-region or <output> if it should be announced when it changes. Format and parse numbers with the user's locale; accept the decimal separator the locale uses.

Implementation Notes

  • Root element: <div role="group"> with the base class convert-div first, then the consumer class
  • label is required: a group without a name is not announced usefully
  • restProps spread onto the root; no internal state

Related components

  • convert-from-div
  • convert-into-div
  • form
  • field

References

Lily™ and Lily Design System™ are trademarks.

Canonical contract

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

Metadata

  • Component: convert-div
  • PascalCase: ConvertDiv
  • Description: a group that converts a value from one unit into another, such as dollars into euros or miles into kilometres
  • Status: beta — implemented and unit-tested in all nine headless libraries; not yet exercised in composed flows
  • HTML tag: <div>
  • CSS class: .convert-div
  • Interactive: no

ARIA

  • role="group" and aria-label from the required label prop

Keyboard

  • None of its own

Props

  • label: string (required) -- Accessible name of the group (aria-label)
  • class: string -- Appended to the base class
  • children: slot -- The content
  • ...restProps: HTML attributes -- Spread onto the root <div>

Markdown

This page as Markdown, for people and AI tools: convert-div.md