Switch
An on and off switch for a setting, with the state written next to it. It applies when the person saves, like any field.
On this page
Playground
State
Background
<label class="feitio-switch" data-on="On" data-off="Off"><input type="checkbox" role="switch">E-mail notices<span class="state">Off</span></label>When to use
- To turn a setting on or off on a settings page: reminders, a notification, a feature.
When not to use
- To agree to something (terms, permissions): Checkbox.
- To choose between options: Radios or SegmentedControl.
Examples
In a settings form
The switch changes the written state right away, but the setting only applies when the person saves; feedback shows on the form.
Show code
<label class="feitio-switch">
<input type="checkbox" role="switch" name="lembretes" checked>
Lembretes do dia
<span class="state">Ligado</span>
</label>States
Accessibility
- It is a checkbox with
role="switch": screen readers announce "on" or "off". - The state is also written next to it: the dot’s position is not enough.
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-switch" | on the <label> | The switch, the text and the state. |
role="switch" | on the input | Screen readers announce on or off. |
class="state" | the state | "On" or "Off", in words. |