Checkbox @checkbox
Checkbox @checkbox--unchecked
<label class="checkbox" for="checkbox-8fb9"><input class="checkbox__input" type="checkbox" id="checkbox-8fb9" name="checkbox-8fb9" /><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-fa86"><input class="checkbox__input" type="checkbox" checked="checked" id="checkbox-fa86" name="checkbox-fa86" /><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-b786"><input class="checkbox__input" type="checkbox" disabled="disabled" id="checkbox-b786" name="checkbox-b786" /><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-c699"><input class="checkbox__input" type="checkbox" checked="checked" disabled="disabled" id="checkbox-c699" name="checkbox-c699" /><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-3592"><input class="checkbox__input" type="checkbox" checked="checked" aria-invalid="true" id="checkbox-3592" name="checkbox-3592" /><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-d14c"><input class="checkbox__input" type="checkbox" aria-invalid="true" id="checkbox-d14c" name="checkbox-d14c" /><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
}