jQuery customizable checkboxes and radio buttons demo

Demo

Checkbox, #input-1
Checkbox, #input-2

Radio button, #input-3
Radio button, #input-4

Add checked state to 1 and 3 inputs show code

$('#input-1, #input-3').iCheck('check');

Remove checked state from 1 and 3 inputs show code

$('#input-1, #input-3').iCheck('uncheck');

Add disabled state to 2 and 4 inputs show code

$('#input-2, #input-4').iCheck('disable');

Remove disabled state from 2 and 4 inputs show code

$('#input-2, #input-4').iCheck('enable');

Remove all traces of iCheck show code

$('input').iCheck('destroy');

Callbacks

Skins

Minimal skin

Live

Checkbox 1
Checkbox 2
Disabled
Disabled & checked

Radio button 1
Radio button 2
Disabled
Disabled & checked

Color schemes

States

Normal
Hover
Checked
Disabled
Disabled & checked

Demo

For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

Choose a color scheme, there are 10 different styles available:
- Black — minimal.css
- Red — red.css
- Green — green.css
- Blue — blue.css
- Aero — aero.css
- Grey — grey.css
- Orange — orange.css
- Yellow — yellow.css
- Pink — pink.css
- Purple — purple.css
Copy /skins/minimal/ folder and jquery.icheck.js file to your site.

Insert before </head> in your HTML (replace your-path and color-scheme):

<link href="your-path/minimal/color-scheme.css" rel="stylesheet">
<script src="your-path/jquery.icheck.js"></script>

Example for a Red color scheme:

<link href="your-path/minimal/red.css" rel="stylesheet">
<script src="your-path/jquery.icheck.js"></script>

Add some checkboxes and radio buttons to your HTML:

<input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>

Add JavaScript to your HTML to launch iCheck plugin:

<script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_minimal',
    radioClass: 'iradio_minimal',
    increaseArea: '20%' // optional
  });
});
</script>

For different from black color schemes use this code (example for Red):

<script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_minimal-red',
    radioClass: 'iradio_minimal-red',
    increaseArea: '20%' // optional
  });
});
</script>

Done.

Usage

Square skin

Live

Checkbox 1
Checkbox 2
Disabled
Disabled & checked

Radio button 1
Radio button 2
Disabled
Disabled & checked

Color schemes

States

Normal
Hover
Checked
Disabled
Disabled & checked

Demo

For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

Choose a color scheme, there are 10 different styles available:
- Black — square.css
- Red — red.css
- Green — green.css
- Blue — blue.css
- Aero — aero.css
- Grey — grey.css
- Orange — orange.css
- Yellow — yellow.css
- Pink — pink.css
- Purple — purple.css
Copy /skins/square/ folder and jquery.icheck.js file to your site.

Insert before </head> in your HTML (replace your-path and color-scheme):

<link href="your-path/square/color-scheme.css" rel="stylesheet">
<script src="your-path/jquery.icheck.js"></script>

Example for a Red color scheme:

<link href="your-path/square/red.css" rel="stylesheet">
<script src="your-path/jquery.icheck.js"></script>

Add some checkboxes and radio buttons to your HTML:

<input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>

Add JavaScript to your HTML to launch iCheck plugin:

<script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_square',
    radioClass: 'iradio_square',
    increaseArea: '20%' // optional
  });
});
</script>

For different from black color schemes use this code (example for Red):

<script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_square-red',
    radioClass: 'iradio_square-red',
    increaseArea: '20%' // optional
  });
});
</script>

Done.

Usage

Flat skin

Live

Checkbox 1
Checkbox 2
Disabled
Disabled & checked

Radio button 1
Radio button 2
Disabled
Disabled & checked

Color schemes

States

Normal
Checked
Disabled
Disabled & checked

Demo

For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

Choose a color scheme, there are 10 different styles available:
- Black — square.css
- Red — red.css
- Green — green.css
- Blue — blue.css
- Aero — aero.css
- Grey — grey.css
- Orange — orange.css
- Yellow — yellow.css
- Pink — pink.css
- Purple — purple.css
Copy /skins/flat/ folder and jquery.icheck.js file to your site.

Insert before </head> in your HTML (replace your-path and color-scheme):

<link href="your-path/flat/color-scheme.css" rel="stylesheet">
<script src="your-path/jquery.icheck.js"></script>

Example for a Red color scheme:

<link href="your-path/flat/red.css" rel="stylesheet">
<script src="your-path/jquery.icheck.js"></script>

Add some checkboxes and radio buttons to your HTML:

<input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>

Add JavaScript to your HTML to launch iCheck plugin:

<script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_flat',
    radioClass: 'iradio_flat'
  });
});
</script>

For different from black color schemes use this code (example for Red):

<script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_flat-red',
    radioClass: 'iradio_flat-red'
  });
});
</script>

Done.

Usage

Line skin

Live

Checkbox 1
Checkbox 2
Disabled
Disabled & checked

Radio button 1
Radio button 2
Disabled
Disabled & checked

Color schemes

States

Normal
Hover
Checked
Disabled
Disabled & checked

Demo

For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

Choose a color scheme, there are 10 different styles available:
- Black — line.css
- Red — red.css
- Green — green.css
- Blue — blue.css
- Aero — aero.css
- Grey — grey.css
- Orange — orange.css
- Yellow — yellow.css
- Pink — pink.css
- Purple — purple.css
Copy /skins/line/ folder and jquery.icheck.js file to your site.

Insert before </head> in your HTML (replace your-path and color-scheme):

<link href="your-path/line/color-scheme.css" rel="stylesheet">
<script src="your-path/jquery.icheck.js"></script>

Example for a Red color scheme:

<link href="your-path/line/red.css" rel="stylesheet">
<script src="your-path/jquery.icheck.js"></script>

Add some checkboxes, radio buttons and labels to your HTML:

<input type="checkbox">
<label>Checkbox 1</label>

<input type="checkbox" checked>
<label>Checkbox 2</label>

<input type="radio" name="iCheck">
<label>Radio button 1</label>

<input type="radio" name="iCheck" checked>
<label>Radio button 2</label>

Add JavaScript to your HTML to launch iCheck plugin:

<script>
$(document).ready(function(){
  $('input').each(function(){
    var self = $(this),
      label = self.next(),
      label_text = label.text();

    label.remove();
    self.iCheck({
      checkboxClass: 'icheckbox_line',
      radioClass: 'iradio_line',
      insert: '<div class="icheck_line-icon"></div>' + label_text
    });
  });
});
</script>

For different from black color schemes use this code (example for Red):

<script>
$(document).ready(function(){
  $('input').each(function(){
    var self = $(this),
      label = self.next(),
      label_text = label.text();

    label.remove();
    self.iCheck({
      checkboxClass: 'icheckbox_line-red',
      radioClass: 'iradio_line-red',
      insert: '<div class="icheck_line-icon"></div>' + label_text
    });
  });
});
</script>

Done.

Usage

Polaris skin

Live

Checkbox 1
Checkbox 2
Disabled
Disabled & checked

Radio button 1
Radio button 2
Disabled
Disabled & checked

States

Normal
Hover
Checked
Disabled
Disabled & checked

Demo

For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

Copy /skins/polaris/ folder and jquery.icheck.js file to your site.

Insert before </head> in your HTML (replace your-path and color-scheme):

<link href="your-path/polaris/polaris.css" rel="stylesheet">
<script src="your-path/jquery.icheck.js"></script>

Add some checkboxes and radio buttons to your HTML:

<input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>

Add JavaScript to your HTML to launch iCheck plugin:

<script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_polaris',
    radioClass: 'iradio_polaris',
    increaseArea: '-10' // optional
  });
});
</script>

Done.

Usage

Futurico skin

Live

Checkbox 1
Checkbox 2
Disabled
Disabled & checked

Radio button 1
Radio button 2
Disabled
Disabled & checked

States

Normal
Checked
Disabled
Disabled & checked

Demo

For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

Copy /skins/futurico/ folder and jquery.icheck.js file to your site.

Insert before </head> in your HTML (replace your-path and color-scheme):

<link href="your-path/futurico/futurico.css" rel="stylesheet">
<script src="your-path/jquery.icheck.js"></script>

Add some checkboxes and radio buttons to your HTML:

<input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>

Add JavaScript to your HTML to launch iCheck plugin:

<script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_futurico',
    radioClass: 'iradio_futurico',
    increaseArea: '20%' // optional
  });
});
</script>

Done.

Usage