Skip to content
MENU

Soracom

Design System

Tabs

Displays a tab bar style list of menu items and contents

ds-tabs works inside ds-group containers, and adjusts appropriately if it is the first-child of the group (with no group title), follows a group title, or inline with mixed content

Options 

Basic usage 

ds-tabs can be implemented as pure decoration by using the following format. When used like this, any interactive highlighting of the current selected tab, or switching of the tab contents needs to be implemented by another means (i.e. javascript).

Using this method, the currently selected tab can be highlighted by adding ds-tabs__tab--selected to the list item.

When used in this format, the contents of the <li> can be any element such as a <span>, <div>, <p> or <a>.
Basic non-interactive usage
<ul class="ds-tabs">  
  <li>
    <span>Label One</span>
  </li>
  <li class="ds-tabs__tab--selected">
    <span>Label Two</span>
  </li>
  <li>
    <span>Label Three</span>
  </li>
</ul>
  • Label One
  • Label Two
  • Label Three
<ul class="ds-tabs">  
  <li>
    <span>Label One</span>
  </li>
  <li class="ds-tabs__tab--selected">
    <span>Label Two</span>
  </li>
  <li>
    <span>Label Three</span>
  </li>
</ul>

Interactive tabs 

Using the following html structure, ds-tabs will also handle the interactive highlighting of the current selected tab and switching of the tab content.

Each input on a page requires a unique id with the same value used in the matching <label for=""> element.
All inputs within a ds-tabs must use the same name element unique to that ds-tabs instance.
Each tab requires a matching radio input, and the order of the inputs must match the order of the li elements.
SDS currently supports a maximum of 10 tabs

Content for each tab is contained inside an html element with the classname ds-tabs__content--X where X is 1 to 10. This container does not assume a specific layout type for it’s contents, so adding ds-rows may be required.

Example with simple content
<div class="ds-tabs">
  <input id="tab-a1" type="radio" name="tabs-a" checked="checked"/>
  <input id="tab-a2" type="radio" name="tabs-a"/>
  <input id="tab-a3" type="radio" name="tabs-a"/>
  <ul>
    <li>
      <label for="tab-a1">Label 1</label>
    </li>
    <li>
      <label for="tab-a2">Label 2</label>
    </li>
    <li>
      <label for="tab-a3">Label 3</label>
    </li>
  </ul>  
  <div class="ds-tabs__content--1">
    <p class="ds-text">Text content 1</p>
  </div>
  <div class="ds-tabs__content--2">
    <p class="ds-text">Text content 2</p>
  </div>
  <div class="ds-tabs__content--3">
    <p class="ds-text">Text content 3</p>
  </div>
</div>

Text content 1

Text content 2

Text content 3

<div class="ds-tabs">
  <input id="tab-a1" type="radio" name="tabs-a" checked="checked"/>
  <input id="tab-a2" type="radio" name="tabs-a"/>
  <input id="tab-a3" type="radio" name="tabs-a"/>
  <ul>
    <li>
      <label for="tab-a1">Label 1</label>
    </li>
    <li>
      <label for="tab-a2">Label 2</label>
    </li>
    <li>
      <label for="tab-a3">Label 3</label>
    </li>
  </ul>  
  <div class="ds-tabs__content--1">
    <p class="ds-text">Text content 1</p>
  </div>
  <div class="ds-tabs__content--2">
    <p class="ds-text">Text content 2</p>
  </div>
  <div class="ds-tabs__content--3">
    <p class="ds-text">Text content 3</p>
  </div>
</div>
Example with mixed content
<div class="ds-tabs">
  <input id="tab-b1" type="radio" name="tabs-b" checked="checked"/>
  <input id="tab-b2" type="radio" name="tabs-b"/>
  <input id="tab-b3" type="radio" name="tabs-b"/>
  <ul>
    <li>
      <label for="tab-b1">Label 1</label>
    </li>
    <li>
      <label for="tab-b2">Label 2</label>
    </li>
    <li>
      <label for="tab-b3">Label 3</label>
    </li>
  </ul>  
  <div class="ds-tabs__content--1">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. 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. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="ds-tabs__content--2 ds-rows">
    <div class="ds-notice">Notice text</div>
    <div class="ds-field">
      <input type="text" id="test-field-b" name="test-field-b" class="ds-text-input"/>
      <div class="ds-text--addon-light">Text</div>
    </div>
  </div>
  <div class="ds-tabs__content--3">
    <p class="ds-text">Text content 3</p>
  </div>
</div>

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. 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. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Notice text
Text

Text content 3

<div class="ds-tabs">
  <input id="tab-b1" type="radio" name="tabs-b" checked="checked"/>
  <input id="tab-b2" type="radio" name="tabs-b"/>
  <input id="tab-b3" type="radio" name="tabs-b"/>
  <ul>
    <li>
      <label for="tab-b1">Label 1</label>
    </li>
    <li>
      <label for="tab-b2">Label 2</label>
    </li>
    <li>
      <label for="tab-b3">Label 3</label>
    </li>
  </ul>  
  <div class="ds-tabs__content--1">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. 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. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="ds-tabs__content--2 ds-rows">
    <div class="ds-notice">Notice text</div>
    <div class="ds-field">
      <input type="text" id="test-field-b" name="test-field-b" class="ds-text-input"/>
      <div class="ds-text--addon-light">Text</div>
    </div>
  </div>
  <div class="ds-tabs__content--3">
    <p class="ds-text">Text content 3</p>
  </div>
</div>

Disabled tabs 

A non-interactive tab can be disabled by setting the tab to ds-tabs__tab--disabled.

Basic non-interactive usage
<ul class="ds-tabs--selected">  
  <li>
    <span>Label One</span>
  </li>
  <li class="ds-tabs__tab--disabled">
    <span>Label Two</span>
  </li>
  <li>
    <span>Label Three</span>
  </li>
</ul>
  • Label One
  • Label Two
  • Label Three
<ul class="ds-tabs--selected">  
  <li>
    <span>Label One</span>
  </li>
  <li class="ds-tabs__tab--disabled">
    <span>Label Two</span>
  </li>
  <li>
    <span>Label Three</span>
  </li>
</ul>

An interactive tab can be disabled by setting the radio input to disabled.

Example with simple content
<div class="ds-tabs">
  <input id="tab-c1" type="radio" name="tabs-c" checked="checked"/>
  <input id="tab-c2" type="radio" name="tabs-c" disabled/>
  <input id="tab-c3" type="radio" name="tabs-c"/>
  <ul>
    <li>
      <label for="tab-c1">Label 1</label>
    </li>
    <li>
      <label for="tab-c2">Label 2</label>
    </li>
    <li>
      <label for="tab-c3">Label 3</label>
    </li>
  </ul>  
  <div class="ds-tabs__content--1">
    <p class="ds-text">Text content 1</p>
  </div>
  <div class="ds-tabs__content--2">
    <p class="ds-text">Text content 2</p>
  </div>
  <div class="ds-tabs__content--3">
    <p class="ds-text">Text content 3</p>
  </div>
</div>

Text content 1

Text content 2

Text content 3

<div class="ds-tabs">
  <input id="tab-c1" type="radio" name="tabs-c" checked="checked"/>
  <input id="tab-c2" type="radio" name="tabs-c" disabled/>
  <input id="tab-c3" type="radio" name="tabs-c"/>
  <ul>
    <li>
      <label for="tab-c1">Label 1</label>
    </li>
    <li>
      <label for="tab-c2">Label 2</label>
    </li>
    <li>
      <label for="tab-c3">Label 3</label>
    </li>
  </ul>  
  <div class="ds-tabs__content--1">
    <p class="ds-text">Text content 1</p>
  </div>
  <div class="ds-tabs__content--2">
    <p class="ds-text">Text content 2</p>
  </div>
  <div class="ds-tabs__content--3">
    <p class="ds-text">Text content 3</p>
  </div>
</div>

Inside group 

ds-tabs can be implemented inside a ds-group container:

Basic non-interactive usage inside a group
<div class="ds-group">
  <div class="ds-group__title">Title</div>
  <ul class="ds-tabs">
    <li><span>Label One</span></li>
    <li class="ds-tabs__tab--selected"><span>Label Two</span></li>
    <li><span>Label Three</span></li>
  </ul>
  <p class="test-ui__placeholder">Content</p>
</div>
Title
  • Label One
  • Label Two
  • Label Three

Content

<div class="ds-group">
  <div class="ds-group__title">Title</div>
  <ul class="ds-tabs">
    <li><span>Label One</span></li>
    <li class="ds-tabs__tab--selected"><span>Label Two</span></li>
    <li><span>Label Three</span></li>
  </ul>
  <p class="test-ui__placeholder">Content</p>
</div>
Interactive tabs example with mixed content
<div class="ds-group">
  <div class="ds-group__title">Title</div>
  <div class="ds-tabs">
    <input id="tab-d1" type="radio" name="tabs-d" checked="checked"/>
    <input id="tab-d2" type="radio" name="tabs-d"/>
    <input id="tab-d3" type="radio" name="tabs-d"/>
    <ul>
      <li>
        <label for="tab-d1" class="ds-text--icon-basic-user">Label 1</label>
      </li>
      <li>
        <label for="tab-d2" class="ds-text--icon-coverage">Label 2</label>
      </li>
      <li>
        <label for="tab-d3" class="ds-text--icon-settings">Label 3</label>
      </li>
    </ul>
    <div class="ds-tabs__content--1">
      <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. 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. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="ds-tabs__content--2 ds-rows">
      <div class="ds-notice">Notice text</div>
      <div class="ds-field">
        <input type="text" id="test-field-c" name="test-field-c" class="ds-text-input"/>
        <div class="ds-text--addon-light">Text</div>
      </div>
    </div>
    <div class="ds-tabs__content--3">
      <p class="ds-text">Text content 3</p>
    </div>
  </div>
  <div class="ds-notice--warning">Notice text</div>
</div>
Title

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. 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. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Notice text
Text

Text content 3

Notice text
<div class="ds-group">
  <div class="ds-group__title">Title</div>
  <div class="ds-tabs">
    <input id="tab-d1" type="radio" name="tabs-d" checked="checked"/>
    <input id="tab-d2" type="radio" name="tabs-d"/>
    <input id="tab-d3" type="radio" name="tabs-d"/>
    <ul>
      <li>
        <label for="tab-d1" class="ds-text--icon-basic-user">Label 1</label>
      </li>
      <li>
        <label for="tab-d2" class="ds-text--icon-coverage">Label 2</label>
      </li>
      <li>
        <label for="tab-d3" class="ds-text--icon-settings">Label 3</label>
      </li>
    </ul>
    <div class="ds-tabs__content--1">
      <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. 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. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="ds-tabs__content--2 ds-rows">
      <div class="ds-notice">Notice text</div>
      <div class="ds-field">
        <input type="text" id="test-field-c" name="test-field-c" class="ds-text-input"/>
        <div class="ds-text--addon-light">Text</div>
      </div>
    </div>
    <div class="ds-tabs__content--3">
      <p class="ds-text">Text content 3</p>
    </div>
  </div>
  <div class="ds-notice--warning">Notice text</div>
</div>

Styles 

Custom styles exist for specific use cases.

Panel style 

Panel style provides additional styling to the container, plus does not by default indent the tab contents. Individual tab contents can be indented using the class ds-tabs__content--indented.

Example with mixed content
<div class="ds-tabs--panel">
  <input id="tab-e1" type="radio" name="tabs-3" checked="checked"/>
  <input id="tab-e2" type="radio" name="tabs-3"/>
  <input id="tab-e3" type="radio" name="tabs-3"/>
  <ul>
    <li>
      <label for="tab-e1">Label 1</label>
    </li>
    <li>
      <label for="tab-e2">Label 2</label>
    </li>
    <li>
      <label for="tab-e3">Label 3</label>
    </li>
  </ul>
  <div class="ds-tabs__content--1">
    <details class="ds-disclosure--simple" open>
      <summary>Title content</summary>
      Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. 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. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </details>
  </div>
  <div class="ds-tabs__content--2 ds-tabs__content--indented">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. 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. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="ds-tabs__content--3 ds-tabs__content--indented ds-rows">
    <div class="ds-notice">Notice text</div>
    <div class="ds-field">
      <input type="text" id="test-field-b" name="test-field-b" class="ds-text-input"/>
      <div class="ds-text--addon-light">Text</div>
    </div>
  </div>
</div>
Title content Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. 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. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. 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. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Notice text
Text
<div class="ds-tabs--panel">
  <input id="tab-e1" type="radio" name="tabs-3" checked="checked"/>
  <input id="tab-e2" type="radio" name="tabs-3"/>
  <input id="tab-e3" type="radio" name="tabs-3"/>
  <ul>
    <li>
      <label for="tab-e1">Label 1</label>
    </li>
    <li>
      <label for="tab-e2">Label 2</label>
    </li>
    <li>
      <label for="tab-e3">Label 3</label>
    </li>
  </ul>
  <div class="ds-tabs__content--1">
    <details class="ds-disclosure--simple" open>
      <summary>Title content</summary>
      Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. 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. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </details>
  </div>
  <div class="ds-tabs__content--2 ds-tabs__content--indented">
    <p class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. 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. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="ds-tabs__content--3 ds-tabs__content--indented ds-rows">
    <div class="ds-notice">Notice text</div>
    <div class="ds-field">
      <input type="text" id="test-field-b" name="test-field-b" class="ds-text-input"/>
      <div class="ds-text--addon-light">Text</div>
    </div>
  </div>
</div>