Radio Buttons
#
InstallationFor 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>
#
NPMnpm 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>
#
StructureFollow 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#
RequiredAll attributes in this API are required.
Attribute | Type | Default | Description |
---|---|---|---|
groupName | String | "groupOne" | The name of the radio group. |
#
OptionalAll attributes in this API are optional.
Attribute | Type | Default | Description |
---|---|---|---|
label | string | unset | The label you want displayed with radio group. |
#
EventsThe 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 MarkupDo you prefer to use HTML instead of a web component? No problem, use the markup below along with CSS.
<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>