Checkbox

An input let users enter and edit text.

The following code examples shows how to use input:

<div class="checkbox" tabindex="1">
  <input class="checkbox__input" type="checkbox" id="example">
  <label class="checkbox__label" for="example">Hello World</label>
</div>

The following list describe all existing block/element/modifier classes of the component.

• .checkbox - required the block class, needs the attribute [tabindex], the order of the inner input and label is predetermined and may not be changed
• .checkbox__input - required a input that is hidden, must be an input[type="checkbox"], must have the attribute [id] that matches the [for] attribute of the label
• .checkbox__label - required the label, always required, must be an <label>, even if no text is shown, must have the [for] attribute that matches the [id] from the input
• Modifier
  • .checkbox--label-left - if the block modifier is added, the label is shown left to the checkbox
• Attribute
  • [intermediate] - you can add the intermediate attribute by your self to see the state, but you must handle the adding/removing by your self

Basic Example: