Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Checkbox 2.3 implementation

This article needs a technical review. How you can help.

This page details how to implement a Firefox OS 2.3 <gaia-checkbox> web component in your own app.

Installation

First of all, make sure you have followed the preliminary setup instructions. Next, cd into the directory containing your web app. You can install the gaia-checkbox component with:

bower install gaia-components/gaia-checkbox

The command installs not only the gaia-checkbox component, but also the base gaia-component code that all gaia components need to run, plus the Gaia icons set that many Gaia web components make use of.

Examples

The following gives you an idea of what rendered gaia-checkboxes would look like:

You can find the gaia-checkbox source code on Github, plus a detailed live example.

Note: Remember that you need to be using a browser that supports web components (see the preliminary setup instructions for details.)

Code

This section details all the code you need.

CSS and JavaScript

To include all of the styles and script that this components makes use of, you need to add the following to your document head:

<script src="bower_components/gaia-icons/gaia-icons.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/gaia-icons/gaia-icons.css"></link>
<script src="bower_components/gaia-component/gaia-component.js"></script>
<script src="bower_components/gaia-checkbox/gaia-checkbox.js"></script>

HTML

With the above setup done, you can now use a <gaia-checkbox> element anywhere you like, for example:

<ul>
  <li>
    Select me
    <gaia-checkbox name="a" checked></gaia-checkbox>
  </li>
  <li>
    No, select me!
    <gaia-checkbox name="b"></gaia-checkbox>
  </li>
</ul>

<gaia-checkbox> has three attributes available:

  • checked: Makes the checkbox checked by default when the view first loads.
  • name="name": Gives the checkbox data an identifier for when it is used in a submitted dialog/form.
  • danger: Gives the checkbox special styling to indicate that it represents an important choice, such as deleting data.

Document Tags and Contributors

 Contributors to this page: chrisdavidmills, SunboX, kscarfone
 Last updated by: chrisdavidmills,