44 Users

56 Orders

6 Metting

23 Tickets

15 Requests

Components

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

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 /js/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 skin:

<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">
				                      <input type="radio" 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

Section 1

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat

Section 2

Section 3

Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat

Section 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus voluptatem asperiores atque fugiat dolores illo in sed rem reiciendis nulla debitis iure labore odio aspernatur repellendus velit dicta est corporis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit repellendus dolores aspernatur est aliquid consectetur repudiandae cum sequi ipsum unde accusamus possimus dolorum temporibus quas voluptatibus aperiam rem nobis rerum.

Slider

Typeahead

Datepicker

File upload

Select fileChangeRemove

Input mask

ISBN :

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #2

Collapsible Group Item #3

Spellchecker wysihtml5

Note : Add .content-dark and .block-dark to set the dark theme.

Note : Add .form-dark and .add-dark to set the dark form.

Polaris skin