Illustration input checkbox
An illustration checkbox button is similar to a radio button illustration but with the important difference being multiple values can be selected on and off in the set of checkboxes.
An illustration checkbox is an element representing a set of values.
An illustration icon is displayed where you can include any SVG illustration within the label content.
Usage
Place as many illustration checkbox buttons on a page as you need. Each radio button must have a unique ID and each group of radio buttons must have the same name.
The name of the checkbox buttons group them together.
Accessible attributes
| Accessible attribute | Description |
|---|---|
role="group" |
Container for a group of radio buttons |
aria-checked="false" |
Identifies checkbox buttons which are not checked. |
aria-checked="true" |
Identifies checkbox buttons which are checked. |
forms\illustration-checkbox-input.hbs
<form>
<fieldset role="group" aria-label="Illustration Checkbox Example Group">
<legend class="sr-only">Illustration Checkbox Group</legend>
<div class="slb-form__group-inline">
<input type="checkbox" class="slb-form__control-illustration" id="checkboxButtonExample-slb-form__control-illustration-1" name="checkboxButtonExample-slb-form__control-illustration" aria-checked="true" checked="checked" value="value1">
<label for="checkboxButtonExample-slb-form__control-illustration-1" class="slb-form__label">
<svg class="slb-illustration" width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g fill="none" fill-rule="evenodd"><path class="illustration-main" fill="#0A2F73" d="M49.954 99.645C22.571 99.645.31 77.384.31 50 .31 22.616 22.571.355 49.954.355 77.338.355 99.6 22.616 99.6 50c0 27.384-22.262 49.645-49.646 49.645zm0-96.335C24.245 3.31 3.264 24.29 3.264 50c0 25.71 20.981 46.69 46.69 46.69 25.71 0 46.69-20.98 46.69-46.69 0-25.71-20.98-46.69-46.69-46.69z"/><path class="illustration-highlight" fill="#147CB3" d="M46.802 89.99c-.394 0-.886 0-1.28-.098-1.38-.197-2.364-.887-2.955-1.773-.493-.985-.493-2.069-.493-3.054v-.985c-.197-1.28-.492-2.364-.886-3.349v-.098c0-.099-.099-.197-.099-.296l-.197-.197c-.098-.197-.394-.394-.69-.59-.393-.296-.787-.592-1.181-.986a6.275 6.275 0 0 1-1.478-3.152c-.197-.788-.197-1.674-.295-2.364 0-.887-.099-1.675-.394-2.364-.197-.591-.788-1.182-1.675-1.773-.788-.394-1.773-.69-2.758-.985-.985-.296-2.069-.591-3.152-1.182-2.463-1.28-3.842-3.054-4.334-5.122v-.099c0-.295-.099-.59-.099-.886 0-.493-.098-.985-.197-1.38-.197-.886-.886-1.674-1.477-2.56-.69-.985-1.478-1.97-1.872-3.251-.59-1.773-.197-5.024 2.069-6.107h.098c.394-.197 1.675-1.478 2.758-2.857 1.675-3.546 3.94-4.137 5.615-3.94.887.099 1.675.296 2.364.591.296.099.493.197.788.296 1.97.59 4.137.394 6.403.197 1.773-.197 3.349-.099 5.319.886 1.773.788 3.743 2.069 5.812 3.743 1.379.887 2.56 1.28 3.349.985.886-.394 1.182-1.674 1.28-1.674v-.099c.493-1.576-.197-2.167-.492-2.364-1.97-.197-3.94-1.182-5.221-2.758-1.182-1.379-2.266-1.97-3.546-2.068-1.28 0-2.463.492-3.743.985-1.28.59-2.66 1.083-4.236 1.28a4.977 4.977 0 0 1-3.053-.69l-.099-.098c-1.083-.788-1.576-1.773-1.871-2.463-.887-1.97-.69-3.94.59-5.516.887-1.083 2.956-2.856 4.827-3.25l12.412-2.955c1.576-.394 3.152-.985 4.53-1.97.592-.394 1.183-1.084 1.577-1.97.197-.394.197-.788.295-1.38.099-.492.197-.886.296-1.477.295-.887.886-1.872 1.773-2.561 2.167-1.97 4.826-2.266 7.19-2.463 2.168-.197 3.94-.394 5.418-1.674.591-.591 1.576-.493 2.069.098.59.591.492 1.576-.099 2.069-2.167 1.97-4.728 2.167-7.092 2.462-2.167.197-4.039.394-5.516 1.773-.394.394-.788.788-.887 1.182-.098.395-.197.69-.197 1.084-.098.591-.197 1.28-.492 1.97 0 0 0 .099-.099.099-.69 1.379-1.576 2.462-2.56 3.152-1.675 1.182-3.547 1.871-5.418 2.364l-12.51 2.955c-.985.197-2.463 1.379-3.25 2.265-.395.394-.789 1.084-.198 2.463.296.591.493.985.788 1.182.296.197.788.295 1.28.295 1.183-.098 2.266-.492 3.35-.985 1.477-.59 3.152-1.28 5.023-1.28 2.857.098 4.532 1.674 5.714 3.054.886.985 2.167 1.674 3.447 1.773.197 0 .296 0 .493.098 1.28.493 3.447 2.463 2.364 6.009-.099.492-.788 2.758-2.955 3.644-1.773.69-3.842.296-6.107-1.28l-.099-.099c-1.872-1.576-3.645-2.758-5.32-3.447-1.28-.591-2.166-.788-3.742-.591-2.463.197-5.024.394-7.585-.394l-.886-.296c-.591-.197-1.183-.394-1.675-.492-.394 0-1.576-.099-2.758 2.364 0 .098-.099.197-.197.295-.788.985-2.561 3.25-3.94 3.842-.493.295-.788 1.674-.493 2.56.296.789.788 1.577 1.38 2.365.787.985 1.575 2.167 1.97 3.645.196.69.196 1.28.295 1.871 0 .197 0 .493.098.69.296 1.182 1.182 2.167 2.758 3.053.788.394 1.675.69 2.562.985 1.182.296 2.364.69 3.447 1.38 1.478.984 2.364 1.97 2.758 3.053.493 1.083.493 2.364.591 3.349 0 .69 0 1.28.197 1.872.197.689.493 1.379.887 1.871.098.197.394.296.59.493.395.295.986.69 1.38 1.28.295.394.492.788.59 1.182.493 1.182.789 2.463 1.084 4.039.099.492 0 .985 0 1.477 0 .493 0 1.28.099 1.478.098.098.394.295.788.295 2.56.296 5.22-.69 7.88-1.773l.69-.295c.098 0 .098 0 .197-.099.394-.098 3.644-1.083 2.66-7.289v-.197c0-.197-.198-5.024 3.644-7.88.69-.493 1.182-1.773 1.083-2.955 0-.099-.098-.296-.098-.493-.099-.69-.296-1.576-.099-2.462.591-2.66 3.448-3.448 5.221-3.842.394-.788.886-1.576 1.675-2.265 1.182-1.084 2.758-1.577 4.432-1.38.197-.394.493-.985.788-1.674l.099-.099s0-.098.098-.098a7.36 7.36 0 0 1 2.463-2.463l1.182-.59c.59-.296 1.083-.493 1.477-.887.296-.296.296-.394.296-.493 0-.098-.197-.394-.591-.69-.887-.59-1.97-.886-3.054-1.28-1.674-.492-3.546-1.083-4.925-2.56-.985-.986-.985-1.97-.886-2.463.295-1.478 1.674-2.463 2.56-2.857 1.97-.985 3.744-1.477 5.517-1.182 1.871.296 3.25.887 4.235 1.872.788.69 1.182 1.674 1.576 2.56.099.296.296.69.493.986.591 1.182 1.379 2.462 2.266 3.447.492.591 1.083 1.084 1.674 1.38.197.098.296.098.493.196.69.197 1.674.591 2.167 1.773.69 1.675 1.083 3.35 1.379 4.925l.197.887c.197.887.886 2.069 1.773 2.857.59.59.59 1.477 0 2.068-.591.591-1.478.591-2.069 0-1.182-1.182-2.167-2.856-2.56-4.334l-.198-.985c-.295-1.478-.59-2.955-1.182-4.334a.752.752 0 0 0-.492-.197c-.296-.099-.493-.197-.788-.296a9.86 9.86 0 0 1-2.562-2.068c-1.083-1.182-1.871-2.561-2.66-4.039l-.59-1.182c-.296-.59-.493-1.28-.887-1.576-.59-.59-1.379-.886-2.66-1.083-1.083-.099-2.363.197-3.742.886-.493.296-.788.493-.985.69.886.886 2.265 1.28 3.644 1.773 1.28.394 2.66.788 3.842 1.576 1.083.69 1.773 1.674 1.97 2.66.197 1.083-.296 2.068-1.182 3.053-.788.69-1.576 1.083-2.167 1.379-.296.197-.591.295-.887.492a5.276 5.276 0 0 0-1.477 1.478v.098c-.591 1.183-.887 1.675-.985 1.97 0 .198 0 .395-.099.592-.295.788-1.083 1.182-1.871.886-1.773-.69-2.66.099-2.955.394-.493.493-.887 1.084-1.281 1.97-.197.493-.591.788-1.083.887-1.774.295-3.35.69-3.645 1.773-.099.295 0 .788.098 1.182 0 .295.099.492.099.788.098 1.871-.493 4.334-2.266 5.614-2.364 1.773-2.462 4.827-2.462 5.32 1.182 8.175-3.842 10.145-4.827 10.44l-.59.198c-2.463 1.576-5.222 2.66-7.98 2.66zM74.68 56.697c.098 0 .098 0 .197.098-.099-.098-.099-.098-.197-.098zM22.57 20.842c-.591 0-1.28-.099-1.773-.296a4.282 4.282 0 0 1-2.463-2.266c-.394-.788 0-1.576.69-1.97.788-.295 1.576 0 1.97.69.197.295.394.59.788.69 1.28.393 3.447-.296 4.728-.986l.394-.197c1.576-.788 3.546-1.773 5.615-1.576 1.182.099 2.265.591 3.152.985 1.182.493 2.167.887 2.955.591.492-.197.886-.59 1.379-1.083.492-.493.985-.985 1.674-1.478 1.182-.69 2.66-.985 3.842-1.182h.098c.985-.197 1.773-.492 2.069-.985.295-.394.197-1.182-.197-1.871-.394-.69-1.872-2.364-2.66-3.054-.59-.492-.69-1.477-.098-2.068.492-.591 1.477-.69 2.068-.099.69.69 2.758 2.66 3.448 4.039.788 1.576.788 3.349 0 4.63-.69 1.181-2.167 2.068-4.039 2.363h-.098c-.985.197-2.069.394-2.758.788-.394.197-.788.591-1.084.985-.69.69-1.379 1.38-2.462 1.773-1.872.69-3.546 0-5.122-.689-.788-.394-1.576-.69-2.365-.69-1.28-.098-2.66.591-3.94 1.281l-.394.197c-.492.197-2.955 1.478-5.417 1.478zm-3.743 62.352c-.788 0-1.38-.591-1.478-1.38-.197-1.772-2.66-4.333-4.137-5.417-4.531-3.349-5.024-10.244-5.122-11.82-.099-.887 0-1.675.098-2.364C9.962 50.885 5.136 48.619 4.94 48.52c-.69-.296-1.084-1.182-.788-1.97.295-.788 1.182-1.084 1.871-.788.296.098 7.191 3.053 5.024 16.844-.099.59-.197 1.182-.099 1.674v.197c0 .69.394 6.895 3.94 9.654.493.394 4.926 3.841 5.32 7.584.098.788-.493 1.576-1.38 1.576.1-.098 0-.098 0-.098z"/></g></svg>
<span class="slb-form__label-body">Lorem ipsum</span>
</label>
</div>
<div class="slb-form__group-inline">
<input type="checkbox" class="slb-form__control-illustration" id="checkboxButtonExample-slb-form__control-illustration-2" name="checkboxButtonExample-slb-form__control-illustration" aria-checked="false" value="value2">
<label for="checkboxButtonExample-slb-form__control-illustration-2" class="slb-form__label">
<svg class="slb-illustration" width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g fill="none" fill-rule="evenodd"><path class="illustration-main" fill="#0A2F73" d="M49.954 99.645C22.571 99.645.31 77.384.31 50 .31 22.616 22.571.355 49.954.355 77.338.355 99.6 22.616 99.6 50c0 27.384-22.262 49.645-49.646 49.645zm0-96.335C24.245 3.31 3.264 24.29 3.264 50c0 25.71 20.981 46.69 46.69 46.69 25.71 0 46.69-20.98 46.69-46.69 0-25.71-20.98-46.69-46.69-46.69z"/><path class="illustration-highlight" fill="#147CB3" d="M46.802 89.99c-.394 0-.886 0-1.28-.098-1.38-.197-2.364-.887-2.955-1.773-.493-.985-.493-2.069-.493-3.054v-.985c-.197-1.28-.492-2.364-.886-3.349v-.098c0-.099-.099-.197-.099-.296l-.197-.197c-.098-.197-.394-.394-.69-.59-.393-.296-.787-.592-1.181-.986a6.275 6.275 0 0 1-1.478-3.152c-.197-.788-.197-1.674-.295-2.364 0-.887-.099-1.675-.394-2.364-.197-.591-.788-1.182-1.675-1.773-.788-.394-1.773-.69-2.758-.985-.985-.296-2.069-.591-3.152-1.182-2.463-1.28-3.842-3.054-4.334-5.122v-.099c0-.295-.099-.59-.099-.886 0-.493-.098-.985-.197-1.38-.197-.886-.886-1.674-1.477-2.56-.69-.985-1.478-1.97-1.872-3.251-.59-1.773-.197-5.024 2.069-6.107h.098c.394-.197 1.675-1.478 2.758-2.857 1.675-3.546 3.94-4.137 5.615-3.94.887.099 1.675.296 2.364.591.296.099.493.197.788.296 1.97.59 4.137.394 6.403.197 1.773-.197 3.349-.099 5.319.886 1.773.788 3.743 2.069 5.812 3.743 1.379.887 2.56 1.28 3.349.985.886-.394 1.182-1.674 1.28-1.674v-.099c.493-1.576-.197-2.167-.492-2.364-1.97-.197-3.94-1.182-5.221-2.758-1.182-1.379-2.266-1.97-3.546-2.068-1.28 0-2.463.492-3.743.985-1.28.59-2.66 1.083-4.236 1.28a4.977 4.977 0 0 1-3.053-.69l-.099-.098c-1.083-.788-1.576-1.773-1.871-2.463-.887-1.97-.69-3.94.59-5.516.887-1.083 2.956-2.856 4.827-3.25l12.412-2.955c1.576-.394 3.152-.985 4.53-1.97.592-.394 1.183-1.084 1.577-1.97.197-.394.197-.788.295-1.38.099-.492.197-.886.296-1.477.295-.887.886-1.872 1.773-2.561 2.167-1.97 4.826-2.266 7.19-2.463 2.168-.197 3.94-.394 5.418-1.674.591-.591 1.576-.493 2.069.098.59.591.492 1.576-.099 2.069-2.167 1.97-4.728 2.167-7.092 2.462-2.167.197-4.039.394-5.516 1.773-.394.394-.788.788-.887 1.182-.098.395-.197.69-.197 1.084-.098.591-.197 1.28-.492 1.97 0 0 0 .099-.099.099-.69 1.379-1.576 2.462-2.56 3.152-1.675 1.182-3.547 1.871-5.418 2.364l-12.51 2.955c-.985.197-2.463 1.379-3.25 2.265-.395.394-.789 1.084-.198 2.463.296.591.493.985.788 1.182.296.197.788.295 1.28.295 1.183-.098 2.266-.492 3.35-.985 1.477-.59 3.152-1.28 5.023-1.28 2.857.098 4.532 1.674 5.714 3.054.886.985 2.167 1.674 3.447 1.773.197 0 .296 0 .493.098 1.28.493 3.447 2.463 2.364 6.009-.099.492-.788 2.758-2.955 3.644-1.773.69-3.842.296-6.107-1.28l-.099-.099c-1.872-1.576-3.645-2.758-5.32-3.447-1.28-.591-2.166-.788-3.742-.591-2.463.197-5.024.394-7.585-.394l-.886-.296c-.591-.197-1.183-.394-1.675-.492-.394 0-1.576-.099-2.758 2.364 0 .098-.099.197-.197.295-.788.985-2.561 3.25-3.94 3.842-.493.295-.788 1.674-.493 2.56.296.789.788 1.577 1.38 2.365.787.985 1.575 2.167 1.97 3.645.196.69.196 1.28.295 1.871 0 .197 0 .493.098.69.296 1.182 1.182 2.167 2.758 3.053.788.394 1.675.69 2.562.985 1.182.296 2.364.69 3.447 1.38 1.478.984 2.364 1.97 2.758 3.053.493 1.083.493 2.364.591 3.349 0 .69 0 1.28.197 1.872.197.689.493 1.379.887 1.871.098.197.394.296.59.493.395.295.986.69 1.38 1.28.295.394.492.788.59 1.182.493 1.182.789 2.463 1.084 4.039.099.492 0 .985 0 1.477 0 .493 0 1.28.099 1.478.098.098.394.295.788.295 2.56.296 5.22-.69 7.88-1.773l.69-.295c.098 0 .098 0 .197-.099.394-.098 3.644-1.083 2.66-7.289v-.197c0-.197-.198-5.024 3.644-7.88.69-.493 1.182-1.773 1.083-2.955 0-.099-.098-.296-.098-.493-.099-.69-.296-1.576-.099-2.462.591-2.66 3.448-3.448 5.221-3.842.394-.788.886-1.576 1.675-2.265 1.182-1.084 2.758-1.577 4.432-1.38.197-.394.493-.985.788-1.674l.099-.099s0-.098.098-.098a7.36 7.36 0 0 1 2.463-2.463l1.182-.59c.59-.296 1.083-.493 1.477-.887.296-.296.296-.394.296-.493 0-.098-.197-.394-.591-.69-.887-.59-1.97-.886-3.054-1.28-1.674-.492-3.546-1.083-4.925-2.56-.985-.986-.985-1.97-.886-2.463.295-1.478 1.674-2.463 2.56-2.857 1.97-.985 3.744-1.477 5.517-1.182 1.871.296 3.25.887 4.235 1.872.788.69 1.182 1.674 1.576 2.56.099.296.296.69.493.986.591 1.182 1.379 2.462 2.266 3.447.492.591 1.083 1.084 1.674 1.38.197.098.296.098.493.196.69.197 1.674.591 2.167 1.773.69 1.675 1.083 3.35 1.379 4.925l.197.887c.197.887.886 2.069 1.773 2.857.59.59.59 1.477 0 2.068-.591.591-1.478.591-2.069 0-1.182-1.182-2.167-2.856-2.56-4.334l-.198-.985c-.295-1.478-.59-2.955-1.182-4.334a.752.752 0 0 0-.492-.197c-.296-.099-.493-.197-.788-.296a9.86 9.86 0 0 1-2.562-2.068c-1.083-1.182-1.871-2.561-2.66-4.039l-.59-1.182c-.296-.59-.493-1.28-.887-1.576-.59-.59-1.379-.886-2.66-1.083-1.083-.099-2.363.197-3.742.886-.493.296-.788.493-.985.69.886.886 2.265 1.28 3.644 1.773 1.28.394 2.66.788 3.842 1.576 1.083.69 1.773 1.674 1.97 2.66.197 1.083-.296 2.068-1.182 3.053-.788.69-1.576 1.083-2.167 1.379-.296.197-.591.295-.887.492a5.276 5.276 0 0 0-1.477 1.478v.098c-.591 1.183-.887 1.675-.985 1.97 0 .198 0 .395-.099.592-.295.788-1.083 1.182-1.871.886-1.773-.69-2.66.099-2.955.394-.493.493-.887 1.084-1.281 1.97-.197.493-.591.788-1.083.887-1.774.295-3.35.69-3.645 1.773-.099.295 0 .788.098 1.182 0 .295.099.492.099.788.098 1.871-.493 4.334-2.266 5.614-2.364 1.773-2.462 4.827-2.462 5.32 1.182 8.175-3.842 10.145-4.827 10.44l-.59.198c-2.463 1.576-5.222 2.66-7.98 2.66zM74.68 56.697c.098 0 .098 0 .197.098-.099-.098-.099-.098-.197-.098zM22.57 20.842c-.591 0-1.28-.099-1.773-.296a4.282 4.282 0 0 1-2.463-2.266c-.394-.788 0-1.576.69-1.97.788-.295 1.576 0 1.97.69.197.295.394.59.788.69 1.28.393 3.447-.296 4.728-.986l.394-.197c1.576-.788 3.546-1.773 5.615-1.576 1.182.099 2.265.591 3.152.985 1.182.493 2.167.887 2.955.591.492-.197.886-.59 1.379-1.083.492-.493.985-.985 1.674-1.478 1.182-.69 2.66-.985 3.842-1.182h.098c.985-.197 1.773-.492 2.069-.985.295-.394.197-1.182-.197-1.871-.394-.69-1.872-2.364-2.66-3.054-.59-.492-.69-1.477-.098-2.068.492-.591 1.477-.69 2.068-.099.69.69 2.758 2.66 3.448 4.039.788 1.576.788 3.349 0 4.63-.69 1.181-2.167 2.068-4.039 2.363h-.098c-.985.197-2.069.394-2.758.788-.394.197-.788.591-1.084.985-.69.69-1.379 1.38-2.462 1.773-1.872.69-3.546 0-5.122-.689-.788-.394-1.576-.69-2.365-.69-1.28-.098-2.66.591-3.94 1.281l-.394.197c-.492.197-2.955 1.478-5.417 1.478zm-3.743 62.352c-.788 0-1.38-.591-1.478-1.38-.197-1.772-2.66-4.333-4.137-5.417-4.531-3.349-5.024-10.244-5.122-11.82-.099-.887 0-1.675.098-2.364C9.962 50.885 5.136 48.619 4.94 48.52c-.69-.296-1.084-1.182-.788-1.97.295-.788 1.182-1.084 1.871-.788.296.098 7.191 3.053 5.024 16.844-.099.59-.197 1.182-.099 1.674v.197c0 .69.394 6.895 3.94 9.654.493.394 4.926 3.841 5.32 7.584.098.788-.493 1.576-1.38 1.576.1-.098 0-.098 0-.098z"/></g></svg>
<span class="slb-form__label-body">dolor sit amet</span>
</label>
</div>
</fieldset>
</form>
Source:
components/forms/_form-control-illustration-checkbox.scss