Radio Button

Demo styling
<div>
    <label for="custom-radio1" class="custom-input custom-input--radio">
        <input id="custom-radio1" value="1" name="radio" type="radio" checked />
        <span class="custom-input__icon"></span>
        Radio button 1
    </label>
</div>
<div>
    <label for="custom-radio2" class="custom-input custom-input--radio">
        <input id="custom-radio2" value="2" name="radio" type="radio" />
        <span class="custom-input__icon"></span>
        Radio button 2
    </label>
</div>
<div>
    <label for="custom-radio3" class="custom-input custom-input--radio">
        <input id="custom-radio3" value="3" name="radio" type="radio" />
        <span class="custom-input__icon"></span>
        Radio button 3
    </label>
</div>
<div>
    <label for="custom-radio4" class="custom-input custom-input--radio">
        <input id="custom-radio4" value="4" name="radio" type="radio" />
        <span class="custom-input__icon"></span>
        Radio button 4
    </label>
</div>
{{#each items}}
<div>
	<label for="custom-radio{{currentItem}}" class="custom-input custom-input--radio">
		<input id="custom-radio{{currentItem}}" value="{{currentItem}}" name="radio" type="radio" {{#if @first}}checked{{/if}} />
		<span class="custom-input__icon"></span>
		{{title}} {{currentItem}}
	</label>
</div>
{{/each}}
{
  "items": [
    {
      "title": "Radio button",
      "currentItem": 1
    },
    {
      "title": "Radio button",
      "currentItem": 2
    },
    {
      "title": "Radio button",
      "currentItem": 3
    },
    {
      "title": "Radio button",
      "currentItem": 4
    }
  ]
}

No notes defined.