Checkboxes and radio buttons
Checkboxes and radio buttons need to follow the following markup structure:
A single checkbox
Not too different than other inputs:
<form class="semanticForms">
<dl>
<div>
<dt><label for="some_field_name">Single checkbox</label></dt>
<dd><input type="checkbox" name="some_field_name" id="some_field_name"></dd>
</div>
</dl>
</form>A switch
Adding the switch attribute to a checkbox turns it into a switch. Browsers that support the attribute natively render one themselves; in the rest, Semantic Forms draws the switch and applies the switch ARIA role. It can be toggled by clicking it, by dragging the thumb across the track, or from the keyboard the same way a checkbox can.
<form class="semanticForms">
<dl>
<div>
<dt><label for="some_switch">Switch</label></dt>
<dd><input type="checkbox" switch name="some_switch" id="some_switch"></dd>
</div>
</dl>
</form>The colors are set by the --semanticFormsSwitchOnColor, --semanticFormsSwitchOffColor, and --semanticFormsSwitchThumbColor CSS variables.
Checkbox group
<form class="semanticForms">
<dl>
<div>
<dt><label data-for="some_checkboxes">Checkboxes:</label></dt>
<dd class="checkboxes">
<ul id="some_checkboxes">
<li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_one"> <label for="some_field_name_checkboxes_one">One</label></li>
<li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_two"> <label for="some_field_name_checkboxes_two">Two</label></li>
<li><input type="checkbox" name="some_field_name" id="some_field_name_checkboxes_three"> <label for="some_field_name_checkboxes_three">Three</label></li>
</ul>
</dd>
</div>
</dl>
</form>Radio buttons
<form class="semanticForms">
<dl>
<div>
<dt><label data-for="some_radios">Radios:</label></dt>
<dd class="radios">
<ul id="some_radios">
<li><input type="radio" name="some_field_name" id="some_field_name_radios_one"> <label for="some_field_name_radios_one">One</label></li>
<li><input type="radio" name="some_field_name" id="some_field_name_radios_two"> <label for="some_field_name_radios_two">Two</label></li>
<li><input type="radio" name="some_field_name" id="some_field_name_radios_three"> <label for="some_field_name_radios_three">Three</label></li>
</ul>
</dd>
</div>
</dl>
</form>