Native inputs, restyled: keyboard, forms and screen readers work without JS. One "on" colour (black; yellow in dark) instead of the three the product uses today. Each sits in a label that's the hit area; on touch it grows to 44px.
Checkbox
| Default | Hover | Focus | Disabled | |
|---|---|---|---|---|
| off | ||||
| on | ||||
| mixed |
Radio
Toggle
For settings that apply immediately. If the change needs a Save button, use a checkbox.
<label class="choice"><input type="checkbox" class="checkbox"> Always build from scratch</label>
<label class="choice"><input type="radio" class="radio" name="mode"> Profit</label>
<label class="choice"><input type="checkbox" role="switch" class="toggle"> Show getting started</label>