Assessment & decision

Special choice

Unknown, not-applicable, and other non-scale answers visually separated from the primary continuum.

Canonical sourcepatterns/special-choice.html

Behavior ownerNative HTML

Runtime inside FormaNone

Example 1

Canonical

Canonical repository markup, namespaced only to keep examples independent.

Response status

Use these only when they are semantically different from the response scale.

Don't know Not applicable

View HTML

<fieldset class="ef-special-choice-group">
  <legend class="ef-field__label">Response status</legend>
  <p class="ef-field__description">Use these only when they are semantically different from the response scale.</p>

  <div class="ef-special-choices">
    <label class="ef-special-choice">
      <input type="radio" name="ex1-special-choice-response-status" value="unknown">
      <span>Don't know</span>
    </label>
    <label class="ef-special-choice">
      <input type="radio" name="ex1-special-choice-response-status" value="na">
      <span>Not applicable</span>
    </label>
  </div>
</fieldset>

Example 2

Representative state

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

Response status

Use these only when they are semantically different from the response scale.

Don't know Not applicable

View HTML

<fieldset class="ef-special-choice-group">
  <legend class="ef-field__label">Response status</legend>
  <p class="ef-field__description">Use these only when they are semantically different from the response scale.</p>

  <div class="ef-special-choices">
    <label class="ef-special-choice">
      <input type="radio" name="ex2-special-choice-response-status" value="unknown" checked>
      <span>Don't know</span>
    </label>
    <label class="ef-special-choice">
      <input type="radio" name="ex2-special-choice-response-status" value="na">
      <span>Not applicable</span>
    </label>
  </div>
</fieldset>

Example 3

Constrained layout

The canonical contract inside a narrow application region.

Response status

Use these only when they are semantically different from the response scale.

Don't know Not applicable

View HTML

<fieldset class="ef-special-choice-group">
  <legend class="ef-field__label">Response status</legend>
  <p class="ef-field__description">Use these only when they are semantically different from the response scale.</p>

  <div class="ef-special-choices">
    <label class="ef-special-choice">
      <input type="radio" name="ex3-special-choice-response-status" value="unknown">
      <span>Don't know</span>
    </label>
    <label class="ef-special-choice">
      <input type="radio" name="ex3-special-choice-response-status" value="na">
      <span>Not applicable</span>
    </label>
  </div>
</fieldset>