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 for toggle

<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.

Attribute	Type	Default	Description
id	String	Required	The unique ID of the toggle

Optional

All attributes in this API are optional.

Attribute	Type	Default	Description
on	boolean	false	Determines whether the toggle is on
disabled	boolean	false	Determines whether the toggle is disabled
name	String	unset	The name of the toggle
value	String	unset	The value of the toggle

Events

The pearson-toggle component emits one event:

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