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.

© Dosix.
Design & Develop by Themesbrand