Create Account
  • You are here:
  • Home
  • Features
  • iCheck

 

Our website is currently under development and keep uploading a kind of contents.

Please subscribe to our newsletter at the bottom of the page to get information about the latest news.

 

iCheck
 

Minimal Skin

Live

Color schemes

States

  • Normal
  • Hover
  • Checked
  • Disabled
  • Disabled & checked
 
GET CODE
<ul class="jf_iCheck_list">
	<li>
		<input class="input_icheck_1" type="checkbox" id="minimal-checkbox-1">
		<label for="minimal-checkbox-1">Checkbox 1</label>
	</li>
	<li>
		<input class="input_icheck_1" type="checkbox" id="minimal-checkbox-2" checked="">
		<label for="minimal-checkbox-2">Checkbox 2</label>
	</li>
	<li>
		<input class="input_icheck_1" type="checkbox" id="minimal-checkbox-disabled" disabled="">
		<label for="minimal-checkbox-disabled">Disabled</label>
	</li>
	<li>
		<input class="input_icheck_1" type="checkbox" id="minimal-checkbox-disabled-checked" checked="" disabled="">
		<label for="minimal-checkbox-disabled-checked">Disabled &amp; checked</label>
	</li>
</ul>
<ul class="jf_iCheck_list">
	<li>
		<input class="input_icheck_1" type="radio" id="minimal-radio-1" name="minimal-radio">
		<label for="minimal-radio-1">Radio button 1</label>
	</li>
	<li>
		<input class="input_icheck_1" type="radio" id="minimal-radio-2" name="minimal-radio" checked="">
		<label for="minimal-radio-2">Radio button 2</label>
	</li>
	<li>
		<input class="input_icheck_1" type="radio" id="minimal-radio-disabled" disabled="">
		<label for="minimal-radio-disabled">Disabled</label>
	</li>
	<li>
		<input class="input_icheck_1" type="radio" id="minimal-radio-disabled-checked" checked="" disabled="">
		<label for="minimal-radio-disabled-checked">Disabled &amp; checked</label>
	</li>
</ul>

Square Skin

Live

Color schemes

States

  • Normal
  • Hover
  • Checked
  • Disabled
  • Disabled & checked
 
GET CODE
<ul class="jf_iCheck_list">
	<li>
		<input type="checkbox" id="square-checkbox-1">
		<label for="square-checkbox-1">Checkbox 1</label>
	</li>
	<li>
		<input type="checkbox" id="square-checkbox-2" checked="">
		<label for="square-checkbox-2">Checkbox 2</label>
	</li>
	<li>
		<input type="checkbox" id="square-checkbox-disabled" disabled="">
		<label for="square-checkbox-disabled">Disabled</label>
	</li>
	<li>
		<input type="checkbox" id="square-checkbox-disabled-checked" checked="" disabled="">
		<label for="square-checkbox-disabled-checked">Disabled &amp; checked</label>
	</li>
</ul>
<ul class="jf_iCheck_list">
	<li>
		<input type="radio" id="square-radio-1" name="square-radio">
		<label for="square-radio-1">Radio button 1</label>
	</li>
	<li>
		<input type="radio" id="square-radio-2" name="square-radio" checked="">
		<label for="square-radio-2">Radio button 2</label>
	</li>
	<li>
		<input type="radio" id="square-radio-disabled" disabled="">
		<label for="square-radio-disabled">Disabled</label>
	</li>
	<li>
		<input type="radio" id="square-radio-disabled-checked" checked="" disabled="">
		<label for="square-radio-disabled-checked">Disabled &amp; checked</label>
	</li>
</ul>

Flat Skin

Live

Color schemes

States

  • Normal
  • Checked
  • Disabled
  • Disabled & checked
 
GET CODE
<ul class="jf_iCheck_list">
	<li>
		<input class="input_icheck_2" type="checkbox" id="flat-checkbox-1">
		<label for="flat-checkbox-1">Checkbox 1</label>
	</li>
	<li>
		<input class="input_icheck_2" type="checkbox" id="flat-checkbox-2" checked="">
		<label for="flat-checkbox-2">Checkbox 2</label>
	</li>
	<li>
		<input class="input_icheck_2" type="checkbox" id="flat-checkbox-disabled" disabled="">
		<label for="flat-checkbox-disabled">Disabled</label>
	</li>
	<li>
		<input class="input_icheck_2" type="checkbox" id="flat-checkbox-disabled-checked" checked="" disabled="">
		<label for="flat-checkbox-disabled-checked">Disabled &amp; checked</label>
	</li>
</ul>
<ul class="jf_iCheck_list">
	<li>
		<input class="input_icheck_2" type="radio" id="flat-radio-1" name="flat-radio">
		<label for="flat-radio-1">Radio button 1</label>
	</li>
	<li>
		<input class="input_icheck_2" type="radio" id="flat-radio-2" name="flat-radio" checked="">
		<label for="flat-radio-2">Radio button 2</label>
	</li>
	<li>
		<input class="input_icheck_2" type="radio" id="flat-radio-disabled" disabled="">
		<label for="flat-radio-disabled">Disabled</label>
	</li>
	<li>
		<input class="input_icheck_2" type="radio" id="flat-radio-disabled-checked" checked="" disabled="">
		<label for="flat-radio-disabled-checked">Disabled &amp; checked</label>
	</li>
</ul>

Line Skin

Live

Color schemes

States

  • Normal
  • Hover
  • Checked
  • Disabled
  • Disabled & checked
 
GET CODE
<ul class="jf_iCheck_list">
	<li>
		<input class="input_icheck_3" type="checkbox" id="line-checkbox-1">
		<label for="line-checkbox-1">Checkbox 1</label>
	</li>
	<li>
		<input class="input_icheck_3" type="checkbox" id="line-checkbox-2" checked="">
		<label for="line-checkbox-2">Checkbox 2</label>
	</li>
	<li>
		<input class="input_icheck_3" type="checkbox" id="line-checkbox-disabled" disabled="">
		<label for="line-checkbox-disabled">Disabled</label>
	</li>
	<li>
		<input class="input_icheck_3" type="checkbox" id="line-checkbox-disabled-checked" checked="" disabled="">
		<label for="line-checkbox-disabled-checked">Disabled &amp; checked</label>
	</li>
</ul>
<ul class="jf_iCheck_list">
	<li>
		<input class="input_icheck_3" type="radio" id="line-radio-1" name="line-radio">
		<label for="line-radio-1">Radio button 1</label>
	</li>
	<li>
		<input class="input_icheck_3" type="radio" id="line-radio-2" name="line-radio" checked="">
		<label for="line-radio-2">Radio button 2</label>
	</li>
	<li>
		<input class="input_icheck_3" type="radio" id="line-radio-disabled" disabled="">
		<label for="line-radio-disabled">Disabled</label>
	</li>
	<li>
		<input class="input_icheck_3" type="radio" id="line-radio-disabled-checked" checked="" disabled="">
		<label for="line-radio-disabled-checked">Disabled &amp; checked</label>
	</li>
</ul>

Polaris Skin

Live

States

  • Normal
  • Hover
  • Checked
  • Disabled
  • Disabled & checked
 
GET CODE
<ul class="jf_iCheck_list">
	<li>
		<input class="input_icheck_4" type="checkbox" id="polaris-checkbox-1">
		<label for="polaris-checkbox-1">Checkbox 1</label>
	</li>
	<li>
		<input class="input_icheck_4" type="checkbox" id="polaris-checkbox-2" checked="">
		<label for="polaris-checkbox-2">Checkbox 2</label>
	</li>
	<li>
		<input class="input_icheck_4" type="checkbox" id="polaris-checkbox-disabled" disabled="">
		<label for="polaris-checkbox-disabled">Disabled</label>
	</li>
	<li>
		<input class="input_icheck_4" type="checkbox" id="polaris-checkbox-disabled-checked" checked="" disabled="">
		<label for="polaris-checkbox-disabled-checked">Disabled &amp; checked</label>
	</li>
</ul>
<ul class="jf_iCheck_list">
	<li>
		<input class="input_icheck_4" type="radio" id="polaris-radio-1" name="polaris-radio">
		<label for="polaris-radio-1">Radio button 1</label>
	</li>
	<li>
		<input class="input_icheck_4" type="radio" id="polaris-radio-2" name="polaris-radio" checked="">
		<label for="polaris-radio-2">Radio button 2</label>
	</li>
	<li>
		<input class="input_icheck_4" type="radio" id="polaris-radio-disabled" disabled="">
		<label for="polaris-radio-disabled">Disabled</label>
	</li>
	<li>
		<input class="input_icheck_4" type="radio" id="polaris-radio-disabled-checked" checked="" disabled="">
		<label for="polaris-radio-disabled-checked">Disabled &amp; checked</label>
	</li>
</ul>

Futurico Skin

Live

States

  • Normal
  • Checked
  • Disabled
  • Disabled & checked
 
GET CODE
<ul class="jf_iCheck_list">
	<li>
		<input class="input_icheck_5" type="checkbox" id="futurico-checkbox-1">
		<label for="futurico-checkbox-1">Checkbox 1</label>
	</li>
	<li>
		<input class="input_icheck_5" type="checkbox" id="futurico-checkbox-2" checked="">
		<label for="futurico-checkbox-2">Checkbox 2</label>
	</li>
	<li>
		<input class="input_icheck_5" type="checkbox" id="futurico-checkbox-disabled" disabled="">
		<label for="futurico-checkbox-disabled">Disabled</label>
	</li>
	<li>
		<input class="input_icheck_5" type="checkbox" id="futurico-checkbox-disabled-checked" checked="" disabled="">
		<label for="futurico-checkbox-disabled-checked">Disabled &amp; checked</label>
	</li>
</ul>
<ul class="jf_iCheck_list">
	<li>
		<input class="input_icheck_5" type="radio" id="futurico-radio-1" name="futurico-radio">
		<label for="futurico-radio-1">Radio button 1</label>
	</li>
	<li>
		<input class="input_icheck_5" type="radio" id="futurico-radio-2" name="futurico-radio" checked="">
		<label for="futurico-radio-2">Radio button 2</label>
	</li>
	<li>
		<input class="input_icheck_5" type="radio" id="futurico-radio-disabled" disabled="">
		<label for="futurico-radio-disabled">Disabled</label>
	</li>
	<li>
		<input class="input_icheck_5" type="radio" id="futurico-radio-disabled-checked" checked="" disabled="">
		<label for="futurico-radio-disabled-checked">Disabled &amp; checked</label>
	</li>
</ul>
 
 
iCheck plugin (Super Customized Checkboxes and Radio Buttons) by Damir Foy (https://github.com/fronteed/iCheck)