<div class="checkbox-item">
    <div class="checkbox-item__inner">
        <input class="checkbox-item__input" type="radio" name="timing" id="timing2" />
        <label class="checkbox-item__label" for="timing2">After 20 minutes</label>
        <div class="checkbox-item__icons">
            <?xml version="1.0" encoding="utf-8"?>
            <svg class='checkbox-item__icon checkbox-item__icon-yes' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24"
                xml:space="preserve">
			<path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><path d="M0 0h24v24H0z" fill="none"/>
			</svg>
            <?xml version="1.0" encoding="utf-8"?>
            <svg class='checkbox-item__icon checkbox-item__icon-no' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24"
                xml:space="preserve">
			<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><path d="M0 0h24v24H0z" fill="none"/>
			</svg>
        </div>
    </div>
</div>
<div class="checkbox-item">
	<div class="checkbox-item__inner">
		<input class="checkbox-item__input" type="radio" name="{{ name }}" id="{{ id }}" />
		<label class="checkbox-item__label" for="{{ id }}">{{ label }}</label>
		<div class="checkbox-item__icons">
			{{> @icon icon=radioYes class="checkbox-item__icon checkbox-item__icon-yes"}}
			{{> @icon icon=radioNo class="checkbox-item__icon checkbox-item__icon-no"}}
		</div>
	</div>
	{{#if postText}}
	<p class="checkbox-item__post-text">{{ postText }}</p>
	{{/if}}
</div>
{
  "id": "timing2",
  "name": "timing",
  "label": "After 20 minutes",
  "radioYes": "<path d=\"M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"/><path d=\"M0 0h24v24H0z\" fill=\"none\"/>",
  "radioNo": "<path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"/><path d=\"M0 0h24v24H0z\" fill=\"none\"/>"
}

Radio

A Radio represent a single option in a set where only when option may be selected.

When to use:

Use Radio inputs when the user must select only one option out of a set.

When not to use:

  • Many options; when there are many options, instead use an Autosuggest
  • Multiple options; if a user may select more than one option in a set, use Checkboxes instead.