Soracom

Design System
  1. Home
  2. Design system
  3. Elements
  4. Checkbox

Checkbox

Options

Basic usage

html
Copy 
<label class="ds-checkbox">
  <input type="checkbox" />
  <div>Checkbox label 1</div>
</label>
<label class="ds-checkbox">
  <input type="checkbox" />
  <div>Checkbox label 2</div>
</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.

html
Copy 
<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>

Visual states

Default style

html
Copy 
<label class="ds-checkbox --alert">
  <input type="checkbox" />
  <div>Checkbox label 1</div>
</label>
<label class="ds-checkbox --success">
  <input type="checkbox" />
  <div>Checkbox label 2</div>
</label>

Panel style

html
Copy 
<label class="ds-checkbox --panel --alert">
  <input type="checkbox" />
  <div>Checkbox label 1</div>
</label>
<label class="ds-checkbox --panel --success">
  <input type="checkbox" />
  <div>Checkbox label 2</div>
</label>

Colors

html
Copy 
<label class="ds-checkbox --color-purple">
  <input type="checkbox" />
  <div>Checkbox label 1</div>
</label>
<label class="ds-checkbox --color-magenta">
  <input type="checkbox" />
  <div>Checkbox label 2</div>
</label>
html
Copy 
<label class="ds-checkbox --panel --color-purple">
  <input type="checkbox" />
  <div>Checkbox label 1</div>
</label>
<label class="ds-checkbox --panel --color-magenta">
  <input type="checkbox" />
  <div>Checkbox label 2</div>
</label>

Icons

Add an additional class such as --icon-online from the available icon modifier list.

html
Copy 
<label class="ds-checkbox --icon-rocket">
  <input type="checkbox" />
  <div>Checkbox label 1</div>
</label>
<label class="ds-checkbox --icon-moon">
  <input type="checkbox" />
  <div>Checkbox label 2</div>
</label>

Size

Small, medium, large

Default style

html
Copy 
<!-- Small -->
<label class="ds-checkbox --small">
  <input type="checkbox" />
  <div>Checkbox label 2</div>
</label>
<!-- Default -->
<label class="ds-checkbox">
  <input type="checkbox" />
  <div>Checkbox label 1</div>
</label>
<!-- Medium -->
<label class="ds-checkbox --medium">
  <input type="checkbox" />
  <div>Checkbox label 3</div>
</label>
<!-- Large -->
<label class="ds-checkbox --large">
  <input type="checkbox" />
  <div>Checkbox label 4</div>
</label>

Panel style

html
Copy 
<!-- Small -->
<label class="ds-checkbox --panel --small">
  <input type="checkbox" />
  <div>Checkbox label 2</div>
</label>
<!-- Default -->
<label class="ds-checkbox --panel">
  <input type="checkbox" />
  <div>Checkbox label 1</div>
</label>
<!-- Medium -->
<label class="ds-checkbox --panel --medium">
  <input type="checkbox" />
  <div>Checkbox label 3</div>
</label>
<!-- Large -->
<label class="ds-checkbox --panel --large">
  <input type="checkbox" />
  <div>Checkbox label 4</div>
</label>

Hiding the label

By default a checkbox shows the label text (the contents inside the div). This can be hidden using the --hide-label option. For accessibility purposes it’s preferable to have a descriptive label hidden using this method, rather than omitting the label text.

html
Copy 
<label class="ds-checkbox --hide-label --tip-right">
  <input type="checkbox" />
  <div>Checkbox label 1</div>
</label>
<label class="ds-checkbox --hide-label --tip-right">
  <input type="checkbox" />
  <div>Checkbox label 2</div>
</label>

Styles

Custom styles exist for specific use cases.

Dots

html
Copy 
<label class="ds-checkbox --dots">
  <input type="checkbox" />
  <div>A</div>
</label>
<label class="ds-checkbox --dots">
  <input type="checkbox" />
  <div>B</div>
</label>

Panel

Default

The default panel style will highlight the panel when selected.

The example below uses 2 ds-checkbox components

html
Copy 
<label class="ds-checkbox --panel">
  <input type="checkbox" />
  <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" />
  <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>

The example below uses 2 label and checkbox elements inside a single panel

html
Copy 
<div class="ds-checkbox --panel">
  <label>
    <input type="checkbox" />
    <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>
    <input type="checkbox" />
    <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>
Simple

Panel simple does not use a border or background highlight color when selected.

The example below uses 2 ds-checkbox components

html
Copy 
<label class="ds-checkbox --panel-simple">
  <input type="checkbox" />
  <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" />
  <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>

The example below uses 2 label and checkbox elements inside a single panel

html
Copy 
<div class="ds-checkbox --panel-simple">
  <label>
    <input type="checkbox" />
    <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>
    <input type="checkbox" />
    <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>

Swatches

Swatches is a style used to select color options.

The example below uses 2 checkbox components

html
Copy 
<label class="ds-checkbox --swatch">
  <input type="checkbox" />
  <div>A</div>
</label>
<label class="ds-checkbox --swatch --color-red-lighter">
  <input type="checkbox" />
  <div>B</div>
</label>
<label class="ds-checkbox --swatch --color-orange">
  <input type="checkbox" />
  <div>C</div>
</label>
<label class="ds-checkbox --swatch" style="--ds-checkbox-color: #d734ab;">
  <input type="checkbox" />
  <div>D</div>
</label>
<label class="ds-checkbox --swatch" style="--ds-checkbox-color: transparent;">
  <input type="checkbox" />
  <div>E</div>
</label>

Round

html
Copy 
<label class="ds-checkbox --round">
  <input type="checkbox" />
  <div>A</div>
</label>
<label class="ds-checkbox --round">
  <input type="checkbox" />
  <div>B</div>
</label>

Tags

This option is available using ds-tags which has additional features.

Tests

Default style variations

Default style with multiple options and additional content

The example below uses 2 label and checkbox elements inside a single panel

html
Copy 
<div class="ds-checkbox">
  <label>
    <input type="checkbox" />
    <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>
      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>
    <input type="checkbox" />
    <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>

Default style with ds-cols content

html
Copy 
<label class="ds-checkbox">
  <input type="checkbox" />
  <div class="ds-cols --6">
    <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>
  </div>
</label>
<label class="ds-checkbox">
  <input type="checkbox" />
  <div class="ds-cols --6">
    <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>
  </div>
</label>

Panel style variations

Panel style with multiple options

The example below uses 2 label and checkbox elements inside a single panel

html
Copy 
<div class="ds-checkbox --panel">
  <label>
    <input type="checkbox" />
    <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>
    <input type="checkbox" />
    <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>

Panel style with multiple options and additional content

The example below uses 2 label and checkbox elements inside a single panel

html
Copy 
<div class="ds-checkbox --panel">
  <label>
    <input type="checkbox" />
    <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>
      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>
    <input type="checkbox" />
    <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>

Panel style with horizontal layout

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

The example below uses 2 checkbox components

html
Copy 
<div class="ds-cols --6">
  <label class="ds-checkbox --panel">
    <input type="checkbox" />
    <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" />
    <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>

Panel style with longer mixed content

The example below uses 2 checkbox components

html
Copy 
<label class="ds-checkbox --panel">
  <input type="checkbox" />
  <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" />
  <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>

Panel style with complex layout and content

html
Copy 
<div class="ds-cols --6 --no-wrap">
  <div class="ds-checkbox --panel --icon-soracom-air" data-ds-message="Soracom Air is not available"></div>
  <label class="ds-checkbox --panel --indent-xsmall ds-rows --gap-xxsmall">
    <div class="ds-cols --middle --no-wrap --gap-xsmall">
      <input type="checkbox">
      <span class="--label">Soracom Arc</span>
      <i class="ds-icon --xsmall --icon-soracom-arc --end"></i>
    </div>
    <table class="ds-datatable --plain --condensed --xsmall --no-indent">
      <tbody>
        <tr>
          <td>999990005989498</td>
          <td>planArc01</td>
          <td>
            <div class="ds-cols --middle --no-wrap --gap-xxsmall">
              <span class="ds-text --no-wrap --xsmall --success --icon-active-online">Active</span>
              <span class="ds-tag --small --success">
                <span>ONLINE</span>
              </span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </label>
</div>

Panel style with ds-cols content

html
Copy 
<label class="ds-checkbox --panel">
  <input type="checkbox" />
  <div class="ds-cols --6">
    <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>
  </div>
</label>
<label class="ds-checkbox --panel">
  <input type="checkbox" />
  <div class="ds-cols --6">
    <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>
  </div>
</label>