Dark
Light
<label class="doi-choice"><input class="doi-checkbox" type="checkbox"> Press releases</label>
<label class="doi-choice"><input class="doi-radio" type="radio" name="freq"> Daily briefing</label>
<label class="doi-choice"><input class="doi-toggle" type="checkbox" role="switch"> Poor reception</label>States
| Default | Hover | Focus | Disabled | |
|---|---|---|---|---|
| Checkbox off | ||||
| Checkbox on | ||||
| Checkbox mixed | ||||
| Radio off | ||||
| Radio on | ||||
| Toggle off | ||||
| Toggle on |
Guidelines
Do
Use a toggle only when the change takes effect immediately. Use a checkbox when it applies after pressing Save.
Don't
Use radios for a single yes/no choice; that's a checkbox.