Radio
Usage notes
Radio buttons allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare.
Default
Toggle markup
<coral-radio name="radio1"></coral-radio>
Checked
Toggle markup
<coral-radio name="radio3" checked="">Checked radio</coral-radio>
Disabled
Toggle markup
<coral-radio name="radio5" disabled="">Disabled radio</coral-radio>
Checked and disabled
Toggle markup
<coral-radio name="radio6" checked="" disabled="">Checked and disabled</coral-radio>
With the same name
Toggle markup
<coral-radio name="radio7">Checked and disabled</coral-radio>
<coral-radio name="radio8">Checked and disabled</coral-radio>
Labelled
Toggle markup
<coral-radio>Check</coral-radio>
<coral-radio labelled="Check"></coral-radio>
From JavaScript
Toggle markup
<div id="from-javascript"><coral-radio style="width: 149px;">Add Adobe Stock. Get one month free.*</coral-radio></div>
<script>
var radioFromJS = document.createElement('coral-radio');
radioFromJS.textContent = 'Add Adobe Stock. Get one month free.*';
radioFromJS.style.width = '149px';
document.getElementById('from-javascript').appendChild(radioFromJS);
</script>
Getting values from Named Radios
Add checked radio