1+ Checkbox Components - Vanilla CSS

Checkboxes are user interface elements used on websites to allow users to select one or more options from a list of choices. These checkboxes typically appear as small square boxes that can be clicked to toggle between selected and deselected states. In this collection, you'll find various designs for checkbox components that you can easily incorporate into your website's design. Whether you need basic checkboxes or more visually appealing styles, these components are designed to improve user interaction and provide a seamless browsing experience for your website visitors.

Simple Checkbox

Upgrade your user interface with our sleek checkbox UI component, designed for HTML and CSS.

Author: Admin

Preview
Code

<div class="container">
  <div class="check">
    <input id="box1" type="checkbox" checked />
    <label for="box1">Checked</label>
  </div>

  <div class="check">
    <input id="box2" type="checkbox" />
    <label for="box2">Unchecked</label>
  </div>

  <div class="check">
    <input id="box3" type="checkbox" disabled />
    <label for="box3">Disabled</label>
  </div>
</div>

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

.container {
  display: flex;
  flex-direction: column;
  font-size: 25px;
}

.check {
  margin-bottom: 10px;
}

input[type='checkbox'] {
  display: none;
}
input[type='checkbox'] + label:before {
  font-family: FontAwesome;
  display: inline-block;
}

input[type='checkbox'] + label:before {
  content: '\f096';
  letter-spacing: 5px;
}

input[type='checkbox']:checked + label:before {
  content: '\f046';
}

.check input[disabled] + label {
  cursor: not-allowed;
}

```
No need of JavaScript
```