Echelon / Foundry Forma / Interface system
Assessment & decision

Best–Worst

Capture distinct strongest and weakest choices without hiding the two-selection constraint.

Canonical sourcepatterns/best-worst.html
Behavior ownerApplication / Limen
Runtime inside FormaNone
Example 1

Canonical

Canonical repository markup, namespaced only to keep examples independent.

Choose the most important and least important item.

One item must be Best and a different item must be Worst. Limen enforces the cross-column constraint.

Reliability
Delivery speed

Choose one Best and one Worst.

View HTML 
<fieldset class="ef-best-worst">
  <legend class="ef-best-worst__legend">Choose the most important and least important item.</legend>
  <p class="ef-field__description">One item must be Best and a different item must be Worst. Limen enforces the cross-column constraint.</p>

  <div class="ef-best-worst__header" aria-hidden="true">
    <span>Option</span><span>Best</span><span>Worst</span>
  </div>

  <div class="ef-best-worst__row">
    <span id="ex1-best-worst-bw-reliability">Reliability</span>
    <label><input type="radio" name="ex1-best-worst-best" value="reliability" aria-labelledby="ex1-best-worst-bw-reliability ex1-best-worst-bw-best-label"><span class="ef-sr-only" id="ex1-best-worst-bw-best-label">Best</span></label>
    <label><input type="radio" name="ex1-best-worst-worst" value="reliability" aria-labelledby="ex1-best-worst-bw-reliability ex1-best-worst-bw-worst-label"><span class="ef-sr-only" id="ex1-best-worst-bw-worst-label">Worst</span></label>
  </div>
  <div class="ef-best-worst__row">
    <span id="ex1-best-worst-bw-speed">Delivery speed</span>
    <label><input type="radio" name="ex1-best-worst-best" value="speed" aria-label="Delivery speed, Best"></label>
    <label><input type="radio" name="ex1-best-worst-worst" value="speed" aria-label="Delivery speed, Worst"></label>
  </div>

  <p class="ef-best-worst__status" data-ef-state="incomplete" aria-live="polite">Choose one Best and one Worst.</p>
</fieldset>
Example 2

Representative state

A browser-native state made visible without adding a runtime.

Choose the most important and least important item.

One item must be Best and a different item must be Worst. Limen enforces the cross-column constraint.

Reliability
Delivery speed

Choose one Best and one Worst.

View HTML 
<fieldset class="ef-best-worst">
  <legend class="ef-best-worst__legend">Choose the most important and least important item.</legend>
  <p class="ef-field__description">One item must be Best and a different item must be Worst. Limen enforces the cross-column constraint.</p>

  <div class="ef-best-worst__header" aria-hidden="true">
    <span>Option</span><span>Best</span><span>Worst</span>
  </div>

  <div class="ef-best-worst__row">
    <span id="ex2-best-worst-bw-reliability">Reliability</span>
    <label><input type="radio" name="ex2-best-worst-best" value="reliability" aria-labelledby="ex2-best-worst-bw-reliability ex2-best-worst-bw-best-label" checked><span class="ef-sr-only" id="ex2-best-worst-bw-best-label">Best</span></label>
    <label><input type="radio" name="ex2-best-worst-worst" value="reliability" aria-labelledby="ex2-best-worst-bw-reliability ex2-best-worst-bw-worst-label"><span class="ef-sr-only" id="ex2-best-worst-bw-worst-label">Worst</span></label>
  </div>
  <div class="ef-best-worst__row">
    <span id="ex2-best-worst-bw-speed">Delivery speed</span>
    <label><input type="radio" name="ex2-best-worst-best" value="speed" aria-label="Delivery speed, Best"></label>
    <label><input type="radio" name="ex2-best-worst-worst" value="speed" aria-label="Delivery speed, Worst"></label>
  </div>

  <p class="ef-best-worst__status" data-ef-state="incomplete" aria-live="polite">Choose one Best and one Worst.</p>
</fieldset>
Example 3

Constrained layout

The canonical contract inside a narrow application region.

Choose the most important and least important item.

One item must be Best and a different item must be Worst. Limen enforces the cross-column constraint.

Reliability
Delivery speed

Choose one Best and one Worst.

View HTML 
<fieldset class="ef-best-worst">
  <legend class="ef-best-worst__legend">Choose the most important and least important item.</legend>
  <p class="ef-field__description">One item must be Best and a different item must be Worst. Limen enforces the cross-column constraint.</p>

  <div class="ef-best-worst__header" aria-hidden="true">
    <span>Option</span><span>Best</span><span>Worst</span>
  </div>

  <div class="ef-best-worst__row">
    <span id="ex3-best-worst-bw-reliability">Reliability</span>
    <label><input type="radio" name="ex3-best-worst-best" value="reliability" aria-labelledby="ex3-best-worst-bw-reliability ex3-best-worst-bw-best-label"><span class="ef-sr-only" id="ex3-best-worst-bw-best-label">Best</span></label>
    <label><input type="radio" name="ex3-best-worst-worst" value="reliability" aria-labelledby="ex3-best-worst-bw-reliability ex3-best-worst-bw-worst-label"><span class="ef-sr-only" id="ex3-best-worst-bw-worst-label">Worst</span></label>
  </div>
  <div class="ef-best-worst__row">
    <span id="ex3-best-worst-bw-speed">Delivery speed</span>
    <label><input type="radio" name="ex3-best-worst-best" value="speed" aria-label="Delivery speed, Best"></label>
    <label><input type="radio" name="ex3-best-worst-worst" value="speed" aria-label="Delivery speed, Worst"></label>
  </div>

  <p class="ef-best-worst__status" data-ef-state="incomplete" aria-live="polite">Choose one Best and one Worst.</p>
</fieldset>