Checkbox / Radio

Link to Figma View all renders

Checkboxes should be rendered as the input wrapped by an input field component. See input field. 

<label class="check-radio" for="check-radio-checkbox">
    <input id="check-radio-checkbox" type="checkbox" name="check-radio-checkbox">
    label
</label>
<label class="check-radio" for="check-radio-checkbox-checked">
    <input id="check-radio-checkbox-checked" type="checkbox" name="check-radio-checkbox-checked" checked>
    label
</label>

Radio buttons should always be wrapped in a fieldset and include a legend element. Like checkboxes, they must be used as part of an input-field. 

<fieldset class="flex gap-m">
    <legend class="copy copy--bold micro-spacing--fixed-desktop">radio buttons</legend>
    <label class="check-radio" for="checkbox-radio-1">
        <input id="checkbox-radio-1" type="radio" name="radio" value="radio-1">
        label
    </label>
    <label class="check-radio" for="checkbox-radio-2">
        <input id="checkbox-radio-2" type="radio" name="radio" value="radio-2">
        label
    </label>
</fieldset>

Variations and modifiers

Size

Checkboxes and radios can be large, they are medium by default. 

<label class="check-radio check-radio--large" for="checkbox-large">
    <input id="checkbox-large" type="checkbox" name="checkbox-large">
    label
</label>
<label class="check-radio check-radio--large" for="checkbox-large-radio">
    <input id="checkbox-large-radio" type="radio" name="checkbox-large-radio" value="checkbox-large-radio">
    label
</label>

Stacked

Checkboxes and radios can be stacked, the default position is left aligned. 

<label class="check-radio check-radio--stacked" for="checkbox-stacked">
    <input id="checkbox-stacked" type="checkbox" name="checkbox-stacked">
    label
</label>
<label class="check-radio check-radio check-radio--stacked" for="checkbox-stacked-radio">
    <input id="checkbox-stacked-radio" type="radio" name="checkbox-stacked-radio" value="checkbox-stacked-radio">
    label
</label>

Left Aligned

Stacked checkboxes and radios can also be left aligned. Checkboxes are centered by default. 

<label class="check-radio check-radio--stacked check-radio--left" for="checkbox-stacked-left">
    <input id="checkbox-stacked-left" type="checkbox" name="checkbox-stacked-left">
    label
</label>
<label class="check-radio check-radio--stacked check-radio--left" for="checkbox-stacked-left-radio">
    <input id="checkbox-stacked-left-radio" type="radio" name="checkbox-stacked-left-radio" value="checkbox-stacked-left-radio">
    label
</label>