Checkbox @checkbox
Checkbox @checkbox--unchecked
<label class="checkbox" for="checkbox-d959"><input class="checkbox__input" type="checkbox" id="checkbox-d959" name="checkbox-d959" /><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-064f"><input class="checkbox__input" type="checkbox" checked="checked" id="checkbox-064f" name="checkbox-064f" /><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-f279"><input class="checkbox__input" type="checkbox" disabled="disabled" id="checkbox-f279" name="checkbox-f279" /><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-f627"><input class="checkbox__input" type="checkbox" checked="checked" disabled="disabled" id="checkbox-f627" name="checkbox-f627" /><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-b154"><input class="checkbox__input" type="checkbox" checked="checked" aria-invalid="true" id="checkbox-b154" name="checkbox-b154" /><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-7ea2"><input class="checkbox__input" type="checkbox" aria-invalid="true" id="checkbox-7ea2" name="checkbox-7ea2" /><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
}