Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.
Checks
Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.
<div class="form-check"><input class="form-check-input" type="checkbox" value="" id="defaultFlexCheckDefault"><label class="form-check-label" for="defaultFlexCheckDefault">Default checkbox </label></div><div class="form-check"><input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked><label class="form-check-label" for="flexCheckChecked">Checked checkbox </label></div>Disabled
Add the disabledattribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.
<div class="form-check"><input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled><label class="form-check-label" for="flexCheckDisabled">Disabled checkbox </label></div><div class="form-check"><input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled><label class="form-check-label" for="flexCheckCheckedDisabled">Disabled checked checkbox </label></div>Radios
<div class="form-check"><input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"><label class="form-check-label" for="flexRadioDefault1">Default radio </label></div><div class="form-check"><input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked><label class="form-check-label" for="flexRadioDefault2">Default checked radio </label></div>Disabled
Add the disabledattribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.
<div class="form-check"><input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled><label class="form-check-label" for="flexRadioDisabled">Disabled radio </label></div><div class="form-check"><input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled><label class="form-check-label" for="flexRadioCheckedDisabled">Disabled checked radio </label></div>Switches
A switch has the markup of a custom checkbox but uses the .form-switchclass to render a toggle switch. Switches also support the disabledattribute.
<div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault"><label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label></div><div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked><label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label></div><div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled><label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label></div><div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled><label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label></div>Inline
Group checkboxes or radios on the same horizontal row by adding .form-check-inlineto any .form-check.
<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">1</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">2</label></div><div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled><label class="form-check-label" for="inlineCheckbox3">3(disabled)</label></div><div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"><label class="form-check-label" for="inlineRadio1">1</label></div><div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"><label class="form-check-label" for="inlineRadio2">2</label></div><div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled><label class="form-check-label" for="inlineRadio3">3(disabled)</label></div>Without labels
Omit the wrapping .form-checkfor checkboxes and radios that have no label text. Remember to still provide some form of accessible name for assistive technologies(for instance,using aria-label).
<div><input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="..."></div><div><input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="..."></div>Toggle buttons
Create button-like checkboxes and radio buttons by using .btnstyles rather than .form-check-labelon the <label>elements.
Checkbox toggle buttons
Create button-like checkboxes and radio buttons by using .btnstyles rather than .form-check-labelon the <label>elements.
<input type="checkbox" class="btn-check" id="btn-check"><label class="btn btn-primary" for="btn-check">Single toggle</label><input type="checkbox" class="btn-check" id="btn-check-2" checked><label class="btn btn-primary" for="btn-check-2">Checked</label><input type="checkbox" class="btn-check" id="btn-check-3" disabled><label class="btn btn-primary" for="btn-check-3">Disabled</label>Radio toggle buttons
<input type="radio" class="btn-check" name="options" id="option1" checked><label class="btn btn-secondary" for="option1">Checked</label><input type="radio" class="btn-check" name="options" id="option2"><label class="btn btn-secondary" for="option2">Radio</label><input type="radio" class="btn-check" name="options" id="option3" disabled><label class="btn btn-secondary" for="option3">Disabled</label><input type="radio" class="btn-check" name="options" id="option4"><label class="btn btn-secondary" for="option4">Radio</label>Outlined styles
Different variants of .btn,such at the various outlined styles,are supported.
<input type="checkbox" class="btn-check" id="btn-check-outlined"><label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br><input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked><label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br><input type="radio" class="btn-check" name="options-outlined" id="success-outlined" checked><label class="btn btn-outline-success" for="success-outlined">Checked success radio</label><input type="radio" class="btn-check" name="options-outlined" id="danger-outlined"><label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>