Assessment & decision

Binary choice

A two-option radio-backed answer that preserves Unanswered as distinct from false.

Canonical sourcepatterns/binary-choice.html

Behavior ownerNative HTML

Runtime inside FormaNone

Example 1

Canonical

Canonical repository markup, namespaced only to keep examples independent.

Is automated deployment currently in use?

Choose one response. An unanswered question remains distinct from No.

Yes No

View HTML

<fieldset class="ef-binary-choice">
  <legend class="ef-binary-choice__legend">Is automated deployment currently in use?</legend>
  <p class="ef-field__description" id="ex1-binary-choice-binary-choice-help">Choose one response. An unanswered question remains distinct from No.</p>

  <div class="ef-binary-choice__options" aria-describedby="ex1-binary-choice-binary-choice-help">
    <label class="ef-binary-option">
      <input type="radio" name="ex1-binary-choice-automated-deployment" value="yes" required>
      <span>Yes</span>
    </label>
    <label class="ef-binary-option">
      <input type="radio" name="ex1-binary-choice-automated-deployment" value="no">
      <span>No</span>
    </label>
  </div>
</fieldset>

Example 2

Representative state

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

Is automated deployment currently in use?

Choose one response. An unanswered question remains distinct from No.

Yes No

View HTML

<fieldset class="ef-binary-choice">
  <legend class="ef-binary-choice__legend">Is automated deployment currently in use?</legend>
  <p class="ef-field__description" id="ex2-binary-choice-binary-choice-help">Choose one response. An unanswered question remains distinct from No.</p>

  <div class="ef-binary-choice__options" aria-describedby="ex2-binary-choice-binary-choice-help">
    <label class="ef-binary-option">
      <input type="radio" name="ex2-binary-choice-automated-deployment" value="yes" required checked>
      <span>Yes</span>
    </label>
    <label class="ef-binary-option">
      <input type="radio" name="ex2-binary-choice-automated-deployment" value="no">
      <span>No</span>
    </label>
  </div>
</fieldset>

Example 3

Constrained layout

The canonical contract inside a narrow application region.

Is automated deployment currently in use?

Choose one response. An unanswered question remains distinct from No.

Yes No

View HTML

<fieldset class="ef-binary-choice">
  <legend class="ef-binary-choice__legend">Is automated deployment currently in use?</legend>
  <p class="ef-field__description" id="ex3-binary-choice-binary-choice-help">Choose one response. An unanswered question remains distinct from No.</p>

  <div class="ef-binary-choice__options" aria-describedby="ex3-binary-choice-binary-choice-help">
    <label class="ef-binary-option">
      <input type="radio" name="ex3-binary-choice-automated-deployment" value="yes" required>
      <span>Yes</span>
    </label>
    <label class="ef-binary-option">
      <input type="radio" name="ex3-binary-choice-automated-deployment" value="no">
      <span>No</span>
    </label>
  </div>
</fieldset>