Assessment & decision

Pairwise choice

A focused two-alternative comparison using ordinary choice semantics.

Canonical sourcepatterns/pairwise-choice.html

Behavior ownerNative HTML

Runtime inside FormaNone

Example 1

Canonical

Canonical repository markup, namespaced only to keep examples independent.

Which is more important for this decision?

Option A Reliability Prefer predictable operation and recovery. Option B Delivery speed Prefer faster change and deployment.

View HTML

<fieldset class="ef-pairwise">
  <legend class="ef-pairwise__legend">Which is more important for this decision?</legend>

  <div class="ef-pairwise__options">
    <label class="ef-pairwise__option">
      <input type="radio" name="ex1-pairwise-choice-priority-comparison" value="reliability" required>
      <span class="ef-pairwise__eyebrow">Option A</span>
      <strong>Reliability</strong>
      <span>Prefer predictable operation and recovery.</span>
    </label>

    <span class="ef-pairwise__versus" aria-hidden="true">or</span>

    <label class="ef-pairwise__option">
      <input type="radio" name="ex1-pairwise-choice-priority-comparison" value="speed">
      <span class="ef-pairwise__eyebrow">Option B</span>
      <strong>Delivery speed</strong>
      <span>Prefer faster change and deployment.</span>
    </label>
  </div>
</fieldset>

Example 2

Representative state

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

Which is more important for this decision?

Option A Reliability Prefer predictable operation and recovery. Option B Delivery speed Prefer faster change and deployment.

View HTML

<fieldset class="ef-pairwise">
  <legend class="ef-pairwise__legend">Which is more important for this decision?</legend>

  <div class="ef-pairwise__options">
    <label class="ef-pairwise__option">
      <input type="radio" name="ex2-pairwise-choice-priority-comparison" value="reliability" required checked>
      <span class="ef-pairwise__eyebrow">Option A</span>
      <strong>Reliability</strong>
      <span>Prefer predictable operation and recovery.</span>
    </label>

    <span class="ef-pairwise__versus" aria-hidden="true">or</span>

    <label class="ef-pairwise__option">
      <input type="radio" name="ex2-pairwise-choice-priority-comparison" value="speed">
      <span class="ef-pairwise__eyebrow">Option B</span>
      <strong>Delivery speed</strong>
      <span>Prefer faster change and deployment.</span>
    </label>
  </div>
</fieldset>

Example 3

Constrained layout

The canonical contract inside a narrow application region.

Which is more important for this decision?

Option A Reliability Prefer predictable operation and recovery. Option B Delivery speed Prefer faster change and deployment.

View HTML

<fieldset class="ef-pairwise">
  <legend class="ef-pairwise__legend">Which is more important for this decision?</legend>

  <div class="ef-pairwise__options">
    <label class="ef-pairwise__option">
      <input type="radio" name="ex3-pairwise-choice-priority-comparison" value="reliability" required>
      <span class="ef-pairwise__eyebrow">Option A</span>
      <strong>Reliability</strong>
      <span>Prefer predictable operation and recovery.</span>
    </label>

    <span class="ef-pairwise__versus" aria-hidden="true">or</span>

    <label class="ef-pairwise__option">
      <input type="radio" name="ex3-pairwise-choice-priority-comparison" value="speed">
      <span class="ef-pairwise__eyebrow">Option B</span>
      <strong>Delivery speed</strong>
      <span>Prefer faster change and deployment.</span>
    </label>
  </div>
</fieldset>