Soracom

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

Radio

Options

Basic usage

The example below uses 2 radio components

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

The example below uses 2 radio components

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

The example below uses 2 radio components

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

The example below uses 2 radio components

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

The example below uses 2 radio components

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

Example inside ds-cols. The example below uses 2 radio components

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

Longer mixed content example. The example below uses 2 radio components

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

The example below uses 2 radio components

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