Radio Group
Usage notes
Radio groups are used to group radio fields.
Default
Toggle markup
<coral-radiogroup aria-label="Animals">
<coral-radio name="r1">Quack</coral-radio>
<coral-radio name="r1">Woof</coral-radio>
<coral-radio name="r1">Meow</coral-radio>
</coral-radiogroup>
Vertical
Toggle markup
<coral-radiogroup orientation="vertical" aria-label="Numbers">
<coral-radio name="r2">1</coral-radio>
<coral-radio name="r2">2</coral-radio>
<coral-radio name="r2">3</coral-radio>
</coral-radiogroup>
Labels below
Toggle markup
<coral-radiogroup orientation="labelsbelow" aria-label="Alphabet">
<coral-radio name="r3">A</coral-radio>
<coral-radio name="r3">B</coral-radio>
<coral-radio name="r3">C</coral-radio>
</coral-radiogroup>
CSS only
Toggle markup
<!-- Deprecated -->
<div class="coral-RadioGroup" role="group" aria-label="Languages">
<coral-radio name="r4">English</coral-radio>
<coral-radio name="r4">German</coral-radio>
<coral-radio name="r4">French</coral-radio>
</div>