Checkboxes allow multiple selections
Single checkboxes are used to confirm a user's selection or preference. For example: to confirm a user agrees to a product's terms and conditions.
You can Use attribute checked to default to a checked state.
Even single checkbox form groups should be wrapped in a ds-control-group to maintain form spacing.
<div class="ds-block">
<form class="ds-form">
<fieldset class="ds-control-group">
<div class="ds-form-group">
<input class="ds-input-checkbox" type="checkbox" id="uniqueID-1-checkbox">
<label class="ds-label" for="uniqueID-1-checkbox">
I agree to the <a href="https://latrobe.edu.au/terms/" target="_blank">terms and conditions</a>
</label>
</div>
<div class="ds-form-group">
<input class="ds-input-checkbox" type="checkbox" id="uniqueID-2-checkbox" checked>
<label class="ds-label" for="uniqueID-2-checkbox">
I would like to receive updates via email
</label>
</div>
</fieldset>
</form>
</div><div class="ds-block">
<div class="ds-control-group">
<div class="ds-form-group">
<input class="ds-input-checkbox" type="checkbox" id="uniqueID-1-checkbox" disabled>
<label class="ds-label" for="uniqueID-1-checkbox">
I agree to the <a href="https://latrobe.edu.au/terms/" target="_blank">terms and conditions</a>
</label>
</div>
</div>
</div>Checkbox groups provide a list of available items to choose from which more than one option can be selected.
<div class="ds-block">
<form class="ds-form">
<fieldset class="ds-control-group">
<legend class="ds-legend">
What colors do like?
</legend>
<div class="ds-form-group">
<input class="ds-input-checkbox" type="checkbox" id="checkbox-1">
<label class="ds-label" for="checkbox-1">
Red
</label>
</div>
<div class="ds-form-group">
<input class="ds-input-checkbox" type="checkbox" id="checkbox-2">
<label class="ds-label" for="checkbox-2">
Blue
</label>
</div>
<div class="ds-form-group">
<input class="ds-input-checkbox" type="checkbox" id="checkbox-3">
<label class="ds-label" for="checkbox-3">
Yellow
</label>
</div>
</fieldset>
</form>
</div>Add <abbr class="ds-label__required" title="required">*</abbr> tag after legend text
<div class="ds-block">
<form class="ds-form">
<fieldset class="ds-control-group">
<legend class="ds-legend">
What colors do like? <abbr class="ds-label__required" title="required">*</abbr>
</legend>
<div class="ds-form-group">
<input class="ds-input-checkbox" type="checkbox" id="checkbox-1">
<label class="ds-label" for="checkbox-1">
Red
</label>
</div>
<div class="ds-form-group">
<input class="ds-input-checkbox" type="checkbox" id="checkbox-2">
<label class="ds-label" for="checkbox-2">
Blue
</label>
</div>
<div class="ds-form-group">
<input class="ds-input-checkbox" type="checkbox" id="checkbox-3">
<label class="ds-label" for="checkbox-3">
Yellow
</label>
</div>
</fieldset>
</form>
</div><div class="ds-block">
<form class="ds-form">
<fieldset class="ds-control-group">
<legend class="ds-legend">
What colors do like?
</legend>
<div class="ds-form-group">
<input class="ds-input-checkbox" type="checkbox" id="checkbox-1">
<label class="ds-label" for="checkbox-1">
Red
</label>
</div>
<div class="ds-form-group">
<input class="ds-input-checkbox" type="checkbox" id="checkbox-2">
<label class="ds-label" for="checkbox-2">
Blue
</label>
</div>
<div class="ds-form-group">
<input class="ds-input-checkbox" type="checkbox" id="checkbox-3">
<label class="ds-label" for="checkbox-3">
Yellow
</label>
</div>
</fieldset>
<small class="ds-hint" id="text-hint">Your color preference is important to us.</small>
</form>
</div><div class="ds-block">
<form class="ds-form">
<fieldset class="ds-control-group">
<legend class="ds-legend">
What colors do like?
</legend>
<div class="ds-form-group">
<input class="ds-input-checkbox" type="checkbox" id="checkbox-1">
<label class="ds-label" for="checkbox-1">
Red
</label>
</div>
<div class="ds-form-group">
<input class="ds-input-checkbox" type="checkbox" id="checkbox-2">
<label class="ds-label" for="checkbox-2">
Blue
</label>
</div>
<div class="ds-form-group">
<input class="ds-input-checkbox" type="checkbox" id="checkbox-3">
<label class="ds-label" for="checkbox-3">
Yellow
</label>
</div>
</fieldset>
<small class="ds-hint" id="text-hint">Your color preference is important to us.</small>
<small class="ds-hint ds-hint--valid">Succesfully message</small>
</form>
</div><div class="ds-block">
<form class="ds-form">
<fieldset class="ds-control-group">
<legend class="ds-legend">
What colors do like?
</legend>
<div class="ds-form-group">
<input class="ds-input-checkbox" type="checkbox" id="checkbox-1">
<label class="ds-label" for="checkbox-1">
Red
</label>
</div>
<div class="ds-form-group">
<input class="ds-input-checkbox" type="checkbox" id="checkbox-2">
<label class="ds-label" for="checkbox-2">
Blue
</label>
</div>
<div class="ds-form-group">
<input class="ds-input-checkbox" type="checkbox" id="checkbox-3">
<label class="ds-label" for="checkbox-3">
Yellow
</label>
</div>
</fieldset>
<small class="ds-hint" id="text-hint">Your color preference is important to us.</small>
<small class="ds-hint ds-hint--invalid">Invalid message</small>
</form>
</div>Add ds-control-group--inline modifier class to ds-control-group fieldset for inline checkboxes.
<div class="ds-block">
<fieldset class="ds-control-group ds-control-group--inline">
<legend class="ds-legend">
What colors do like:
</legend>
<div class="ds-form-group">
<input class="ds-input-checkbox" type="checkbox" id="checkbox-1">
<label class="ds-label" for="checkbox-1">
Red
</label>
</div>
<div class="ds-form-group">
<input class="ds-input-checkbox" type="checkbox" id="checkbox-2">
<label class="ds-label" for="checkbox-2">
Blue
</label>
</div>
<div class="ds-form-group">
<input class="ds-input-checkbox" type="checkbox" id="checkbox-3">
<label class="ds-label" for="checkbox-3">
Yellow
</label>
</div>
</fieldset>
</div>