Checkbox

Checkbox Layout

Checkbox layout is pretty simple:

1. <!-- checkbox element -->
2. <label class="checkbox">
3. <!-- checkbox input -->
4. <input type="checkbox">
5. <!-- checkbox icon -->
6. <i class="icon-checkbox"></i>
7. </label>

Checkbox Group/List

To create Checkbox group/list we need to use List View with few additions:

1. <div class="list">
2. <ul>
3. <!-- Single checkbox item -->
4. <li>
5. <label class="item-checkbox item-content">
6. <!-- Checkbox input -->
7. <input type="checkbox"/>
8. <!-- Checkbox icon -->
9. <i class="icon icon-checkbox"></i>
10. <div class="item-inner">
11. <!-- Checkbox Title -->
12. <div class="item-title">Books</div>
13. </div>
14. </label>
15. </li>
16. <!-- Another checkbox item -->
17. <li>
18. <label class="item-checkbox item-content">
19. <!-- Checked by default -->
20. <input type="checkbox" checked/>
21. <i class="icon icon-checkbox"></i>
22. <div class="item-inner">
23. <div class="item-title">Music</div>
24. </div>
25. </label>
26. </li>
27. ...
28. </ul>
29. </div>

• item-content must be a **<label>** element with additional **item-checkbox** class
• Checkbox input (<input type="checkbox">) must be a first child of item-content
• Checkbox icon must be after checkbox input

Examples

Inline

1. <div class="block block-strong">
2. <p>Lorem <label class="checkbox"><input type="checkbox"><i class="icon-checkbox"></i></label> ipsum dolor sit amet, consectetur adipisicing elit. Alias beatae illo nihil aut eius commodi sint eveniet aliquid eligendi <label class="checkbox"><input type="checkbox"><i class="icon-checkbox"></i></label> ad delectus impedit tempore nemo, enim vel praesentium consequatur nulla mollitia!</p>
3. </div>

Checkbox Group

1. <div class="list">
2. <ul>
3. <li>
4. <label class="item-checkbox item-content">
5. <input type="checkbox" name="demo-checkbox" value="Books" checked="checked"/>
6. <i class="icon icon-checkbox"></i>
7. <div class="item-inner">
8. <div class="item-title">Books</div>
9. </div>
10. </label>
11. </li>
12. <li>
13. <label class="item-checkbox item-content">
14. <input type="checkbox" name="demo-checkbox" value="Movies"/>
15. <i class="icon icon-checkbox"></i>
16. <div class="item-inner">
17. <div class="item-title">Movies</div>
18. </div>
19. </label>
20. </li>
21. <li>
22. <label class="item-checkbox item-content">
23. <input type="checkbox" name="demo-checkbox" value="Food"/>
24. <i class="icon icon-checkbox"></i>
25. <div class="item-inner">
26. <div class="item-title">Food</div>
27. </div>
28. </label>
29. </li>
30. <li>
31. <label class="item-checkbox item-content">
32. <input type="checkbox" name="demo-checkbox" value="Drinks"/>
33. <i class="icon icon-checkbox"></i>
34. <div class="item-inner">
35. <div class="item-title">Drinks</div>
36. </div>
37. </label>
38. </li>
39. </ul>
40. </div>

With Media Lists

1. <div class="list media-list">
2. <ul>
3. <li>
4. <label class="item-checkbox item-content">
5. <input type="checkbox" name="demo-media-checkbox" value="1"/>
6. <i class="icon icon-checkbox"></i>
7. <div class="item-inner">
8. <div class="item-title-row">
9. <div class="item-title">Facebook</div>
10. <div class="item-after">17:14</div>
11. </div>
12. <div class="item-subtitle">New messages from John Doe</div>
13. <div class="item-text">Lorem ipsum...</div>
14. </div>
15. </label>
16. </li>
17. <li>
18. <label class="item-checkbox item-content">
19. <input type="checkbox" name="demo-media-checkbox" value="2"/>
20. <i class="icon icon-checkbox"></i>
21. <div class="item-inner">
22. <div class="item-title-row">
23. <div class="item-title">John Doe (via Twitter)</div>
24. <div class="item-after">17:11</div>
25. </div>
26. <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
27. <div class="item-text">Lorem ipsum...</div>
28. </div>
29. </label>
30. </li>
31. <li>
32. <label class="item-checkbox item-content">
33. <input type="checkbox" name="demo-media-checkbox" value="3"/>
34. <i class="icon icon-checkbox"></i>
35. <div class="item-inner">
36. <div class="item-title-row">
37. <div class="item-title">Facebook</div>
38. <div class="item-after">16:48</div>
39. </div>
40. <div class="item-subtitle">New messages from John Doe</div>
41. <div class="item-text">Lorem ipsum...</div>
42. </div>
43. </label>
44. </li>
45. <li>
46. <label class="item-checkbox item-content">
47. <input type="checkbox" name="demo-media-checkbox" value="4"/>
48. <i class="icon icon-checkbox"></i>
49. <div class="item-inner">
50. <div class="item-title-row">
51. <div class="item-title">John Doe (via Twitter)</div>
52. <div class="item-after">15:32</div>
53. </div>
54. <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
55. <div class="item-text">Lorem ipsum...</div>
56. </div>
57. </label>
58. </li>
59. </ul>
60. </div>