-
MAIN
-
APPS
-
PAGES
-
COMPONENTS

Jane Doe
View Profile
Notifications
4 New

New message received 💌
24 unread messages.
Congratulations team 🎉
You have 12 new sales!
Network Error ⛔️
Operation couldn’t be completed
Disk Utility 💥
You have not enough disk capacity

-
MAIN
-
APPS
-
PAGES
-
COMPONENTS

Jane Doe
View Profile
Checkbox
Create consistent cross-browser and cross-device checkboxes with our completely rewritten checks component.
Basic
Basic usage of checkbox.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
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 disabled
attribute 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>