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.

Attribute	Type	Default	Description
groupName	String	"groupOne"	The name of the radio group.

Optional

All attributes in this API are optional.

Attribute	Type	Default	Description
label	string	unset	The label you want displayed with radio group.

Events

The pearson-radio component emits one event:

Event	Description
input	Will 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>