Echelon / Foundry Forma / Interface system
Assessment & decision

Ranking

Ordered-choice presentation with non-drag movement controls and visible positions.

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

Canonical

Canonical repository markup, namespaced only to keep examples independent.

Rank the priorities from most to least important.

Use the move controls to change the order. Drag-and-drop may be added only as an optional Limen enhancement.

  1. Reliability
  2. Delivery speed
  3. Cost efficiency

View HTML 
<fieldset class="ef-ranking">
  <legend class="ef-ranking__legend">Rank the priorities from most to least important.</legend>
  <p class="ef-field__description">Use the move controls to change the order. Drag-and-drop may be added only as an optional Limen enhancement.</p>

  <ol class="ef-ranking__list">
    <li class="ef-ranking__item" data-ef-rank="1">
      <span class="ef-ranking__position" aria-hidden="true">1</span>
      <span class="ef-ranking__label">Reliability</span>
      <span class="ef-ranking__actions">
        <button type="button" disabled aria-label="Move Reliability up">↑</button>
        <button type="button" aria-label="Move Reliability down">↓</button>
      </span>
    </li>
    <li class="ef-ranking__item" data-ef-rank="2">
      <span class="ef-ranking__position" aria-hidden="true">2</span>
      <span class="ef-ranking__label">Delivery speed</span>
      <span class="ef-ranking__actions">
        <button type="button" aria-label="Move Delivery speed up">↑</button>
        <button type="button" aria-label="Move Delivery speed down">↓</button>
      </span>
    </li>
    <li class="ef-ranking__item" data-ef-rank="3">
      <span class="ef-ranking__position" aria-hidden="true">3</span>
      <span class="ef-ranking__label">Cost efficiency</span>
      <span class="ef-ranking__actions">
        <button type="button" aria-label="Move Cost efficiency up">↑</button>
        <button type="button" disabled aria-label="Move Cost efficiency down">↓</button>
      </span>
    </li>
  </ol>
  <p class="ef-ranking__announcement" aria-live="polite" aria-atomic="true"></p>
</fieldset>
Example 2

Secondary surface

The same contract demonstrated on a secondary Forma surface.

Rank the priorities from most to least important.

Use the move controls to change the order. Drag-and-drop may be added only as an optional Limen enhancement.

  1. Reliability
  2. Delivery speed
  3. Cost efficiency

View HTML 
<fieldset class="ef-ranking">
  <legend class="ef-ranking__legend">Rank the priorities from most to least important.</legend>
  <p class="ef-field__description">Use the move controls to change the order. Drag-and-drop may be added only as an optional Limen enhancement.</p>

  <ol class="ef-ranking__list">
    <li class="ef-ranking__item" data-ef-rank="1">
      <span class="ef-ranking__position" aria-hidden="true">1</span>
      <span class="ef-ranking__label">Reliability</span>
      <span class="ef-ranking__actions">
        <button type="button" disabled aria-label="Move Reliability up">↑</button>
        <button type="button" aria-label="Move Reliability down">↓</button>
      </span>
    </li>
    <li class="ef-ranking__item" data-ef-rank="2">
      <span class="ef-ranking__position" aria-hidden="true">2</span>
      <span class="ef-ranking__label">Delivery speed</span>
      <span class="ef-ranking__actions">
        <button type="button" aria-label="Move Delivery speed up">↑</button>
        <button type="button" aria-label="Move Delivery speed down">↓</button>
      </span>
    </li>
    <li class="ef-ranking__item" data-ef-rank="3">
      <span class="ef-ranking__position" aria-hidden="true">3</span>
      <span class="ef-ranking__label">Cost efficiency</span>
      <span class="ef-ranking__actions">
        <button type="button" aria-label="Move Cost efficiency up">↑</button>
        <button type="button" disabled aria-label="Move Cost efficiency down">↓</button>
      </span>
    </li>
  </ol>
  <p class="ef-ranking__announcement" aria-live="polite" aria-atomic="true"></p>
</fieldset>
Example 3

Constrained layout

The canonical contract inside a narrow application region.

Rank the priorities from most to least important.

Use the move controls to change the order. Drag-and-drop may be added only as an optional Limen enhancement.

  1. Reliability
  2. Delivery speed
  3. Cost efficiency

View HTML 
<fieldset class="ef-ranking">
  <legend class="ef-ranking__legend">Rank the priorities from most to least important.</legend>
  <p class="ef-field__description">Use the move controls to change the order. Drag-and-drop may be added only as an optional Limen enhancement.</p>

  <ol class="ef-ranking__list">
    <li class="ef-ranking__item" data-ef-rank="1">
      <span class="ef-ranking__position" aria-hidden="true">1</span>
      <span class="ef-ranking__label">Reliability</span>
      <span class="ef-ranking__actions">
        <button type="button" disabled aria-label="Move Reliability up">↑</button>
        <button type="button" aria-label="Move Reliability down">↓</button>
      </span>
    </li>
    <li class="ef-ranking__item" data-ef-rank="2">
      <span class="ef-ranking__position" aria-hidden="true">2</span>
      <span class="ef-ranking__label">Delivery speed</span>
      <span class="ef-ranking__actions">
        <button type="button" aria-label="Move Delivery speed up">↑</button>
        <button type="button" aria-label="Move Delivery speed down">↓</button>
      </span>
    </li>
    <li class="ef-ranking__item" data-ef-rank="3">
      <span class="ef-ranking__position" aria-hidden="true">3</span>
      <span class="ef-ranking__label">Cost efficiency</span>
      <span class="ef-ranking__actions">
        <button type="button" aria-label="Move Cost efficiency up">↑</button>
        <button type="button" disabled aria-label="Move Cost efficiency down">↓</button>
      </span>
    </li>
  </ol>
  <p class="ef-ranking__announcement" aria-live="polite" aria-atomic="true"></p>
</fieldset>