Skip to content
MENU

Soracom

Design System

Checkbox

Options 

Basic usage 

<label class="ds-checkbox">
  <input type="checkbox" id="checkbox-basic">
  <div>Checkbox label 1</div>
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<label class="ds-checkbox">
  <input type="checkbox" id="checkbox-basic">
  <div>Checkbox label 1</div>
</label>

Dots 

The example below uses 2 checkbox components
<label class="ds-checkbox --dots">
  <input type="checkbox" id="checkbox-dots">
  <div>A</div>
</label>
<label class="ds-checkbox --dots">
  <input type="checkbox" id="checkbox-dots-2">
  <div>B</div>
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<label class="ds-checkbox --dots">
  <input type="checkbox" id="checkbox-dots">
  <div>A</div>
</label>
<label class="ds-checkbox --dots">
  <input type="checkbox" id="checkbox-dots-2">
  <div>B</div>
</label>

Panels 

Default style 

The default style will highlight the panel when checked
<label class="ds-checkbox --panel">
  <input type="checkbox" id="checkbox-panel-a">
  <div>Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.</div>
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<label class="ds-checkbox --panel">
  <input type="checkbox" id="checkbox-panel-a">
  <div>Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.</div>
</label>

Simple style 

Simple style will not highlight the panel when checked
<label class="ds-checkbox --panel-simple">
  <input type="checkbox" id="checkbox-panel-b">
  <div>Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.</div>
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<label class="ds-checkbox --panel-simple">
  <input type="checkbox" id="checkbox-panel-b">
  <div>Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.</div>
</label>

Multiple panels 

By default, multiple ds-checkbox --panel components adjacent to each other will display stacked as the shown below.

The example below uses 2 checkbox components
<label class="ds-checkbox --panel">
  <input type="checkbox" id="checkbox-panel">
  <div>Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.</div>
</label>
<label class="ds-checkbox --panel">
  <input type="checkbox" id="checkbox-panel-2">
  <div>Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.</div>
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<label class="ds-checkbox --panel">
  <input type="checkbox" id="checkbox-panel">
  <div>Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.</div>
</label>
<label class="ds-checkbox --panel">
  <input type="checkbox" id="checkbox-panel-2">
  <div>Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.</div>
</label>

To have a horizontal set of panels, place them inside a .ds-cols container.

Example inside ds-cols. The example below uses 2 checkbox components
<div class="ds-cols">
  <label class="ds-span--6 --panel">
    <input type="checkbox" id="checkbox-panel-3">
    <div>Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.</div>
  </label>
  <label class="ds-span--6 --panel">
    <input type="checkbox" id="checkbox-panel-4">
    <div>Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.</div>
  </label>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-cols">
  <label class="ds-span--6 --panel">
    <input type="checkbox" id="checkbox-panel-3">
    <div>Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.</div>
  </label>
  <label class="ds-span--6 --panel">
    <input type="checkbox" id="checkbox-panel-4">
    <div>Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.</div>
  </label>
</div>
Longer mixed content example. The example below uses 2 checkbox components
<label class="ds-checkbox --panel">
  <input type="checkbox" id="checkbox-mixed">
  <div>
    <h4>Aenean lacinia bibendum</h4>
    <p>Morbi leo risus, porta ac consectetur ac, <em>vestibulum at eros</em>. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. <strong>Aenean lacinia bibendum nulla</strong> sed consectetur.</p>
    <p>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</label>
<label class="ds-checkbox --panel">
  <input type="checkbox" id="checkbox-mixed-2">
  <div>
    <h4>Aenean lacinia bibendum</h4>
    <p>Morbi leo risus, porta ac consectetur ac, <em>vestibulum at eros</em>. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. <strong>Aenean lacinia bibendum nulla</strong> sed consectetur.</p>
    <p>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<label class="ds-checkbox --panel">
  <input type="checkbox" id="checkbox-mixed">
  <div>
    <h4>Aenean lacinia bibendum</h4>
    <p>Morbi leo risus, porta ac consectetur ac, <em>vestibulum at eros</em>. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. <strong>Aenean lacinia bibendum nulla</strong> sed consectetur.</p>
    <p>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</label>
<label class="ds-checkbox --panel">
  <input type="checkbox" id="checkbox-mixed-2">
  <div>
    <h4>Aenean lacinia bibendum</h4>
    <p>Morbi leo risus, porta ac consectetur ac, <em>vestibulum at eros</em>. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. <strong>Aenean lacinia bibendum nulla</strong> sed consectetur.</p>
    <p>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</label>

Tags 

DEPRECATED: The following option has been deprecated and merged into ds-tags which has additional features.
The example below uses 2 checkbox components
<label class="ds-checkbox --tags">
  <input type="checkbox">
  <span>First item</span>
</label>
<label class="ds-checkbox --tags">
  <input type="checkbox">
  <span>Second item</span>
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<label class="ds-checkbox --tags">
  <input type="checkbox">
  <span>First item</span>
</label>
<label class="ds-checkbox --tags">
  <input type="checkbox">
  <span>Second item</span>
</label>

Using <div> elements 

As an alternative to using a <label> html element as the container - you may also use a <div>, with the <label> element inside it. The previous examples are the preferred structure for semantic reasons, but they will work with the syntax shown below.

The example below uses 2 checkbox components
<div class="ds-checkbox">
  <input type="checkbox" id="checkbox-div-1">
  <label for="checkbox-div-1">Checkbox label 1</label>
</div>
<div class="ds-checkbox">
  <input type="checkbox" id="checkbox-div-2">
  <label for="checkbox-div-2">Checkbox label 2</label>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-checkbox">
  <input type="checkbox" id="checkbox-div-1">
  <label for="checkbox-div-1">Checkbox label 1</label>
</div>
<div class="ds-checkbox">
  <input type="checkbox" id="checkbox-div-2">
  <label for="checkbox-div-2">Checkbox label 2</label>
</div>