Notice: the Design Language has been migrated - You will find the new URL to call the assets from the current Design Language.
See more details regarding this Migration
Checklist
A checklist can be used as an interactive tool for users to mark off items as completed. It should be used for listed content, and we recommend including both a heading and body copy to support each item. Upon clicking the heading or the check box, the text will strike through and a check mark appear to indicate it’s been done. This component also uses internal browser storage. If you leave the page, once you return, the component will remember which items you have checked.
Usage
For heading only lists, we’d recommend using a small container. For heading and body copy, we’d recommend using a medium container and the body copy to be no longer than 200 characters.
<form class="rc-checklist" data-rc-checklist="">
<h2 class="rc-beta rc-margin-bottom--xl rc-margin-bottom--sm--desktop">Checklist</h2>
<div class="rc-checklist-row rc-margin-bottom--xl rc-margin-bottom--md--desktop">
<label class="rc-checklist-row__label">
<input type="checkbox" class="rc-checklist-row__input form-checkbox" />
<span class="rc-checklist-row__title-container">
<span class="rc-checklist-row__title rc-delta">Wake up in the morning</span>
</span>
</label>
<p class="rc-checklist-row__subtitle rc-body rc-margin-top--xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non varius urna. Fusce efficitur urna sem, sed cursus nulla rhoncus in. Vivamus enim lacus, consequat a placerat id, commodo et sapien.</p>
</div>
<div class="rc-checklist-row rc-margin-bottom--xl rc-margin-bottom--md--desktop">
<label class="rc-checklist-row__label">
<input type="checkbox" class="rc-checklist-row__input form-checkbox" />
<span class="rc-checklist-row__title-container">
<span class="rc-checklist-row__title rc-delta">Wake up in the morning 2</span>
</span>
</label>
<p class="rc-checklist-row__subtitle rc-body rc-margin-top--xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non varius urna. Fusce efficitur urna sem, sed cursus nulla rhoncus in. Vivamus enim lacus, consequat a placerat id, commodo et sapien.</p>
</div>
<div class="rc-checklist-row rc-margin-bottom--xl rc-margin-bottom--md--desktop">
<label class="rc-checklist-row__label">
<input type="checkbox" class="rc-checklist-row__input form-checkbox" />
<span class="rc-checklist-row__title-container">
<span class="rc-checklist-row__title rc-delta">Wake up in the morning 3</span>
</span>
</label>
<p class="rc-checklist-row__subtitle rc-body rc-margin-top--xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non varius urna. Fusce efficitur urna sem, sed cursus nulla rhoncus in. Vivamus enim lacus, consequat a placerat id, commodo et sapien.</p>
</div>
</form>Copied!