Styled HTML Checkboxes
Published: July 26, 2018
Last updated: December 16, 2018
Cross-browser styling for native HTML checkboxes.
Pattern Demos
Visually Hidden Checkboxes
Option 1
Option 2
(this option is disabled)
Option 3 is required
Single Element Checkboxes
Option 1
Option 2
(this option is disabled)
Option 3 is required
Pattern Details
Pattern Markup: Visually Hidden Checkbox
<!– visually hidden –>
<div class=”c-cb”>
<input type=”checkbox” id=”c_input_1″ checked>
<label for=”c_input_1″>
Option 1
</label>
</div>
Pattern Markup: Restyled Checkbox
<!– restyled input –>
<div class=”s-cb”>
<input type=”checkbox” id=”s_input_1″ checked>
<label for=”s_input_1″>
Option 1
</label>
</div>
When customizing any form control, it must remain accessible to assistive technology and keyboard users. To keep this custom style accessible, a visually hidden checkbox, or restyling the checkbox directly are the cornerstones of maintaining the accessibility of this form control.
Without the utilizing the native checkbox, all expected functionality, including keyboard focus and appropriate announcements to screen readers, would need to be rewritten using JavaScript and necessary ARIA attributes. This would significantly inflate the development effort needed to create a custom styled checkbox.
Visually hidden checkbox details
For the visually hidden checkboxes, the primary purpose of the wrapping element (div with the .c-cb class) is to [...]