Checkbox @checkbox
Checkbox @checkbox--unchecked
<label class="checkbox" for="checkbox-c53d"><input class="checkbox__input" type="checkbox" id="checkbox-c53d" name="checkbox-c53d" /><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-adef"><input class="checkbox__input" type="checkbox" checked="checked" id="checkbox-adef" name="checkbox-adef" /><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-3fc9"><input class="checkbox__input" type="checkbox" disabled="disabled" id="checkbox-3fc9" name="checkbox-3fc9" /><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-7778"><input class="checkbox__input" type="checkbox" checked="checked" disabled="disabled" id="checkbox-7778" name="checkbox-7778" /><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-6103"><input class="checkbox__input" type="checkbox" checked="checked" aria-invalid="true" id="checkbox-6103" name="checkbox-6103" /><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-9143"><input class="checkbox__input" type="checkbox" aria-invalid="true" id="checkbox-9143" name="checkbox-9143" /><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
}