Checkbox

Default checkboxes can be customized with FlatifyCSS, it is done with pure CSS which has a clean design and is keyboard friendly, also easy to have one.
First you need to wrap your checkbox with the .checkbox-wrapper class (it is better to wrap with <label> tag), and add ` after the input, that is it and now you have a custom checkbox.

index.html

<label class="checkbox-wrapper">
  <input type="checkbox" checked />
  <span class="check"></span>
  I Agree to Privacy Policy.
</label>

States

A checkbox might be checked, disabled or Indeterminate, so it is necessary to know about them. By adding the checked HTML attribute it will be checked. The disabled attribute will remove element functionality. Checkboxes can be both checked and disabled at the same time.
Indeterminate is the neutral state when a checkbox is neither or either true or false, as MDN Web Docs mentions:

No browser currently supports indeterminate as an attribute. It must be set via JavaScript. See Indeterminate state checkboxes for details.

Though indeterminate is not an HTML attribute but can be styled by CSS also reading this article from CSS Tricks helps you understand its usage more.

Validation

There are .valid, .warning and .invalid classes for validation. You can add them to .checkbox-wrapper.

Sizes

To change the checkbox size use size setter classes. These classes just set a font-size property so it is possible to change it yourself by writing custom CSS. Do not forget to add class to the wrapper to change label size as well.

index.html

<label class="checkbox-wrapper size-xs">
  <input type="checkbox" />
  <span class="check"></span>
  I Agree to Privacy Policy.
</label>

<label class="checkbox-wrapper size-xs">
  <input type="checkbox" />
  <span class="check"></span>
  I Agree to Privacy Policy.
</label>

<label class="checkbox-wrapper size-lg">
  <input type="checkbox" />
  <span class="check"></span>
  I Agree to Privacy Policy.
</label>

<label class="checkbox-wrapper size-3x">
  <input type="checkbox" />
  <span class="check"></span>
  I Agree to Privacy Policy.
</label>

Checkbox buttons

It is possible to change checkboxes appearance similar to buttons, it is a bit different from custom checkboxes also it is necessary to read about buttons, here is an example:

index.html

<input id="my-checkbox-button1" class="checkbox-button" type="checkbox" name="checkbox-button" />
<label for="my-checkbox-button1" class="button style-blue">Pizza</label>

<input id="my-checkbox-button2" class="checkbox-button" type="checkbox" name="checkbox-button" />
<label for="my-checkbox-button2" class="button style-red">Sushi</label>

<input id="my-checkbox-button3" class="checkbox-button" type="checkbox" name="checkbox-button" />
<label for="my-checkbox-button3" class="button style-green">Taco</label>

Customization

There are CSS variables for customizing checkboxes:

--flatify__form-element-accent-color
--flatify__form-element-bg-color
--flatify__form-element-txt-color
--flatify__form-element-border-color
--flatify__form-element-border-color__focus
--flatify__form-element-border-color__valid
--flatify__form-element-border-color__warning
--flatify__form-element-border-color__invalid

Here is an example of these variables usage:

style.css

.checkbox-wrapper {
  --flatify__form-element-accent-color: #37bc9b;
  --flatify__form-element-bg-color: #ffce54;
  --flatify__form-element-txt-color: #434a54;
  --flatify__form-element-border-color: #e0c341;
  --flatify__form-element-border-color__focus: #f6bb42;
  --flatify__form-element-border-color__valid: #5d9cec;
  --flatify__form-element-border-color__warning: #8067b7;
  --flatify__form-element-border-color__invalid: #bf263c;
}