Skip to main content

Toggle

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/toggle"></script>

NPM#

npm i @pearson-ux/toggle --save

Demo#

<label class="gr-label" for="pearsonToggle">Label for toggle </label>
<pearson-toggle id="pearsonToggle"> </pearson-toggle>

Structure#

To add a toggle, just add the markup in your app where you want it displayed.

Important Note For accessibility, You must add a label element with a for="toggleId" replacing toggleId with the id of the toggle.

API#

Required#

All attributes in this API are required.

AttributeTypeDefaultDescription
idStringRequiredThe unique ID of the toggle

Optional#

All attributes in this API are optional.

AttributeTypeDefaultDescription
onbooleanfalseDetermines whether the toggle is on
disabledbooleanfalseDetermines whether the toggle is disabled
nameStringunsetThe name of the toggle
valueStringunsetThe value of the toggle

Events#

The pearson-toggle component emits one event:

EventDescription
changeWill fire when the toggle is triggered via mouse or keyboard
const toggle = document.querySelector('pearson-toggle);
toggle.addEventListener('change', () => {
// Do something when the value changes
});

HTML Markup#

Do you want to use your own JS to make the toggle function? No problem, use the markup below along with CSS to build a toggle with your own JS.

Here are some basic practices to make sure the toggle you build is accessible.
<label for="toggleId" id="labelId" class="gr-label">This is a label</label>
<button
id="toggleId"
class="gr-toggle"
name="toggle-0"
role="switch"
aria-labelledby="labelId"
aria-checked="true"
>
<svg focusable="false" aria-hidden="true">
<use xlink:href="#check-sm-18"></use>
</svg>
<svg focusable="false" aria-hidden="true">
<use xlink:href="#remove-sm-18"></use>
</svg>
</button>