Components

Checkboxes

Use checkboxes when the user can select more than one option from a group. Make clear with helper text that this is the case. Use radio buttons when the user can select only one choice from a group.

Types

Checkbox

States








Validation status



HTML code snippet

<!--States are shown for demonstration purposes only-->
<h4>
States
</h4>
<div class="m-form-field m-form-field--checkbox">
    <input class="a-checkbox" type="checkbox" id="test_checkbox">
    <label class="a-label" for="test_checkbox">Enabled</label>
</div>
<br>
<!--Hover-->
<div class="m-form-field m-form-field--checkbox">
    <input class="a-checkbox hover" type="checkbox" id="test_checkbox_basic_hover">
    <label class="a-label" for="test_checkbox_basic_hover">Hover</label>
</div>
<br>
<!--Focus-->
<div class="m-form-field m-form-field--checkbox">
    <input class="a-checkbox focus" type="checkbox" id="test_checkbox_basic_focus">
    <label class="a-label" for="test_checkbox_basic_focus">Focus</label>
</div>
<br>
<!--Selected-->
<div class="m-form-field m-form-field--checkbox">
    <input class="a-checkbox" type="checkbox" id="test_checkbox_basic_checked" checked>
    <label class="a-label" for="test_checkbox_basic_checked">Selected</label>
</div>
<br>
<!--Disabled-->
<div class="m-form-field m-form-field--checkbox">
    <input class="a-checkbox" type="checkbox" id="test_checkbox_basic_disabled" disabled>
    <label class="a-label" for="test_checkbox_basic_disabled">Disabled</label>
</div>
<br>
<!--Disabled/selected-->
<div class="m-form-field m-form-field--checkbox">
    <input class="a-checkbox" type="checkbox" id="test_checkbox_basic_disabled_selected" disabled checked>
    <label class="a-label" for="test_checkbox_basic_disabled_selected">Disabled/selected</label>
</div>
<br><br>
<h4>
Validation status
</h4>
<!--Success-->
<div class="m-form-field
            m-form-field--checkbox
            m-form-field--checkbox-success">
    <input class="a-checkbox" type="checkbox" id="test_checkbox_success">
    <label class="a-label" for="test_checkbox_success">Success</label>
</div>
<br>
<!--Warning-->
<div class="m-form-field
            m-form-field--checkbox
            m-form-field--checkbox-warning">
    <input class="a-checkbox" type="checkbox" id="test_checkbox_warning">
    <label class="a-label" for="test_checkbox_warning">Warning</label>
</div>
<br>
<!--Error-->
<div class="m-form-field
            m-form-field--checkbox
            m-form-field--checkbox-error">
    <input class="a-checkbox" type="checkbox" id="test_checkbox_error">
    <label class="a-label" for="test_checkbox_error">Error</label>
</div>

Checkbox (with helper text)

HTML code snippet

<div class="m-form-field m-form-field--checkbox">
    <input class="a-radio" type="checkbox" id="test_checkbox_basic_helper">
    <label class="a-label" for="test_checkbox_basic_helper">
Label
        <small class="a-label__helper">
            (This is optional helper text)
        </small>
    </label>
</div>

Large target area checkbox

For better usability, consider using the checkboxes with large target areas. These are easier to interact with (especially on smaller screens) and harder to miss. They are especially desirable when the form will have heavy mobile usage. Given the amount of real estate they occupy, they’re probably not suited for all use cases; for example, they may not work well for terms of service agreement checkboxes.






HTML code snippet

<div class="m-form-field
            m-form-field--checkbox
            m-form-field--lg-target">
    <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_default">
    <label class="a-label" for="test_checkbox_lg_default">Enabled</label>
</div>
<br>

<!--Hover-->
<div class="m-form-field
            m-form-field--checkbox
            m-form-field--lg-target">
    <input class="a-checkbox hover" type="checkbox" id="test_checkbox_lg_hover">
    <label class="a-label" for="test_checkbox_lg_hover">Hover</label>
</div>
<br>

<!--Focus-->
<div class="m-form-field
            m-form-field--checkbox
            m-form-field--lg-target">
    <input class="a-checkbox focus" type="checkbox" id="test_checkbox_lg_focus">
    <label class="a-label" for="test_checkbox_lg_focus">Focus</label>
</div>

<br>

<!--Selected-->
<div class="m-form-field
            m-form-field--checkbox
            m-form-field--lg-target">
    <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_checked" checked>
    <label class="a-label" for="test_checkbox_lg_checked">Selected</label>
</div>
<br>

<!--Disabled-->
<div class="m-form-field
            m-form-field--checkbox
            m-form-field--lg-target">
    <input class="a-checkbox" type="checkbox" id="test_checkbox_lg_disabled" disabled>
    <label class="a-label" for="test_checkbox_lg_disabled">Disabled</label>
</div>
<br>

<!--Disabled/Selected-->
<!--
<div class="m-form-field
            m-form-field--checkbox
            m-form-field--lg-target">
    <input class="a-checkbox"
           type="checkbox"
           id="test_checkbox_lg_disabled"
           disabled
           checked>
    <label class="a-label" for="test_checkbox_lg_disabled">Disabled/Selected</label>
</div>
-->

Large target area checkbox (with helper text)

HTML code snippet

<div class="m-form-field
            m-form-field--checkbox
            m-form-field--lg-target">
    <input class="a-checkbox" type="radio" id="test_checkbox_lg_helper">
    <label class="a-label" for="test_checkbox_lg_helper">
       Label
        <small class="a-label__helper">
            (This is optional helper text)
        </small>
      </label>
</div>

Latest Updates

Page last edited:
Show all details
Edit page