Checkboxes and Radio Buttons

  1. Home
  2. Form Components
  3. Checkboxes & Radios
Bootstrap CardsButtons Extended

Simple Checkboxes

Basic Checkbox

Basic Right Checkbox

Simple Right side checkboxes with .right-checkbox wrapper class.

Custom Checkbox

Add .custom-input.custom-checkboxas a single wrapper & add <span class="custom-control-indicator"></span> for better output. Also use .custom-control-description class for checkbox description.

Custom Right Checkbox

Add .custom-input.custom-checkboxas a single wrapper & add <span class="custom-control-indicator"></span> for better output & wrap with right-checkbox for right aligned checkbox.

Simple Radio Buttons

Basic Radio Buttons

Basic Right Radio Buttons

Simple Radio Button with right align using .right-radio class.

Custom Radio Buttons

Add .custom-input.custom-radioas a single wrapper & add <span class="custom-control-indicator"></span> for better output. Also use .custom-control-description class for radio description.

Custom Right Radio Buttons

Add .c-input.c-radioas a single wrapper & add <span class="c-indicator"></span> for better output & wrap with right-radio for right aligned radio.

iCheck Checkbox

Basic Skin iCheck

Wrap with .icheck_minimal.skinfor this style of checkbox.

Color schemes

Square Skin iCheck

Wrap with .skin.skin-squarefor square and colored checkbox. Have to do color changes using JS.

Color schemes

Flat Skin iCheck

Wrap with .skin.skin-flatfor Flat colored checkbox. Have to do color changes using JS.

Color schemes

Line iCheck Checkbox

Wrap with .skin.skin-linefor line checkbox. Have to do color changes using JS.

Normal State
Hover State
Checked State
Disabled State
Checked & Disabled State
Color schemes

Polaris Skin iCheck

Wrap with .skin.skin-polarisfor polaris checkbox.

Futurico Skin iCheck

Wrap with .skin.skin-futuricofor futurico checkbox.

iCheck Radio Buttons

Minimal iCheck Radio Option

Wrap with .icheck_minimalwith .skin to use another icheck radio style.

Color schemes

Filled Skin iCheck Radio

Wrap with .skin.skin-squarefor square and colored radio. Have to do color changes using JS.

Color schemes

Flat Skin iCheck Radio

Wrap with .skin.skin-flatfor Flat colored radio. Have to do color changes using JS.

Color schemes

Line iCheck Radio

Wrap with .skin.skin-linefor line Radio. Have to do color changes using JS.

Normal State
Hover State
Checked State
Disabled State
Checked & Disabled State
Color schemes

Polaris Skin iCheck Radio

Wrap with .skin.skin-polarisfor polaris radio.

Futurico Skin iCheck Radio

Wrap with .skin.skin-futuricofor futurico radio.

Color Checkboxes

Add .bg-COLORto span to set according to theme color.

Template Color Checkbox

Another Template color checkbox example

Custom Bootstrap Color Radio Buttons

Add .bg-COLORto span to set according to theme color.

Template color Radio Button

Another Template color Radio example

Inline Checkboxes

Add .inlineclass to the checkbox wrapper for inline checkbox.

Custom Inline Checkboxes

Inline Radio Buttons

Add .inlineclass to the radio wrapper.

Custom Inline Radio