The checkbox component lets users select one or more options.
When to use checkboxes
Use checkboxes when you need to help users:
- select multiple options from a list
- toggle a single option on or off
When to not use checkboxes
Do not use checkboxes if users can only choose one option from a selection. In this case, use radio buttons.
Example
<![CDATA[<fieldset class="form-item">
<legend>
<span class="fieldset-legend">Who will your audience be?</span>
</legend>
<div class="webform-element-description">Select all that apply.</div>
<div class="form-field-wrapper form-item js-form-type-checkbox">
<input id="faculty-checkbox" type="checkbox" name="Faculty" value="Faculty">
<label for="faculty-checkbox" class="option">Faculty</label>
</div>
<div class="form-field-wrapper form-item js-form-type-checkbox">
<input id="staff-checkbox" type="checkbox" name="Staff" value="Staff">
<label for="staff-checkbox" class="option">Staff</label>
</div>
<div class="form-field-wrapper form-item js-form-type-checkbox">
<input id="students-checkbox" type="checkbox" name="Students" value="Students">
<label for="students-checkbox" class="option">Students</label>
</div>
</fieldset>]]>