- Home
- Design system
- Elements
- Checkbox
Checkbox
Options
Basic usage
<label class="ds-checkbox">
<input type="checkbox" />
<div>Checkbox label 1</div>
</label>
Rich content
Using with ds-rows
<label class="ds-checkbox">
<input type="checkbox" id="checkbox-rows" />
<div class="ds-rows">
<p class="ds-text --label">Aenean lacinia bibendum</p>
<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>
Using with ds-cols
<label class="ds-checkbox">
<input type="checkbox" id="checkbox-cols" />
<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>
Icons
Add an additional class such as --icon-online
from the available icon modifier list.
<label class="ds-checkbox --icon-plus">
<input type="checkbox" />
<div>Checkbox label 1</div>
</label>
Size
Small, medium, large
<!-- Default -->
<label class="ds-checkbox">
<input type="checkbox" />
<div>Checkbox label 1</div>
</label>
<!-- Small -->
<label class="ds-checkbox --small">
<input type="checkbox" />
<div>Checkbox label 1</div>
</label>
<!-- Medium -->
<label class="ds-checkbox --medium">
<input type="checkbox" />
<div>Checkbox label 1</div>
</label>
<!-- Large -->
<label class="ds-checkbox --large">
<input type="checkbox" />
<div>Checkbox label 1</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.
<label class="ds-checkbox --hide-label --bottom-right">
<input type="checkbox" />
<div>Checkbox label 1</div>
</label>
Styles
Round
<label class="ds-checkbox --round">
<input type="checkbox" />
<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>
Panel 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>
Panel 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>
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>
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 --6">
<label class="ds-checkbox --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-checkbox --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>
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>
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>