logologo

Checkbox & Radio

Default Checkbox

Use the.form-check-input, .form-check-labelfor checkbox.

Default Checks
Disabled Checks
Right Checks
Indeterminate

Custom Checkbox

Use the.checkbox-solid-* ,.checkbox-* for bordered checkbox

Bordered Checkbox
Icon Checkbox
Filled Checkbox

Default Radio

Use the.checkbox-solid-* ,.checkbox-* for bordered checkbox

Custom Radios
Disabled Radios
Right Radios

Images with Checkbox

Use the.form-check-input-* ,.form-check-label-* for image checkbox.

Custom
Checked Image
Disable Image
Disable Checked Image

Images with Radio

Use the.form-check-input-* ,.form-check-label-* for image radio.

Custom
Checked Image
Disable Image
Disable Checked Image

Custom Radio

Use the.form-check-input-* ,.form-check-label-* for radios.

Bordered Radio
Icons Radio
Filled Radio

Default Switch

Use the.checkbox-solid-* ,.checkbox-* for bordered checkbox

Custom Switches
Disabled Switches
Right Switches

Inline-input type

Use the.checkbox-solid-* ,.checkbox-* for bordered checkbox

Inline Checkbox
Inline Radios
Inline Switches

Animated Buttons

Use the.radio_animated through animated checkbox and radios.

Select your payment method
What is your favorite social media?

Basic Radio And Checkbox

Use the.form-check-inlinethrough display inline.

Simple Checkbox
Simple Radios

Radio Toggle Buttons

The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button. [any one selected].

Outlined Checkbox Styles

The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button. [multiple selected].