<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\"/>"
}
A Radio represent a single option in a set where only when option may be selected.
Use Radio inputs when the user must select only one option out of a set.