Huesos
Style
Guide

Repositoire

GitHub

Preview

Checkbox

By default, checkboxes will use the native HTML styling.

An alternative style can be applied globaly by setting $pseudo-checkbox: true or case by case using the .pseudo-checkbox class or pseudo-checkbox() mixin.

Example

<div class="form-item">
    <input id="checkbox" type="checkbox" name="checkbox">
    <label for="checkbox">Checkbox</label>
</div>

<div class="form-item">
    <input id="checkbox2" type="checkbox" name="checkbox2" class="pseudo-checkbox">
    <label for="checkbox2">Forced pseudo-checkbox</label>
</div>

Assets

  • Filesystem Path: src/components/forms/checkbox/_checkbox.scss
  • Size: 185 Bytes 
  • input[type=checkbox] {
    // Provide an opt-in using a class if pseudo is deactivated
	@if($pseudo-checkbox == false) {
		&.pseudo-checkbox {
			@include pseudo-checkbox();
		}
    }
}