Options
Basic usage
<label class="ds-radio">
<input type="radio" name="radio-basic">
<div>Radio label 1</div>
</label>
<label class="ds-radio">
<input type="radio" name="radio-basic">
<div>Radio 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.
<div class="ds-radio">
<input type="radio" name="radio-div" id="radio-div-1">
<label for="radio-div-1">Radio label 1</label>
</div>
<div class="ds-radio">
<input type="radio" name="radio-div" id="radio-div-2">
<label for="radio-div-2">Radio label 2</label>
</div>Styles
Custom styles exist for specific use cases.
Dots
<label class="ds-radio --dots">
<input type="radio" name="radio-dots">
<div>A</div>
</label>
<label class="ds-radio --dots">
<input type="radio" name="radio-dots">
<div>B</div>
</label>Panels
By default, multiple .ds-radio --panel components adjacent to each other will display stacked as the shown below.
Panel style for simple content
<label class="ds-radio --panel">
<input type="radio" name="radio-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-radio --panel">
<input type="radio" name="radio-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>Panel style for rich content
<div class="ds-radio --panel">
<label>
<input type="radio" name="radio-panel">
<span class="--label">Label text</span>
</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>
</div>
<div class="ds-radio --panel">
<label>
<input type="radio" name="radio-panel">
<span>Label text</span>
</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>
</div>To have a horizontal set of panels, place them inside a .ds-cols container.
<div class="ds-cols">
<label class="ds-span --6 ds-radio --panel">
<input type="radio" name="radio-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-span --6 ds-radio --panel">
<input type="radio" name="radio-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>
</div><label class="ds-radio --panel">
<input type="radio" name="radio-panel-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>
<label class="ds-radio --panel">
<input type="radio" name="radio-panel-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>Swatches
<label class="ds-radio --swatch">
<input type="radio" name="radio-swatch">
<div>A</div>
</label>
<label class="ds-radio --swatch --color-red-lighter">
<input type="radio" name="radio-swatch">
<div>B</div>
</label>
<label class="ds-radio --swatch --color-orange">
<input type="radio" name="radio-swatch">
<div>C</div>
</label>
<label class="ds-radio --swatch" style="--ds-radio-color: #d734ab;">
<input type="radio" name="radio-swatch">
<div>D</div>
</label>
<label class="ds-radio --swatch" style="--ds-radio-color: transparent;">
<input type="radio" name="radio-swatch">
<div>E</div>
</label>Tags
This option is available using ds-tags which has additional features.