Checklist

The checklist component, prefixed by gds-checklist, denotes a list of tasks along with each task's current state of completion or incompletion.

Prototypes Page

<ul class="gds-checklist">
    <li class="gds-checklist__item gds-checklist__item--sm gds-checklist__item--completed">
        <span class="gds-checklist__item-text">Milk</span>
    </li>
    <li class="gds-checklist__item gds-checklist__item--sm gds-checklist__item--completed">
        <span class="gds-checklist__item-text">Bread</span>
    </li>
    <li class="gds-checklist__item gds-checklist__item--sm gds-checklist__item--active">
        <span class="gds-checklist__item-text">Eggs</span>
    </li>
    <li class="gds-checklist__item gds-checklist__item--sm">
        <span class="gds-checklist__item-text">Waffles</span>
    </li>
</ul>

Optional classes:

• gds-checklist__item--sm
• gds-checklist__item--lg
• gds-checklist__item--inverse
• gds-checklist__item--active
• gds-checklist__item--completed