Ordinal scale
One radio-backed contract for ordered Likert, agreement, confidence, frequency, and similar scales.
Canonical sourcepatterns/ordinal-scale.html
Behavior ownerNative HTML
Runtime inside FormaNone
Example 1
Canonical
Canonical repository markup, namespaced only to keep examples independent.
View HTML
<fieldset class="ef-ordinal-scale ef-ordinal-scale--5">
<legend class="ef-ordinal-scale__legend">Our deployment process is predictable.</legend>
<div class="ef-ordinal-scale__options">
<label class="ef-ordinal-option">
<input type="radio" name="ex1-ordinal-scale-deployment-predictability" value="0" required>
<span class="ef-ordinal-option__marker" aria-hidden="true">1</span>
<span class="ef-ordinal-option__label">Strongly disagree</span>
</label>
<label class="ef-ordinal-option">
<input type="radio" name="ex1-ordinal-scale-deployment-predictability" value="1">
<span class="ef-ordinal-option__marker" aria-hidden="true">2</span>
<span class="ef-ordinal-option__label">Disagree</span>
</label>
<label class="ef-ordinal-option">
<input type="radio" name="ex1-ordinal-scale-deployment-predictability" value="2">
<span class="ef-ordinal-option__marker" aria-hidden="true">3</span>
<span class="ef-ordinal-option__label">Neither agree nor disagree</span>
</label>
<label class="ef-ordinal-option">
<input type="radio" name="ex1-ordinal-scale-deployment-predictability" value="3">
<span class="ef-ordinal-option__marker" aria-hidden="true">4</span>
<span class="ef-ordinal-option__label">Agree</span>
</label>
<label class="ef-ordinal-option">
<input type="radio" name="ex1-ordinal-scale-deployment-predictability" value="4">
<span class="ef-ordinal-option__marker" aria-hidden="true">5</span>
<span class="ef-ordinal-option__label">Strongly agree</span>
</label>
</div>
<div class="ef-special-choices" aria-label="Other responses">
<label class="ef-special-choice">
<input type="radio" name="ex1-ordinal-scale-deployment-predictability" value="unknown">
<span>Don't know</span>
</label>
<label class="ef-special-choice">
<input type="radio" name="ex1-ordinal-scale-deployment-predictability" value="na">
<span>Not applicable</span>
</label>
</div>
</fieldset>Example 2
Representative state
A browser-native state made visible without adding a runtime.
View HTML
<fieldset class="ef-ordinal-scale ef-ordinal-scale--5">
<legend class="ef-ordinal-scale__legend">Our deployment process is predictable.</legend>
<div class="ef-ordinal-scale__options">
<label class="ef-ordinal-option">
<input type="radio" name="ex2-ordinal-scale-deployment-predictability" value="0" required checked>
<span class="ef-ordinal-option__marker" aria-hidden="true">1</span>
<span class="ef-ordinal-option__label">Strongly disagree</span>
</label>
<label class="ef-ordinal-option">
<input type="radio" name="ex2-ordinal-scale-deployment-predictability" value="1">
<span class="ef-ordinal-option__marker" aria-hidden="true">2</span>
<span class="ef-ordinal-option__label">Disagree</span>
</label>
<label class="ef-ordinal-option">
<input type="radio" name="ex2-ordinal-scale-deployment-predictability" value="2">
<span class="ef-ordinal-option__marker" aria-hidden="true">3</span>
<span class="ef-ordinal-option__label">Neither agree nor disagree</span>
</label>
<label class="ef-ordinal-option">
<input type="radio" name="ex2-ordinal-scale-deployment-predictability" value="3">
<span class="ef-ordinal-option__marker" aria-hidden="true">4</span>
<span class="ef-ordinal-option__label">Agree</span>
</label>
<label class="ef-ordinal-option">
<input type="radio" name="ex2-ordinal-scale-deployment-predictability" value="4">
<span class="ef-ordinal-option__marker" aria-hidden="true">5</span>
<span class="ef-ordinal-option__label">Strongly agree</span>
</label>
</div>
<div class="ef-special-choices" aria-label="Other responses">
<label class="ef-special-choice">
<input type="radio" name="ex2-ordinal-scale-deployment-predictability" value="unknown">
<span>Don't know</span>
</label>
<label class="ef-special-choice">
<input type="radio" name="ex2-ordinal-scale-deployment-predictability" value="na">
<span>Not applicable</span>
</label>
</div>
</fieldset>Example 3
Constrained layout
The canonical contract inside a narrow application region.
View HTML
<fieldset class="ef-ordinal-scale ef-ordinal-scale--5">
<legend class="ef-ordinal-scale__legend">Our deployment process is predictable.</legend>
<div class="ef-ordinal-scale__options">
<label class="ef-ordinal-option">
<input type="radio" name="ex3-ordinal-scale-deployment-predictability" value="0" required>
<span class="ef-ordinal-option__marker" aria-hidden="true">1</span>
<span class="ef-ordinal-option__label">Strongly disagree</span>
</label>
<label class="ef-ordinal-option">
<input type="radio" name="ex3-ordinal-scale-deployment-predictability" value="1">
<span class="ef-ordinal-option__marker" aria-hidden="true">2</span>
<span class="ef-ordinal-option__label">Disagree</span>
</label>
<label class="ef-ordinal-option">
<input type="radio" name="ex3-ordinal-scale-deployment-predictability" value="2">
<span class="ef-ordinal-option__marker" aria-hidden="true">3</span>
<span class="ef-ordinal-option__label">Neither agree nor disagree</span>
</label>
<label class="ef-ordinal-option">
<input type="radio" name="ex3-ordinal-scale-deployment-predictability" value="3">
<span class="ef-ordinal-option__marker" aria-hidden="true">4</span>
<span class="ef-ordinal-option__label">Agree</span>
</label>
<label class="ef-ordinal-option">
<input type="radio" name="ex3-ordinal-scale-deployment-predictability" value="4">
<span class="ef-ordinal-option__marker" aria-hidden="true">5</span>
<span class="ef-ordinal-option__label">Strongly agree</span>
</label>
</div>
<div class="ef-special-choices" aria-label="Other responses">
<label class="ef-special-choice">
<input type="radio" name="ex3-ordinal-scale-deployment-predictability" value="unknown">
<span>Don't know</span>
</label>
<label class="ef-special-choice">
<input type="radio" name="ex3-ordinal-scale-deployment-predictability" value="na">
<span>Not applicable</span>
</label>
</div>
</fieldset>