Checkbox

New

Structure


<div class="input input--checkbox">
 <div class="input__body">
  <div class="checkbox-wrapper">
   <input type="checkbox" id="input-1" name="input-1" aria-describedby="input-1-help" />
  </div>
  <label for="input-1">Default state</label>
 </div>
 <div class="input__help" id="input-1-help">Helpful text goes here</div>
</div>

The CSS was created using the "Block, Element, Modifier" (BEM) directive for creating classes.

- .input - The container of the group that contains input and its related elements.
- .input__body - The container that will receive the input field and its closest elements
- .input__help - Container for helpful information related to the input field.

Guidelines

General rules

  • Set an id on each input, selector, or other element, and apply an identifier to the label using the "for" attribute.
  • This component is a standalone one. If it is necessary to be combined with another component, this one needs to use another Javascript file to only use the rules applied to it.

Input field states

  • When state modifier classes are inserted, the element receives a corresponding attribute through Javascript. The same happens in reverse.
  • Prefer to manually change the field, inserting an attribute in the input element instead of including a modifier class, unless the initial stage of the element is already defined.
    • data-invalid="true" attribute triggers the 'invalid' state.
    • disabled attribute triggers the 'disabled' state.
    • required attribute triggers the 'required' state.

Features

  • A checkbox will start at indeterminate onde the attribute 'js-input-show-indeterminate' is placed on it.

State modifiers

Theme state modifiers are capable of changing the colors, icons and other visual representations of the element, they are:

 

  • Required - .input--invalid
  • Invalid - .input--invalid
  • Disabled- .input--disabled

Examples

Disabled


<div class="input input--checkbox">
 <div class="input__body">
  <div class="checkbox-wrapper">
   <input type="checkbox" id="input-2" name="input-2" disabled/>
  </div>
  <label for="input-2">Disabled state</label>
 </div>
 <div class="input__help">Helpful text goes here</div>
</div>
Helpful text goes here

Invalid


<div class="input input--checkbox">
 <div class="input__body">
  <div class="checkbox-wrapper">
   <input type="checkbox" data-error-text="The field is invalid" id="input-3" name="input-3" aria-invalid="true"/>
  </div>
  <label for="input-3">Invalid state</label>
 </div>
 <div class="input__help">Helpful text goes here</div>
</div>
Helpful text goes here

Indeterminate


<div class="input input--checkbox">
 <div class="input__body">
  <div class="checkbox-wrapper">
   <input class="js-input-show-indeterminate" data-error-text="The field can not be Indeterminate" type="checkbox" id="input-4" name="input-4" required/>
  </div>
  <label for="input-4">Indeterminate state</label>
 </div>
 <div class="input__help">Helpful text goes here</div>
</div>
Helpful text goes here

Group


<div class="input input--checkbox-group">
 <div class="input__body">
  <div class="input__checkbox-item">
   <div class="checkbox-wrapper">
    <input class="js-input-show-indeterminate" data-error-text="The field can not be Indeterminate" type="checkbox" id="input-A1" name="input-A1"/>
   </div>
   <label for="input-A1">Option 1</label>
  </div>
  <div class="input__checkbox-item">
   <div class="checkbox-wrapper">
    <input type="checkbox" id="input-A2" name="input-A2" />
   </div>
   <label for="input-A2">Option 2</label>
  </div>
  <div class="input__checkbox-item">
   <div class="checkbox-wrapper">
    <input type="checkbox" id="input-A3" name="input-A3"  />
   </div>
   <label for="input-A3">Option 3</label>
  </div>
 </div>
 <div class="input__help">Helpful text goes here</div>
</div>
Helpful text goes here

Nested


<div class="input input--checkbox-group">
 <div class="input__body">
  <div class="input__checkbox-item">
   <div class="checkbox-wrapper">
    <input type="checkbox" id="input-B" name="input-B" />
   </div>
   <label for="input-B">Parent</label>
  </div>
  
  <ul>
   <li class="input__checkbox-item">
    <div class="checkbox-wrapper">
     <input type="checkbox" id="input-B1" name="input-B1" />
    </div>
    <label for="input-B1">Option 1</label>
   </li>
   <li class="input__checkbox-item">
    <div class="checkbox-wrapper">
     <input type="checkbox" id="input-B2" name="input-B2" >
    </div>
    <label for="input-B2">Option 2</label>
   </li>
   <li class="input__checkbox-item">
    <div class="checkbox-wrapper">
     <input type="checkbox" id="input-B3" name="input-B3" />
    </div>
    <label for="input-B3">Option 3</label>
   </li>
  </ul>
 </div>
</div>