Echelon / Foundry Forma / Interface system
Assessment & decision

Allocation

Distribute a bounded amount across multiple choices while preserving direct numeric entry.

Canonical sourcepatterns/allocation.html
Behavior ownerApplication / Limen
Runtime inside FormaNone
Example 1

Canonical

Canonical repository markup, namespaced only to keep examples independent.

Distribute 10 points across these priorities.
Total 10 / 10

Limen validates the aggregate total and renders the authoritative state.

View HTML 
<fieldset class="ef-allocation">
  <legend class="ef-allocation__legend">Distribute 10 points across these priorities.</legend>

  <div class="ef-allocation__items">
    <label class="ef-allocation__item">
      <span>Reliability</span>
      <input type="number" name="ex1-allocation-reliability" min="0" max="10" step="1" value="4" inputmode="numeric">
    </label>
    <label class="ef-allocation__item">
      <span>Delivery speed</span>
      <input type="number" name="ex1-allocation-delivery-speed" min="0" max="10" step="1" value="3" inputmode="numeric">
    </label>
    <label class="ef-allocation__item">
      <span>Cost efficiency</span>
      <input type="number" name="ex1-allocation-cost-efficiency" min="0" max="10" step="1" value="3" inputmode="numeric">
    </label>
  </div>

  <div class="ef-allocation__total" data-ef-state="valid" aria-live="polite" aria-atomic="true">
    <span>Total</span>
    <output>10 / 10</output>
  </div>
  <p class="ef-field__description">Limen validates the aggregate total and renders the authoritative state.</p>
</fieldset>
Example 2

Secondary surface

The same contract demonstrated on a secondary Forma surface.

Distribute 10 points across these priorities.
Total 10 / 10

Limen validates the aggregate total and renders the authoritative state.

View HTML 
<fieldset class="ef-allocation">
  <legend class="ef-allocation__legend">Distribute 10 points across these priorities.</legend>

  <div class="ef-allocation__items">
    <label class="ef-allocation__item">
      <span>Reliability</span>
      <input type="number" name="ex2-allocation-reliability" min="0" max="10" step="1" value="4" inputmode="numeric">
    </label>
    <label class="ef-allocation__item">
      <span>Delivery speed</span>
      <input type="number" name="ex2-allocation-delivery-speed" min="0" max="10" step="1" value="3" inputmode="numeric">
    </label>
    <label class="ef-allocation__item">
      <span>Cost efficiency</span>
      <input type="number" name="ex2-allocation-cost-efficiency" min="0" max="10" step="1" value="3" inputmode="numeric">
    </label>
  </div>

  <div class="ef-allocation__total" data-ef-state="valid" aria-live="polite" aria-atomic="true">
    <span>Total</span>
    <output>10 / 10</output>
  </div>
  <p class="ef-field__description">Limen validates the aggregate total and renders the authoritative state.</p>
</fieldset>
Example 3

Constrained layout

The canonical contract inside a narrow application region.

Distribute 10 points across these priorities.
Total 10 / 10

Limen validates the aggregate total and renders the authoritative state.

View HTML 
<fieldset class="ef-allocation">
  <legend class="ef-allocation__legend">Distribute 10 points across these priorities.</legend>

  <div class="ef-allocation__items">
    <label class="ef-allocation__item">
      <span>Reliability</span>
      <input type="number" name="ex3-allocation-reliability" min="0" max="10" step="1" value="4" inputmode="numeric">
    </label>
    <label class="ef-allocation__item">
      <span>Delivery speed</span>
      <input type="number" name="ex3-allocation-delivery-speed" min="0" max="10" step="1" value="3" inputmode="numeric">
    </label>
    <label class="ef-allocation__item">
      <span>Cost efficiency</span>
      <input type="number" name="ex3-allocation-cost-efficiency" min="0" max="10" step="1" value="3" inputmode="numeric">
    </label>
  </div>

  <div class="ef-allocation__total" data-ef-state="valid" aria-live="polite" aria-atomic="true">
    <span>Total</span>
    <output>10 / 10</output>
  </div>
  <p class="ef-field__description">Limen validates the aggregate total and renders the authoritative state.</p>
</fieldset>