Echelon / Foundry Forma / Interface system
Selection

Multi-choice

Checkbox-backed selection with explicit guidance for minimum, maximum, or exclusive choices.

Canonical sourcepatterns/multi-choice.html
Behavior ownerNative HTML
Runtime inside FormaNone
Example 1

Canonical

Canonical repository markup, namespaced only to keep examples independent.

Select exactly two priorities.

Choose exactly 2 options. “None of these” cannot be combined with another option.

0 of 2 selected

View HTML 
<fieldset class="ef-choice-group" aria-describedby="ex1-multi-choice-multi-choice-guidance">
  <legend class="ef-choice-group__legend">Select exactly two priorities.</legend>
  <p class="ef-selection-guidance" id="ex1-multi-choice-multi-choice-guidance">Choose exactly 2 options. “None of these” cannot be combined with another option.</p>

  <label class="ef-choice">
    <input type="checkbox" name="ex1-multi-choice-priorities" value="reliability">
    <span class="ef-choice__content"><strong>Reliability</strong></span>
  </label>
  <label class="ef-choice">
    <input type="checkbox" name="ex1-multi-choice-priorities" value="speed">
    <span class="ef-choice__content"><strong>Delivery speed</strong></span>
  </label>
  <label class="ef-choice">
    <input type="checkbox" name="ex1-multi-choice-priorities" value="cost">
    <span class="ef-choice__content"><strong>Cost efficiency</strong></span>
  </label>
  <label class="ef-choice ef-choice--exclusive">
    <input type="checkbox" name="ex1-multi-choice-priorities" value="none">
    <span class="ef-choice__content"><strong>None of these</strong><span>Exclusive option</span></span>
  </label>

  <p class="ef-selection-status" data-ef-state="incomplete" aria-live="polite">0 of 2 selected</p>
</fieldset>
Example 2

Representative state

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

Select exactly two priorities.

Choose exactly 2 options. “None of these” cannot be combined with another option.

0 of 2 selected

View HTML 
<fieldset class="ef-choice-group" aria-describedby="ex2-multi-choice-multi-choice-guidance">
  <legend class="ef-choice-group__legend">Select exactly two priorities.</legend>
  <p class="ef-selection-guidance" id="ex2-multi-choice-multi-choice-guidance">Choose exactly 2 options. “None of these” cannot be combined with another option.</p>

  <label class="ef-choice">
    <input type="checkbox" name="ex2-multi-choice-priorities" value="reliability" checked>
    <span class="ef-choice__content"><strong>Reliability</strong></span>
  </label>
  <label class="ef-choice">
    <input type="checkbox" name="ex2-multi-choice-priorities" value="speed">
    <span class="ef-choice__content"><strong>Delivery speed</strong></span>
  </label>
  <label class="ef-choice">
    <input type="checkbox" name="ex2-multi-choice-priorities" value="cost">
    <span class="ef-choice__content"><strong>Cost efficiency</strong></span>
  </label>
  <label class="ef-choice ef-choice--exclusive">
    <input type="checkbox" name="ex2-multi-choice-priorities" value="none">
    <span class="ef-choice__content"><strong>None of these</strong><span>Exclusive option</span></span>
  </label>

  <p class="ef-selection-status" data-ef-state="incomplete" aria-live="polite">0 of 2 selected</p>
</fieldset>
Example 3

Constrained layout

The canonical contract inside a narrow application region.

Select exactly two priorities.

Choose exactly 2 options. “None of these” cannot be combined with another option.

0 of 2 selected

View HTML 
<fieldset class="ef-choice-group" aria-describedby="ex3-multi-choice-multi-choice-guidance">
  <legend class="ef-choice-group__legend">Select exactly two priorities.</legend>
  <p class="ef-selection-guidance" id="ex3-multi-choice-multi-choice-guidance">Choose exactly 2 options. “None of these” cannot be combined with another option.</p>

  <label class="ef-choice">
    <input type="checkbox" name="ex3-multi-choice-priorities" value="reliability">
    <span class="ef-choice__content"><strong>Reliability</strong></span>
  </label>
  <label class="ef-choice">
    <input type="checkbox" name="ex3-multi-choice-priorities" value="speed">
    <span class="ef-choice__content"><strong>Delivery speed</strong></span>
  </label>
  <label class="ef-choice">
    <input type="checkbox" name="ex3-multi-choice-priorities" value="cost">
    <span class="ef-choice__content"><strong>Cost efficiency</strong></span>
  </label>
  <label class="ef-choice ef-choice--exclusive">
    <input type="checkbox" name="ex3-multi-choice-priorities" value="none">
    <span class="ef-choice__content"><strong>None of these</strong><span>Exclusive option</span></span>
  </label>

  <p class="ef-selection-status" data-ef-state="incomplete" aria-live="polite">0 of 2 selected</p>
</fieldset>