Checkbox
#
InstallationFor 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>
#
NPMnpm i @pearson-ux/checkbox --save
#
Demo <pearson-checkbox label="Label"></pearson-checkbox>
#
StructureTo add a checkbox, just add the markup in your app where you want it displayed.
#
API#
RequiredAll attributes in this API are required.
Attribute | Type | Default | Description |
---|---|---|---|
label | String | unset | The label you want displayed with the checkbox. |
#
OptionalAll 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. |
#
EventsThe 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 AttributesIf 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 MarkupDo you prefer to use HTML instead of a web component? No problem, use the markup below along with CSS.
<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>