Echelon / Foundry Forma / Interface system
Selection

Hierarchical multi-choice

Multi-selection across a hierarchy with application-owned propagation and selection rules.

Canonical sourcepatterns/hierarchical-multi-choice.html
Behavior ownerApplication / Limen
Runtime inside FormaNone
Example 1

Canonical

Canonical repository markup, namespaced only to keep examples independent.

Choose affected services.

Parent/descendant selection semantics are supplied by the application. The design system does not infer whether selecting a parent includes its children.

  • Platform
  • Data

2 services selected

View HTML 
<fieldset class="ef-hierarchy">
  <legend class="ef-hierarchy__legend">Choose affected services.</legend>
  <p class="ef-field__description">Parent/descendant selection semantics are supplied by the application. The design system does not infer whether selecting a parent includes its children.</p>

  <ul class="ef-hierarchy__tree">
    <li>
      <details open>
        <summary>Platform</summary>
        <ul>
          <li><label><input type="checkbox" name="ex1-hierarchical-multi-choice-services" value="identity"> Identity</label></li>
          <li><label><input type="checkbox" name="ex1-hierarchical-multi-choice-services" value="billing"> Billing</label></li>
        </ul>
      </details>
    </li>
    <li>
      <details>
        <summary>Data</summary>
        <ul>
          <li><label><input type="checkbox" name="ex1-hierarchical-multi-choice-services" value="warehouse"> Warehouse</label></li>
          <li><label><input type="checkbox" name="ex1-hierarchical-multi-choice-services" value="analytics"> Analytics</label></li>
        </ul>
      </details>
    </li>
  </ul>

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

Representative state

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

Choose affected services.

Parent/descendant selection semantics are supplied by the application. The design system does not infer whether selecting a parent includes its children.

  • Platform
  • Data

2 services selected

View HTML 
<fieldset class="ef-hierarchy">
  <legend class="ef-hierarchy__legend">Choose affected services.</legend>
  <p class="ef-field__description">Parent/descendant selection semantics are supplied by the application. The design system does not infer whether selecting a parent includes its children.</p>

  <ul class="ef-hierarchy__tree">
    <li>
      <details open open>
        <summary>Platform</summary>
        <ul>
          <li><label><input type="checkbox" name="ex2-hierarchical-multi-choice-services" value="identity"> Identity</label></li>
          <li><label><input type="checkbox" name="ex2-hierarchical-multi-choice-services" value="billing"> Billing</label></li>
        </ul>
      </details>
    </li>
    <li>
      <details>
        <summary>Data</summary>
        <ul>
          <li><label><input type="checkbox" name="ex2-hierarchical-multi-choice-services" value="warehouse"> Warehouse</label></li>
          <li><label><input type="checkbox" name="ex2-hierarchical-multi-choice-services" value="analytics"> Analytics</label></li>
        </ul>
      </details>
    </li>
  </ul>

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

Constrained layout

The canonical contract inside a narrow application region.

Choose affected services.

Parent/descendant selection semantics are supplied by the application. The design system does not infer whether selecting a parent includes its children.

  • Platform
  • Data

2 services selected

View HTML 
<fieldset class="ef-hierarchy">
  <legend class="ef-hierarchy__legend">Choose affected services.</legend>
  <p class="ef-field__description">Parent/descendant selection semantics are supplied by the application. The design system does not infer whether selecting a parent includes its children.</p>

  <ul class="ef-hierarchy__tree">
    <li>
      <details open>
        <summary>Platform</summary>
        <ul>
          <li><label><input type="checkbox" name="ex3-hierarchical-multi-choice-services" value="identity"> Identity</label></li>
          <li><label><input type="checkbox" name="ex3-hierarchical-multi-choice-services" value="billing"> Billing</label></li>
        </ul>
      </details>
    </li>
    <li>
      <details>
        <summary>Data</summary>
        <ul>
          <li><label><input type="checkbox" name="ex3-hierarchical-multi-choice-services" value="warehouse"> Warehouse</label></li>
          <li><label><input type="checkbox" name="ex3-hierarchical-multi-choice-services" value="analytics"> Analytics</label></li>
        </ul>
      </details>
    </li>
  </ul>

  <p class="ef-selection-status" data-ef-state="valid" aria-live="polite">2 services selected</p>
</fieldset>