Chips

Open in Figma View all renders 
<label class="chip" for="chip">
    chip
    <input id="chip" name="chip" type="checkbox">
</label>
<label class="chip" for="chip-selected">
    chip
    <input id="chip-selected" name="chip-selected" type="checkbox" checked>
</label>

Radiogroup chips

Where chips are used to choose between one of multiple options, use a radiogroup of chips. The example wrapper has flex and gap-m trumps for display purposes only. As long as the containing div has the role="radiogroup" you may lay the chips out as required. 

<div class="flex gap-m" role="radiogroup" aria-label="chip radio group">
    <label class="chip" for="chip-radio">
        chip
        <input id="chip-radio" name="chip-radio-group" type="radio" value="chip-radio">
    </label>
    <label class="chip" for="chip-radio-selected">
        chip
        <input id="chip-radio-selected" name="chip-radio-group" type="radio" value="chip-radio-selected" checked>
    </label>
</div>

Variations and modifiers

Chip sizes

Chips can be modified to be large or small - chips are medium by default. Icons will size themselves relative to the chips text size. 

<label class="chip chip--large" for="chip-large">
    large chip
    <input id="chip-large" name="chip-large" type="checkbox">
</label>
<label class="chip chip--small" for="chip-small">
    small chip
    <input id="chip-small" name="chip-small" type="checkbox">
</label>

Chips with icons

Chips can have icons before or after the chips content. 

<label class="chip" for="chip-icon">
    <span class="material-symbols-rounded" aria-hidden="true">
        check
    </span>
    chip
    <input id="chip-icon" name="chip-icon" type="checkbox">
</label>
<label class="chip" for="chip-icon-suffix">
    chip
    <span class="material-symbols-rounded" aria-hidden="true">
        check
    </span>
    <input id="chip-icon-suffix" name="chip-icon-suffix" type="checkbox">
</label>

Stacked layout

Chips are inline by default, this modifier will stack the chips contents. 

<label class="chip chip--stacked" for="chip-stacked">
   <span class="material-symbols-rounded" aria-hidden="true">
        check
    </span>
    chip
    <input id="chip-stacked" name="chip-stacked" type="checkbox">
</label>

Error status

<label class="chip chip--error" for="chip-error">
    chip
    <input id="chip-error" name="chip-error" type="checkbox">
</label>