Radio

A radio let users select one choice out of multiple.

The following code examples shows how to use input:

<div class="radio" tabindex="1">
  <input class="radio__input" type="radio" id="example" name="demo">
  <label class="radio__label" for="example">Hello World</label>
</div>

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

• .radio - required the block class, needs the attribute [tabindex], the order of the inner input and label is predetermined and may not be changed
• .radio__input - required a input that is hidden, must be an input[type="radio"], must have the attribute [id] that matches the [for] attribute of the label, should have a [name] attribute
• .radio__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
  • .radio--label-left - if the block modifier is added, the label is shown left to the checkbox

Basic Example: