Checkboxs & Radios
Checkbox
Default Checkbox
Use type="checkbox" attribute to set a checkbox and add checkedattribute 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.
Switches
Deafult Switchs
Use form-switch class to form-check class to set a switch and add checked attribute to set a switch checked by default.
Disabled Switchs
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.
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.