Checkbox

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

NPM

npm i @pearson-ux/checkbox --save

Demo

    <pearson-checkbox label="Label"></pearson-checkbox>

Structure

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

API

Required

All attributes in this API are required.

Attribute	Type	Default	Description
label	String	unset	The label you want displayed with the checkbox.

Optional

All attributes in this API are optional.

Attribute	Type	Default	Description
disabled	boolean	false	Determines whether the checkbox is disabled.
error	string	unset	Adds error styling and warning message.

Events

The pearson-checkbox component emits one event:

Event	Description
input	Will fire when the checkbox is checked or unchecked.

const checkbox = document.querySelector('pearson-checkbox');
checkbox.addEventListener('input', event => {
  console.log(checkbox.value)
  console.log(checkbox.checked)
})

Additional Attributes

If you want to change an attribute, or listen for an event coming from the encapsulated input you can use javascript to access the components shadow dom.

const checkbox = document.querySelector('pearson-checkbox'),
shadowInput = checkbox.shadowRoot.querySelector('input');

// you can now add attributes or listen for events on the shadowInput.

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">
    <div class="gr-checkbox">
        <input type="checkbox" id="checkboxId" value="This is a checkbox label" />
        <label for="checkboxId">This is a checkbox label</label>
        <span>
        <svg focusable="false" class="icon-24" aria-hidden="true">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#multi-correct-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>