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>