Checkbox @checkbox
Checkbox @checkbox--unchecked
<label class="checkbox" for="checkbox-18f4"><input class="checkbox__input" type="checkbox" id="checkbox-18f4" name="checkbox-18f4" /><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-490b"><input class="checkbox__input" type="checkbox" checked="checked" id="checkbox-490b" name="checkbox-490b" /><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-40a2"><input class="checkbox__input" type="checkbox" disabled="disabled" id="checkbox-40a2" name="checkbox-40a2" /><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-4532"><input class="checkbox__input" type="checkbox" checked="checked" disabled="disabled" id="checkbox-4532" name="checkbox-4532" /><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-ccce"><input class="checkbox__input" type="checkbox" checked="checked" aria-invalid="true" id="checkbox-ccce" name="checkbox-ccce" /><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-dc7e"><input class="checkbox__input" type="checkbox" aria-invalid="true" id="checkbox-dc7e" name="checkbox-dc7e" /><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
}