Lily Design System™

ConvertIntoValueDiv

The converted value, such as a text input showing the number of euros.

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

The converted value: a plain wrapper for the consumer's own control, typically a labelled text input (read-only, or editable for a two-way converter) or an <output>. 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-into-value-div"><label for="convert-into-value">Converted</label> <input id="convert-into-value" type="text" inputmode="decimal" value="92.10" readonly></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 ConvertIntoValueDiv from "lily-design-system-svelte-headless/components/ConvertIntoValueDiv/ConvertIntoValueDiv.svelte";

<ConvertIntoValueDiv>
  <!-- content -->
</ConvertIntoValueDiv>

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
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

  • No ARIA attributes of its own; the consumer's label and control inside it carry the name

When to Use

  • Giving CSS a stable hook for this part of a converter
  • Keeping the label and control of this part together as one layout box

When Not to Use

  • Use ConvertDiv — for the whole converter, it carries the group role and name
  • Use Field — for a single standalone form control outside a converter

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-into-value-div. No default styles are included.

Testing

  • Renders <div> with the base class convert-into-value-div and appends the consumer class
  • Has no role and no aria-label
  • 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> with the base class convert-into-value-div first, then the consumer class
  • Nothing else: no role, no aria-label, because a role-less <div> is not allowed an accessible name
  • restProps spread onto the root; no internal state

Related components

  • convert-into-div
  • convert-from-value-div
  • text-input

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-into-value-div
  • PascalCase: ConvertIntoValueDiv
  • Description: the converted value, such as a text input showing the number of euros
  • Status: beta — implemented and unit-tested in all nine headless libraries; not yet exercised in composed flows
  • HTML tag: <div>
  • CSS class: .convert-into-value-div
  • Interactive: no

ARIA

  • No ARIA attributes; the consumer's own label and control carry the name

Keyboard

  • None of its own

Props

  • 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-into-value-div.md