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 --selected to the list item.

It is also possible to use this format without the role attributes, but this is not recommended as it will reduce accessibility and prevent some styling options.

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.

SDS currently supports a maximum of 16 interactive tabs. Content for each tab is contained inside an html element with role="tabpanel" and a counter __X where X is 1 to 16. This container does not assume a specific layout type for it’s contents, so adding ds-rows may be required.

Input placement at root

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

It is also possible to use this format without the role attributes, but this is not recommended as it will reduce accessibility and prevent some styling options. Content for each tab is contained inside an html element with the classname __content --X where X is 1 to 16. This container does not assume a specific layout type for it’s contents, so adding ds-rows may be required.

Input placement inside tab

• Each tab must contain a label element, which contains the input and label text
• All input elements must use the same name attribute unique to that ds-tabs instance.

Disabled tabs

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

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

Input placement at root

Input placement inside tab

Sizing

Tab bar

Tab wrapping

By default, tabs will wrap to a new row if they do not fit on a single row. To keep all tabs on a single row and allow the label text to wrap instead use --no-wrap. Note: At screen sizes less than 680px tabs will wrap to a new row if required.

Sticky tab bar

The tab bar can be made sticky by adding the class --sticky. The offset position can be controlled by setting an offset amount like --x where x is 0–180 in increments of 10, for example --60

Content panels

Content panel indent

By default all tab content is indented. You can change indenting on all tab content by using the following classes on the ds-tabs container:

Additionally, you can control indenting of individual content panels by using the following classes on the __content element. These classes will override the classes set on the parent ds-tabs container.

Content panel height

By default ds-tabs will be a fixed height equal to the height of the largest content panel. To allow the height to change based on the height of the currently visible panel, use --adjust-height.

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

Vertical style

Vertical style can be combined with other options above including panel style and use within groups.

Examples

Vertical style combined with Panel style

Vertical style within a group

Inside group

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

Vertical style interactive with inputs at root

Manifest

The component manifest describes this component's API — its modifiers, structure, data attributes, CSS custom properties, accessibility notes, and example markup. It is consumed by tooling such as AI assistants and code generators.

Latest version: https://assets.soracom.io/sds/latest/ds-tabs/index.mjs