Polymer-based web component for D2L checkboxes

[ This description is mirrored from README.md at github.com/BrightspaceUI/checkbox on 2019-05-10 ]


Published on webcomponents.org Bower version Build status

Polymer-based web component for D2L checkboxes.

screenshot of checkbox component

For further information on this and other Brightspace UI components, see the docs at ui.developers.brightspace.com.


d2l-checkbox can be installed from Bower:

bower install d2l-checkbox


Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import d2l-checkbox.html:

  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="../d2l-checkbox/d2l-checkbox.html">

A <d2l-checkbox> custom element can now be used in your application. The label for your checkbox should be placed inside the element:

<d2l-checkbox>Label for checkbox</d2l-checkbox>

Many of the same attributes from native <input type="checkbox"> are available:

<d2l-checkbox checked>Checked checkbox</d2l-checkbox>

To hide the label when space is limited, use the aria-label attribute to provide an accessible label:

<d2l-checkbox aria-label="label for checkbox"></d2l-checkbox>

To align following related content below checkboxes, the d2l-checkbox-spacer element can be used.

<d2l-checkbox>Label for checkbox</d2l-checkbox>
<d2l-checkbox-spacer style="color:#999999;">
  Additional content can go here and will<br>
  also line up nicely with the checkbox.

Developing, Testing and Contributing

After cloning the repo, run npm install to install dependencies.

If you don't have it already, install the Polymer CLI globally:

npm install -g polymer-cli

To start a local web server that hosts the demo page and tests:

polymer serve

To lint (eslint and Polymer lint):

npm run lint

To run unit tests locally using Polymer test:

polymer test --skip-plugin sauce

To lint AND run local unit tests:

npm test


Link to this version
ImportedReleased 30 January 2018Apache License 2.0
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
bower install --save BrightspaceUI/checkbox"#0.2.1"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.2.1


  • d2l-colors#^3.1.2
  • d2l-typography#^6.0.0
  • polymer#1 - 2