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
Next.js Preview
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.
Next.js Preview
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.
Next.js Preview
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.
Next.js Preview
Switches
Default 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.
Next.js Preview
Switches Color
Use form-check- class with below-mentioned color variation to set a color switch.
Next.js Preview
Custom Switches
Use form-switch-custom class & form-switch- class with below-mentioned color variation to set a color radius.
Next.js Preview
Inline Checkbox & Radios
Use form-check-inline class to form-check class to set horizontally align checkboxes, radios, or switches.
Next.js Preview
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).
Next.js Preview
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.
Next.js Preview
Outlined Styles
Different variants of btn attribute, such as the various outlined styles, are supported.