Toggle tokens are
Checkbox toggles are a visually distinct set of checkboxes
You can use the checked attribute to default an option to a checked state.
<div class="ds-block">
<fieldset class="ds-control-group ds-control-group--toggle-tokens">
<legend class="ds-legend">
Suggested filters:
</legend>
<div class="ds-form-group">
<input class="ds-input-checkbox ds-input-checkbox--toggle" type="checkbox" id="checkbox-1" checked>
<label class="ds-label" for="checkbox-1">
Undergraduate
</label>
</div>
<div class="ds-form-group">
<input class="ds-input-checkbox ds-input-checkbox--toggle" type="checkbox" id="checkbox-2">
<label class="ds-label" for="checkbox-2">
Postgraduate
</label>
</div>
<div class="ds-form-group">
<input class="ds-input-checkbox ds-input-checkbox--toggle" type="checkbox" id="checkbox-3">
<label class="ds-label" for="checkbox-3">
Melbourne
</label>
</div>
<div class="ds-form-group">
<input class="ds-input-checkbox ds-input-checkbox--toggle" type="checkbox" id="checkbox-4">
<label class="ds-label" for="checkbox-4">
Short courses
</label>
</div>
</fieldset>
</div>Checkbox toggles are a visually distinct set of checkboxes
You can use the checked attribute to default an option to a checked state.
<div class="ds-block">
<fieldset class="ds-control-group ds-control-group--toggle-tokens ds-control-group--inline">
<legend class="ds-legend">
Suggested filters:
</legend>
<div class="ds-form-group">
<input class="ds-input-checkbox ds-input-checkbox--toggle" type="checkbox" id="checkbox-1" checked>
<label class="ds-label" for="checkbox-1">
Undergraduate
</label>
</div>
<div class="ds-form-group">
<input class="ds-input-checkbox ds-input-checkbox--toggle" type="checkbox" id="checkbox-2">
<label class="ds-label" for="checkbox-2">
Postgraduate
</label>
</div>
<div class="ds-form-group">
<input class="ds-input-checkbox ds-input-checkbox--toggle" type="checkbox" id="checkbox-3">
<label class="ds-label" for="checkbox-3">
Melbourne
</label>
</div>
<div class="ds-form-group">
<input class="ds-input-checkbox ds-input-checkbox--toggle" type="checkbox" id="checkbox-4">
<label class="ds-label" for="checkbox-4">
Short courses
</label>
</div>
</fieldset>
</div>Radio toggles visually highlights the selection
You can use the checked attribute to default one option to a checked state.
<div class="ds-block">
<fieldset class="ds-control-group ds-control-group--toggle-tokens">
<legend class="ds-legend">
I am:
</legend>
<div class="ds-form-group ds-form-group--radio-toggle">
<input class="ds-input-radio ds-input-radio--toggle" type="radio" name="student" id="uniqueID-1" checked>
<label class="ds-label" for="uniqueID-1">a domestic student</label>
</div>
<div class="ds-form-group ds-form-group--radio-toggle">
<input class="ds-input-radio ds-input-radio--toggle" type="radio" name="student" id="uniqueID-2">
<label class="ds-label" for="uniqueID-2">an international student</label>
</div>
</fieldset>
</div>Radio toggles visually highlights the selection
You can use the checked attribute to default one option to a checked state.
<div class="ds-block">
<fieldset class="ds-control-group ds-control-group--toggle-tokens ds-control-group--inline">
<legend class="ds-legend">
I am:
</legend>
<div class="ds-form-group ds-form-group--radio-toggle">
<input class="ds-input-radio ds-input-radio--toggle" type="radio" name="student" id="uniqueID-1" checked>
<label class="ds-label" for="uniqueID-1">a domestic student</label>
</div>
<div class="ds-form-group ds-form-group--radio-toggle">
<input class="ds-input-radio ds-input-radio--toggle" type="radio" name="student" id="uniqueID-2">
<label class="ds-label" for="uniqueID-2">an international student</label>
</div>
</fieldset>
</div>