Skip to main content

Radio Buttons

Installation#

For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.

CDN#

<script src="https://unpkg.com/@pearson-ux/radio"></script>

NPM#

npm i @pearson-ux/radio --save

Demo#

<pearson-radio label="Label" groupName="groupOne">
<input name="first option"/>
<input name="second option"/>
<input name="third option"/>
</pearson-radio>

Structure#

Follow these steps to successfully build out a radio component. Start by adding a pearson-radio element.

<pearson-radio></pearson-radio>

Add a label and groupName attribute.

<pearson-radio label="Label" groupName="groupOne" ></pearson-radio>

Add any number of input elements inside the pearson-radio using the name attribute as the value you want to display for that input.

<pearson-radio label="Label" groupName="groupOne">
<input name="first option"/>
<input name="second option"/>
<input name="third option"/>
</pearson-radio>

API#

Required#

All attributes in this API are required.

AttributeTypeDefaultDescription
groupNameString"groupOne"The name of the radio group.

Optional#

All attributes in this API are optional.

AttributeTypeDefaultDescription
labelstringunsetThe label you want displayed with radio group.

Events#

The pearson-radio component emits one event:

EventDescription
inputWill fire when a radio button in the group is selected.
const radioGroup = document.querySelector('pearson-radio');
radioGroup.addEventListener('input', event => {
console.log(radioGroup.value)
})

HTML Markup#

Do you prefer to use HTML instead of a web component? No problem, use the markup below along with CSS.

Forms can be tricky, so here is some guidance around how to implement accessibility successfully.
<div class="gr-form-element">
<fieldset class="gr-fieldset">
<legend class="gr-label">This is a radio group</legend>
<div class="gr-radio">
<input type="radio" name="scotch" id="radioOne" >
<label for="radioOne">Selection One</label>
<span>
<svg focusable="false" class="icon-24" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#single-selected-24"></use>
</svg>
</span>
</div>
<div class="error-state">
<svg focusable="false" class="icon-18" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning-18"></use>
</svg>
<span class="gr-meta">Warning Text</span>
</div>
<div class="gr-radio">
<input type="radio" name="scotch" id="radioTwo" >
<label for="radioTwo">Selection Two</label>
<span>
<svg focusable="false" class="icon-24" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#single-selected-24"></use>
</svg>
</span>
</div>
<div class="error-state">
<svg focusable="false" class="icon-18" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning-18"></use>
</svg>
<span class="gr-meta">Warning Text</span>
</div>
</fieldset>
</div>