Skip to main content

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.

AttributeTypeDefaultDescription
labelStringunsetThe label you want displayed with the checkbox.

Optional#

All attributes in this API are optional.

AttributeTypeDefaultDescription
disabledbooleanfalseDetermines whether the checkbox is disabled.
errorstringunsetAdds error styling and warning message.

Events#

The pearson-checkbox component emits one event:

EventDescription
inputWill 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>