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
<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
<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
<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.
<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.
<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><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.
<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.
<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>