Echelon / Foundry Forma / Interface system
Selection

Hierarchical choice

Nested disclosure and choice structure for hierarchy without assigning parent-child domain meaning.

Canonical sourcepatterns/hierarchical-choice.html
Behavior ownerNative baseline / application semantics
Runtime inside FormaNone
Example 1

Canonical

Canonical repository markup, namespaced only to keep examples independent.

Choose the affected service.

Published hierarchy data is immutable. Limen coordinates expansion/cascading behavior when needed.

  • Platform
  • Data
View HTML 
<fieldset class="ef-hierarchy">
  <legend class="ef-hierarchy__legend">Choose the affected service.</legend>
  <p class="ef-field__description">Published hierarchy data is immutable. Limen coordinates expansion/cascading behavior when needed.</p>

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

Representative state

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

Choose the affected service.

Published hierarchy data is immutable. Limen coordinates expansion/cascading behavior when needed.

  • Platform
  • Data
View HTML 
<fieldset class="ef-hierarchy">
  <legend class="ef-hierarchy__legend">Choose the affected service.</legend>
  <p class="ef-field__description">Published hierarchy data is immutable. Limen coordinates expansion/cascading behavior when needed.</p>

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

Constrained layout

The canonical contract inside a narrow application region.

Choose the affected service.

Published hierarchy data is immutable. Limen coordinates expansion/cascading behavior when needed.

  • Platform
  • Data
View HTML 
<fieldset class="ef-hierarchy">
  <legend class="ef-hierarchy__legend">Choose the affected service.</legend>
  <p class="ef-field__description">Published hierarchy data is immutable. Limen coordinates expansion/cascading behavior when needed.</p>

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