Checkbox & Radio
Checkbox
Default Checkbox
Use type="checkbox"
attribute to set a checkbox and add
checked attribute to set
a checkbox checked by default.
Disabled Checkbox
Use disabled attribute
to set a checkbox disabled and add
checked attribute to set
a checkbox checked by default.
Checkbox Right
Use form-check-right class
to form-check class to set a checkbox
on the right side.
Indeterminate
Custom Checkboxes
Use form-check- class with
below-mentioned color variation to set
a color checkbox.
Use form-check-outline
class and form-check- class
with below-mentioned color variation
to set a color checkbox with outline.
Radios
Default Radios
Use type="radio"
attribute to set a radio button and add
checked attribute to set
a radio checked by default.
Disabled Radios
Use disabled attribute
to set a radio button disabled and
add
checked attribute to set
a radio checked by default.
Radio Right
Use form-check-right class
to form-check class to set a radio button
on the right side.
Custom Radio
Use form-check- class with
below-mentioned color variation to set
a color radio.
Use form-check-outline
class and form-check- class
with below-mentioned color variation
to set a color radio with outline.
Switches
Default Switches
Use form-switch class
to form-check class to set a switch
and add
checked attribute to set
a switch checked by default.
Disabled Switches
Use disabled attribute
to set a radio button disabled and
add
checked attribute to set
a switch checked by default.
Switch Right
Use form-check-right class
to form-check class to set a switch button
on the right side.
Switch sizes
Use form-switch-md
class to set a medium size switch button
and
form-switch-lg class to
form-check class to set a large size
switch button respectively. No such class
is required for small size switch button.
Switches Color
Use form-check- class with below-mentioned
color variation to set a color switch.
Custom Switches
Use form-switch-custom class &
form-switch- class with below-mentioned
color variation to set a color radius.
Inline Checkbox & Radios
Use form-check-inline class to form-check
class to set horizontally align checkboxes, radios, or
switches.
Without Labels
Omit the wrapping, form-check class for
checkboxes, radios, or switches that have no label text.
Remember to still provide some form of accessible name
for assistive technologies (for instance, using aria-label).
Radio Toggle Buttons
Create button-like checkboxes and radio buttons by
using btn styles rather than
form-check-label class on the <label>
elements. These toggle buttons can further be
grouped in a
button group if needed.
Outlined Styles
Different variants of btn attribute, such
as the various outlined styles, are supported.