| Colors | Default | Checked | Disabled |
|---|---|---|---|
| Primary |
|
|
|
| Secondary |
|
|
|
| Success |
|
|
|
| Warning |
|
|
|
| Danger |
|
|
|
| Info |
|
|
|
| Dark |
|
|
|
| Colors | Default | Checked | Disabled |
|---|---|---|---|
| Primary |
|
|
|
| Secondary |
|
|
|
| Success |
|
|
|
| Warning |
|
|
|
| Danger |
|
|
|
| Info |
|
|
|
| Dark |
|
|
|
| Colors | Default | Checked | Disabled |
|---|---|---|---|
| Primary |
|
|
|
| Secondary |
|
|
|
| Success |
|
|
|
| Warning |
|
|
|
| Danger |
|
|
|
| Info |
|
|
|
| Dark |
|
|
|
| Colors | Default | Checked | Disabled |
|---|---|---|---|
| Primary |
|
|
|
| Secondary |
|
|
|
| Success |
|
|
|
| Warning |
|
|
|
| Danger |
|
|
|
| Info |
|
|
|
| Dark |
|
|
|
| Reference | Details |
|---|---|
Approach
|
Browser default checkboxes and radios are replaced
with the help of .form-check, a series of
classes for both input types that improves the layout
and behavior of their HTML elements, that provide
greater customization and cross browser consistency.
Checkboxes are for selecting one or several options in
a list, while radios are for selecting one option from
many.Structurally, our <input>s and
<label>s are sibling elements as
opposed to an <input> within a
<label>. This is slightly more
verbose as you must specify id and
for attributes to relate the
<input> and
<label>. We use the sibling
selector (~) for all our
<input> states, like
:checked or :disabled. When
combined with the
.form-check-label class, we can easily
style the text for each item based on the
<input>’s state.
|
Indeterminate
|
Checkboxes can utilize the
:indeterminate pseudo class when manually
set via JavaScript (there is no available HTML
attribute for specifying it).
|
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.
|
Inline
|
Group checkboxes or radios on the same horizontal row
by adding .form-check-inline to any
.form-check.
|
Reverse
|
Put your checkboxes, radios, and switches on the
opposite side with the
.form-check-reverse modifier class.
|
Without labels
|
Omit the wrapping .form-check for
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). See the
forms overview accessibility section for
details.
|
Toggle buttons
|
Create button-like checkboxes and radio buttons by
using .btn styles rather than
.form-check-label on the
<label> elements. These toggle
buttons can further be grouped in a
button group if needed.
|
Documentations
|
Please visit: https://getbootstrap.com/docs/5.3/forms/checks-radios/ |