Switch

With a switch can a value be active or deactivate.

The following code examples shows how to use switch:

<label class="switch" for="example" tabindex="1">
  <input class="switch__checkbox" type="checkbox" id="example" />
  <span class="switch__label">Hello World</span>
</label>

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

• .switch - required the block class, must be an <label>, must have the [for] attribute that matches the [id] from the input, needs the attribute [tabindex], the order of the inner input and label is predetermined and may not be changed
• .switch__checkbox - 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
• .switch__label - required contains the label, is required even if the label is empty
• Modifier
  • .switch--label-top - if the block modifier is added, the label is shown below to the switch
  • .switch--label-left - if the block modifier is added, the label is shown left to the switch

Basic Example: