carbon-components
Version:
Carbon Components is a component library for IBM Cloud
42 lines • 2.08 kB
HTML
<fieldset class="bx--fieldset">
<legend class="bx--label">Checkbox (input + label)</legend>
<!-- input + label -->
<div class="bx--form-item bx--checkbox-wrapper">
<input id="bx--checkbox-new" class="bx--checkbox" type="checkbox" value="new" name="checkbox" checked>
<label for="bx--checkbox-new" class="bx--checkbox-label">Checkbox</label>
</div>
<!-- input + label indeterminate -->
<div class="bx--form-item bx--checkbox-wrapper">
<input id="bx--checkbox-ind" class="bx--checkbox" type="checkbox" value="new" name="checkbox" aria-checked="mixed">
<label for="bx--checkbox-ind" class="bx--checkbox-label">Indeterminate checkbox</label>
</div>
<!-- input + label disabled -->
<div class="bx--form-item bx--checkbox-wrapper">
<input id="bx--checkbox-disabled" class="bx--checkbox" type="checkbox" value="new" name="checkbox" disabled>
<label for="bx--checkbox-disabled" class="bx--checkbox-label">Disabled checkbox</label>
</div>
</fieldset>
<fieldset class="bx--fieldset">
<legend class="bx--label">Checkbox (input > label)</legend>
<!-- label > input -->
<div class="bx--form-item bx--checkbox-wrapper">
<label for="bx--checkbox-new2" class="bx--checkbox-label">
<input id="bx--checkbox-new2" class="bx--checkbox" type="checkbox" value="yellow" name="checkbox" checked>
Checkbox
</label>
</div>
<!-- label > input -->
<div class="bx--form-item bx--checkbox-wrapper">
<label for="bx--checkbox-ind2" class="bx--checkbox-label" data-contained-checkbox-state="mixed">
<input id="bx--checkbox-ind2" class="bx--checkbox" type="checkbox" value="yellow" name="checkbox" aria-checked="mixed">
Indeterminate checkbox
</label>
</div>
<!-- label > input -->
<div class="bx--form-item bx--checkbox-wrapper">
<label for="bx--checkbox-new2" class="bx--checkbox-label">
<input id="bx--checkbox-new2" class="bx--checkbox" type="checkbox" value="yellow" name="checkbox" disabled>
Disabled checkbox
</label>
</div>
</fieldset>