Switch
A checkbox-backed on/off preference control with role=switch and a visible track/thumb treatment.
Canonical sourcepatterns/switch.html
Behavior ownerNative HTML
Runtime inside FormaNone
Example 1
Canonical
Canonical repository markup, namespaced only to keep examples independent.
View HTML
<label class="ef-switch">
<input
class="ef-switch__input"
type="checkbox"
role="switch"
name="ex1-switch-notifications"
value="enabled"
aria-describedby="ex1-switch-notifications-description">
<span class="ef-switch__track" aria-hidden="true"></span>
<span class="ef-switch__text">
<span class="ef-switch__label">Notifications</span>
<span class="ef-switch__description" id="ex1-switch-notifications-description">Receive operational updates.</span>
</span>
</label>Example 2
Representative state
A browser-native state made visible without adding a runtime.
View HTML
<label class="ef-switch">
<input
class="ef-switch__input"
type="checkbox"
role="switch"
name="ex2-switch-notifications"
value="enabled"
aria-describedby="ex2-switch-notifications-description" checked>
<span class="ef-switch__track" aria-hidden="true"></span>
<span class="ef-switch__text">
<span class="ef-switch__label">Notifications</span>
<span class="ef-switch__description" id="ex2-switch-notifications-description">Receive operational updates.</span>
</span>
</label>Example 3
Constrained layout
The canonical contract inside a narrow application region.
View HTML
<label class="ef-switch">
<input
class="ef-switch__input"
type="checkbox"
role="switch"
name="ex3-switch-notifications"
value="enabled"
aria-describedby="ex3-switch-notifications-description">
<span class="ef-switch__track" aria-hidden="true"></span>
<span class="ef-switch__text">
<span class="ef-switch__label">Notifications</span>
<span class="ef-switch__description" id="ex3-switch-notifications-description">Receive operational updates.</span>
</span>
</label>