Checkbox
Checkbox is an extension to standard checkbox element with theming.
When to use
- Checkboxes are used for multiple choices, not for mutually exclusive choices. Therefore, use checkboxes when users need to select multiple options.
Guidelines
- Checkboxes are grouped together in a <fieldset> with a <legend> that describes them.
- Do not assume that users will know how many options can be selected. Hints can be added to checkbox items that provide additional information. For example, ‘Select all that apply’.
- Do not pre-select checkbox options.
- Users should be told how disabled checkboxes can be enabled.
- Always use clear and concise labels for checkboxes.
Basic
Binary checkbox is used as a controlled input.
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
Multiple
A group of checkboxes can be created.
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">New York</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">San Francisco</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" >
<label class="form-check-label" for="inlineCheckbox3">Los Angeles</label>
</div>
Group
A group of checkboxes can be created with the help of fieldset & legend tag.
<div class="row">
<div class="col-md-6">
<fieldset><legend>Standard Checkboxes</legend>
<form>
<div class="form-check">
<div class="d-flex align-items-center mb-2">
<input class="form-check-input" type="checkbox" id="Checkbox7" value="option7">
<label class="form-check-label" for="Checkbox7">Cheese</label>
</div>
<div class="d-flex align-items-center mb-2">
<input class="form-check-input" type="checkbox" id="Checkbox8" value="option8">
<label class="form-check-label" for="Checkbox8">Mushroom</label>
</div>
<div class="d-flex align-items-center mb-2">
<input class="form-check-input" type="checkbox" id="Checkbox9" value="option9" disabled>
<label class="form-check-label" for="Checkbox9">Disabled</label>
</div>
<div class="d-flex align-items-center mb-2">
<input class="form-check-input" type="checkbox" id="Checkbox10" value="option10" disabled checked>
<label class="form-check-label" for="Checkbox10">Disabled Preselected</label>
</div>
</div>
</form>
</fieldset>
</div>
<div class="col-md-6">
<fieldset><legend>Small Checkboxes</legend>
<form>
<div class="form-check">
<div class="d-flex align-items-center mb-2">
<input class="form-check-input input-sm" type="checkbox" id="Checkbox11" value="option11">
<label class="form-check-label" for="Checkbox11">Cheese</label>
</div>
<div class="d-flex align-items-center mb-2">
<input class="form-check-input input-sm" type="checkbox" id="Checkbox12" value="option12">
<label class="form-check-label" for="Checkbox12">Mushroom</label>
</div>
<div class="d-flex align-items-center mb-2">
<input class="form-check-input input-sm" type="checkbox" id="Checkbox13" value="option13" disabled>
<label class="form-check-label" for="Checkbox13">Disabled</label>
</div>
<div class="d-flex align-items-center mb-2">
<input class="form-check-input input-sm" type="checkbox" id="Checkbox14" value="option14" disabled checked>
<label class="form-check-label" for="Checkbox14">Disabled Preselected</label>
</div>
</div>
</form>
</fieldset>
</div>
</div>
Disabled
Add the disabled attribute. When disabled is present, the element cannot be edited.
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
Invalid
The "invalid" class is used to add an invalid state style to indicate a failed validation.
<input class="form-check-input invalid" type="checkbox" id="inlineCheckbox3" value="option3" >
Accessibility
- When the checkbox has focus, pressing the Space key or Enter key changes the state of the checkbox.
- All checkboxes require a clear, concise, and unique label so that when the screen reader reads the content, it’s easy for the user to understand.