Checkbox @checkbox
Checkbox @checkbox--unchecked
<label class="checkbox" for="checkbox-41a5"><input class="checkbox__input" type="checkbox" id="checkbox-41a5" name="checkbox-41a5" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Default</span></label>{
"text": "Default",
"checked": null
}
Checkbox (checked) @checkbox--checked
<label class="checkbox" for="checkbox-a945"><input class="checkbox__input" type="checkbox" checked="checked" id="checkbox-a945" name="checkbox-a945" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Checked</span></label>{
"text": "Checked",
"checked": true
}
Checkbox (disabled) @checkbox--unchecked-disabled
<label class="checkbox" for="checkbox-8cfa"><input class="checkbox__input" type="checkbox" disabled="disabled" id="checkbox-8cfa" name="checkbox-8cfa" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Disable</span></label>{
"text": "Disable",
"checked": null,
"disabled": true
}
Checkbox (disabled, checked) @checkbox--checked-disabled
<label class="checkbox" for="checkbox-bba4"><input class="checkbox__input" type="checkbox" checked="checked" disabled="disabled" id="checkbox-bba4" name="checkbox-bba4" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Disable</span></label>{
"text": "Disable",
"checked": true,
"disabled": true
}
Checkbox (invalid, checked) @checkbox--checked-invalid
<label class="checkbox" for="checkbox-8c2d"><input class="checkbox__input" type="checkbox" checked="checked" aria-invalid="true" id="checkbox-8c2d" name="checkbox-8c2d" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Error</span></label>{
"text": "Error",
"checked": true,
"invalid": true
}
Checkbox (invalid) @checkbox--unchecked-invalid
<label class="checkbox" for="checkbox-90e7"><input class="checkbox__input" type="checkbox" aria-invalid="true" id="checkbox-90e7" name="checkbox-90e7" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
<use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Error</span></label>{
"text": "Error",
"checked": null,
"invalid": true
}