Echelon / Foundry Forma / Interface system
Assessment & decision

Single-choice matrix

Repeated single-choice scales arranged as a matrix while retaining per-row radio semantics.

Canonical sourcepatterns/matrix-single.html
Behavior ownerNative HTML
Runtime inside FormaNone
Example 1

Canonical

Canonical repository markup, namespaced only to keep examples independent.

Rate each practice.

Each row is an independent single-choice question. On narrow screens rows stack into ordinary controls.

Automated testing
Deployment automation
View HTML 
<fieldset class="ef-matrix">
  <legend class="ef-matrix__legend">Rate each practice.</legend>
  <p class="ef-field__description">Each row is an independent single-choice question. On narrow screens rows stack into ordinary controls.</p>

  <div class="ef-matrix__rows">
    <fieldset class="ef-matrix__row">
      <legend>Automated testing</legend>
      <div class="ef-matrix__choices">
        <label><input type="radio" name="ex1-matrix-single-testing-maturity" value="1" required><span>Initial</span></label>
        <label><input type="radio" name="ex1-matrix-single-testing-maturity" value="2"><span>Developing</span></label>
        <label><input type="radio" name="ex1-matrix-single-testing-maturity" value="3"><span>Established</span></label>
        <label><input type="radio" name="ex1-matrix-single-testing-maturity" value="4"><span>Optimized</span></label>
      </div>
    </fieldset>

    <fieldset class="ef-matrix__row">
      <legend>Deployment automation</legend>
      <div class="ef-matrix__choices">
        <label><input type="radio" name="ex1-matrix-single-deployment-maturity" value="1" required><span>Initial</span></label>
        <label><input type="radio" name="ex1-matrix-single-deployment-maturity" value="2"><span>Developing</span></label>
        <label><input type="radio" name="ex1-matrix-single-deployment-maturity" value="3"><span>Established</span></label>
        <label><input type="radio" name="ex1-matrix-single-deployment-maturity" value="4"><span>Optimized</span></label>
      </div>
    </fieldset>
  </div>
</fieldset>
Example 2

Representative state

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

Rate each practice.

Each row is an independent single-choice question. On narrow screens rows stack into ordinary controls.

Automated testing
Deployment automation
View HTML 
<fieldset class="ef-matrix">
  <legend class="ef-matrix__legend">Rate each practice.</legend>
  <p class="ef-field__description">Each row is an independent single-choice question. On narrow screens rows stack into ordinary controls.</p>

  <div class="ef-matrix__rows">
    <fieldset class="ef-matrix__row">
      <legend>Automated testing</legend>
      <div class="ef-matrix__choices">
        <label><input type="radio" name="ex2-matrix-single-testing-maturity" value="1" required checked><span>Initial</span></label>
        <label><input type="radio" name="ex2-matrix-single-testing-maturity" value="2"><span>Developing</span></label>
        <label><input type="radio" name="ex2-matrix-single-testing-maturity" value="3"><span>Established</span></label>
        <label><input type="radio" name="ex2-matrix-single-testing-maturity" value="4"><span>Optimized</span></label>
      </div>
    </fieldset>

    <fieldset class="ef-matrix__row">
      <legend>Deployment automation</legend>
      <div class="ef-matrix__choices">
        <label><input type="radio" name="ex2-matrix-single-deployment-maturity" value="1" required><span>Initial</span></label>
        <label><input type="radio" name="ex2-matrix-single-deployment-maturity" value="2"><span>Developing</span></label>
        <label><input type="radio" name="ex2-matrix-single-deployment-maturity" value="3"><span>Established</span></label>
        <label><input type="radio" name="ex2-matrix-single-deployment-maturity" value="4"><span>Optimized</span></label>
      </div>
    </fieldset>
  </div>
</fieldset>
Example 3

Constrained layout

The canonical contract inside a narrow application region.

Rate each practice.

Each row is an independent single-choice question. On narrow screens rows stack into ordinary controls.

Automated testing
Deployment automation
View HTML 
<fieldset class="ef-matrix">
  <legend class="ef-matrix__legend">Rate each practice.</legend>
  <p class="ef-field__description">Each row is an independent single-choice question. On narrow screens rows stack into ordinary controls.</p>

  <div class="ef-matrix__rows">
    <fieldset class="ef-matrix__row">
      <legend>Automated testing</legend>
      <div class="ef-matrix__choices">
        <label><input type="radio" name="ex3-matrix-single-testing-maturity" value="1" required><span>Initial</span></label>
        <label><input type="radio" name="ex3-matrix-single-testing-maturity" value="2"><span>Developing</span></label>
        <label><input type="radio" name="ex3-matrix-single-testing-maturity" value="3"><span>Established</span></label>
        <label><input type="radio" name="ex3-matrix-single-testing-maturity" value="4"><span>Optimized</span></label>
      </div>
    </fieldset>

    <fieldset class="ef-matrix__row">
      <legend>Deployment automation</legend>
      <div class="ef-matrix__choices">
        <label><input type="radio" name="ex3-matrix-single-deployment-maturity" value="1" required><span>Initial</span></label>
        <label><input type="radio" name="ex3-matrix-single-deployment-maturity" value="2"><span>Developing</span></label>
        <label><input type="radio" name="ex3-matrix-single-deployment-maturity" value="3"><span>Established</span></label>
        <label><input type="radio" name="ex3-matrix-single-deployment-maturity" value="4"><span>Optimized</span></label>
      </div>
    </fieldset>
  </div>
</fieldset>