Checkboxes and Radio Buttons

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

Standard form controls supported in all example form elements. Form controls automatically receives global styling. The .form-group class is the easiest way to add some structure to form elements like <input>, <textarea>, and <select>

Simple Checkboxes

Basic Checkbox

Basic Right Checkbox

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

Custom Checkbox

Add .custom-input.custom-checkbox as 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-checkbox as 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-radio as 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-radio as 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.skin for this style of checkbox.

Color schemes

Square Skin iCheck

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

Color schemes

Flat Skin iCheck

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

Color schemes

Line iCheck Checkbox

Wrap with .skin.skin-line for 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-polaris for polaris checkbox.

Futurico Skin iCheck

Wrap with .skin.skin-futurico for futurico checkbox.

iCheck Radio Buttons

Minimal iCheck Radio Option

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

Color schemes

Filled Skin iCheck Radio

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

Color schemes

Flat Skin iCheck Radio

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

Color schemes

Line iCheck Radio

Wrap with .skin.skin-line for 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-polaris for polaris radio.

Futurico Skin iCheck Radio

Wrap with .skin.skin-futurico for futurico radio.

Color Checkboxes

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

Template Color Checkbox

Another Template color checkbox example

Custom Bootstrap Color Radio Buttons

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

Template color Radio Button

Another Template color Radio example

Inline Checkboxes

Add .inline class to the checkbox wrapper for inline checkbox.

Custom Inline Checkboxes

Inline Radio Buttons

Add .inline class to the radio wrapper.

Custom Inline Radio

Image Checkbox

Default Image Checkbox

Add .img-thumbnail class to <img> tag after input type checkbox.

Basic Image Checkbox

Add .btn-COLORNAME class to wrapper to use theme colors.

Theme Customizer

Customize & Preview in Real Time

Menu Color Options
Layout Options
Navigation Color Options
Solid
Gradient

Solid

Gradient

Buy Now