mozilla
Your Search Results

    Coding guide: switches

    This article is in need of a technical review.

    Download resources

    Here you can find examples of how to create switches on Firefox OS, as well as downloads for the CSS and image resources used by the built-in apps on Firefox OS. You can copy these resources into your app and make use of them to build apps that match these apps' appearances.

    Implementing switches

    To implement a switch using the style shown here, place the CSS and media files into your app and then import the CSS using the @import at-rule:

    @import url(resources/switches.css);

    Make sure the media files are in the location expected by the CSS (either by placing them in a corresponding location or by revising the CSS).

    Switch sampler

    HTML: Checkboxes

    Below are a few checkboxes. These are simple <input> elements of type checkbox. You can get the red style of checkbox, used for example to mark messages for deletion, by adding the class "danger" to the label surrounding the checkbox.

    <h2 class="bb-docs">Checkbox, commonly used in edit mode</h2>
    <label class="pack-checkbox">
      <input type="checkbox" checked>
      <span></span>
    </label>
    
    <label class="pack-checkbox">
      <input type="checkbox">
      <span></span>
    </label>
    
    <label class="pack-checkbox danger">
      <input type="checkbox" checked>
      <span></span>
    </label>
    
    <label class="pack-checkbox danger">
      <input type="checkbox">
      <span></span>
    </label>
    

    HTML: Radio buttons

    Below are examples of radio buttons; these are standard <input> elements of type radio.

    <h2 class="bb-docs">Radio, commonly used in settings</h2>
    <label class="pack-radio">
      <input type="radio" name="example" checked>
      <span></span>
    </label>
    
    <label class="pack-radio">
      <input type="radio" name="example">
      <span></span>
    </label>
    
    <label class="pack-radio">
      <input type="radio" name="example">
      <span></span>
    </label>
    
    <label class="pack-radio danger">
      <input type="radio" name="example2" checked>
      <span></span>
    </label>
    
    <label class="pack-radio danger">
      <input type="radio" name="example2">
      <span></span>
    </label>
    
    <label class="pack-radio danger">
      <input type="radio" name="example2">
      <span></span>
    </label>

    HTML: Toggle switches

    Toggle switches are commonly used in settings contexts to represent enabling and disabling a feature or service.

    <h2 class="bb-docs">Switch, commonly used in settings</h2>
    <label class="pack-switch">
      <input type="checkbox" data-type="switch" checked>
      <span></span>
    </label>
    &nbsp;
    <label class="pack-switch">
      <input type="checkbox" data-type="switch">
      <span></span>
    </label>

    CSS

    h2.bb-docs {
      font-size: 1.8rem;
      font-family: "MozTT", Sans-serif;
      font-weight: lighter;
      color: #666;
      margin: -1px 0 0;
      background-color: #f5f5f5;
      padding: 0.4rem 0.4rem 0.4rem 3rem;
      border: solid 1px #e8e8e8;
    }
    

    Working demo

    You can try out the switches in this live demonstration.


    Firefox OS live demos generally require a Gecko-based browser, and work best in recent builds of Firefox.

    Document Tags and Contributors

    Contributors to this page: Sheppy, apeirotron, MBRSL, chrisdavidmills
    Last updated by: chrisdavidmills,