Semantic differential
A bipolar textual scale that keeps the ordered response radio-backed and explicit.
Canonical sourcepatterns/semantic-differential.html
Behavior ownerNative HTML
Runtime inside FormaNone
Example 1
Canonical
Canonical repository markup, namespaced only to keep examples independent.
View HTML
<fieldset class="ef-semantic-differential">
<legend class="ef-semantic-differential__legend">How would you characterize the current process?</legend>
<div class="ef-semantic-differential__endpoints" aria-hidden="true">
<span>Highly manual</span>
<span>Highly automated</span>
</div>
<div class="ef-semantic-differential__scale">
<label><input type="radio" name="ex1-semantic-differential-automation-level" value="1" required><span aria-hidden="true">1</span><span class="ef-sr-only">Highly manual, position 1 of 7</span></label>
<label><input type="radio" name="ex1-semantic-differential-automation-level" value="2"><span aria-hidden="true">2</span><span class="ef-sr-only">Position 2 of 7</span></label>
<label><input type="radio" name="ex1-semantic-differential-automation-level" value="3"><span aria-hidden="true">3</span><span class="ef-sr-only">Position 3 of 7</span></label>
<label><input type="radio" name="ex1-semantic-differential-automation-level" value="4"><span aria-hidden="true">4</span><span class="ef-sr-only">Position 4 of 7</span></label>
<label><input type="radio" name="ex1-semantic-differential-automation-level" value="5"><span aria-hidden="true">5</span><span class="ef-sr-only">Position 5 of 7</span></label>
<label><input type="radio" name="ex1-semantic-differential-automation-level" value="6"><span aria-hidden="true">6</span><span class="ef-sr-only">Position 6 of 7</span></label>
<label><input type="radio" name="ex1-semantic-differential-automation-level" value="7"><span aria-hidden="true">7</span><span class="ef-sr-only">Highly automated, position 7 of 7</span></label>
</div>
<div class="ef-semantic-differential__endpoints ef-semantic-differential__endpoints--mobile">
<span>1 = Highly manual</span>
<span>7 = Highly automated</span>
</div>
</fieldset>Example 2
Representative state
A browser-native state made visible without adding a runtime.
View HTML
<fieldset class="ef-semantic-differential">
<legend class="ef-semantic-differential__legend">How would you characterize the current process?</legend>
<div class="ef-semantic-differential__endpoints" aria-hidden="true">
<span>Highly manual</span>
<span>Highly automated</span>
</div>
<div class="ef-semantic-differential__scale">
<label><input type="radio" name="ex2-semantic-differential-automation-level" value="1" required checked><span aria-hidden="true">1</span><span class="ef-sr-only">Highly manual, position 1 of 7</span></label>
<label><input type="radio" name="ex2-semantic-differential-automation-level" value="2"><span aria-hidden="true">2</span><span class="ef-sr-only">Position 2 of 7</span></label>
<label><input type="radio" name="ex2-semantic-differential-automation-level" value="3"><span aria-hidden="true">3</span><span class="ef-sr-only">Position 3 of 7</span></label>
<label><input type="radio" name="ex2-semantic-differential-automation-level" value="4"><span aria-hidden="true">4</span><span class="ef-sr-only">Position 4 of 7</span></label>
<label><input type="radio" name="ex2-semantic-differential-automation-level" value="5"><span aria-hidden="true">5</span><span class="ef-sr-only">Position 5 of 7</span></label>
<label><input type="radio" name="ex2-semantic-differential-automation-level" value="6"><span aria-hidden="true">6</span><span class="ef-sr-only">Position 6 of 7</span></label>
<label><input type="radio" name="ex2-semantic-differential-automation-level" value="7"><span aria-hidden="true">7</span><span class="ef-sr-only">Highly automated, position 7 of 7</span></label>
</div>
<div class="ef-semantic-differential__endpoints ef-semantic-differential__endpoints--mobile">
<span>1 = Highly manual</span>
<span>7 = Highly automated</span>
</div>
</fieldset>Example 3
Constrained layout
The canonical contract inside a narrow application region.
View HTML
<fieldset class="ef-semantic-differential">
<legend class="ef-semantic-differential__legend">How would you characterize the current process?</legend>
<div class="ef-semantic-differential__endpoints" aria-hidden="true">
<span>Highly manual</span>
<span>Highly automated</span>
</div>
<div class="ef-semantic-differential__scale">
<label><input type="radio" name="ex3-semantic-differential-automation-level" value="1" required><span aria-hidden="true">1</span><span class="ef-sr-only">Highly manual, position 1 of 7</span></label>
<label><input type="radio" name="ex3-semantic-differential-automation-level" value="2"><span aria-hidden="true">2</span><span class="ef-sr-only">Position 2 of 7</span></label>
<label><input type="radio" name="ex3-semantic-differential-automation-level" value="3"><span aria-hidden="true">3</span><span class="ef-sr-only">Position 3 of 7</span></label>
<label><input type="radio" name="ex3-semantic-differential-automation-level" value="4"><span aria-hidden="true">4</span><span class="ef-sr-only">Position 4 of 7</span></label>
<label><input type="radio" name="ex3-semantic-differential-automation-level" value="5"><span aria-hidden="true">5</span><span class="ef-sr-only">Position 5 of 7</span></label>
<label><input type="radio" name="ex3-semantic-differential-automation-level" value="6"><span aria-hidden="true">6</span><span class="ef-sr-only">Position 6 of 7</span></label>
<label><input type="radio" name="ex3-semantic-differential-automation-level" value="7"><span aria-hidden="true">7</span><span class="ef-sr-only">Highly automated, position 7 of 7</span></label>
</div>
<div class="ef-semantic-differential__endpoints ef-semantic-differential__endpoints--mobile">
<span>1 = Highly manual</span>
<span>7 = Highly automated</span>
</div>
</fieldset>