Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<fieldset class="js-nc-form-buttons">
<legend>This is the radio selection</legend>
<p class="nc-button-wrapper">
<input type="radio" name="color" id="color_1" value="red">
<label for="color_1">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper"><g class="nc-interact_input-radio-c-16"><defs><clipPath id="nc-i-radio-mask"><circle cx="8" cy="8" r="8"></circle> </clipPath> </defs> <circle cx="8" cy="8" r="8" fill="#d1d1d1"></circle><circle cx="8" cy="8" r="12" fill="#43a6dd" clip-path="url(#nc-i-radio-mask)" transform="translate(-8 -8) scale(0)"></circle><circle cx="8" cy="8" r="3" fill="#fff" transform="translate(-8 -8) scale(0)"></circle></g></g></svg>
Red
</label>
</p>
<p class="nc-button-wrapper">
<input type="radio" name="color" id="color_2" value="yellow">
<label for="color_2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper"><g class="nc-interact_input-radio-c-16"><defs><clipPath id="nc-i-radio-mask"><circle cx="8" cy="8" r="8"></circle> </clipPath> </defs> <circle cx="8" cy="8" r="8" fill="#d1d1d1"></circle><circle cx="8" cy="8" r="12" fill="#43a6dd" clip-path="url(#nc-i-radio-mask)" transform="translate(-8 -8) scale(0)"></circle><circle cx="8" cy="8" r="3" fill="#fff" transform="translate(-8 -8) scale(0)"></circle></g></g></svg>
Yellow
</label>
</p>
</fieldset>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment