Content switcher Overview

The content switcher component allows users to toggle between two or more content sections within the same space. It provides a segmented control interface that functions as either a radio group (single selection) or checkbox group (multiple selections). The component is fully accessible with keyboard navigation, form integration, and comprehensive validation support.

When to Use

✅ Use content switchers when:

  • Switching between different views of the same content (e.g., list/grid views)
  • Toggling between related content sections (e.g., tabs, panels)
  • Filtering content with mutually exclusive options
  • Creating navigation between related pages or sections
  • Building multi-step forms with section selection

❌ Don't use content switchers for:

  • Binary on/off toggles (use switch components)
  • Single option selection from many choices (use radio buttons)
  • Multiple selections from many options (use checkboxes)
  • Primary navigation between unrelated pages
  • Actions that trigger immediate changes (use buttons)
Design system docs Examples Basic Usage

The default content switcher acts as a radio group where only one option can be selected at a time:

<dap-ds-content-switcher label="View options">
<dap-ds-content-switcher-item value="list">List View</dap-ds-content-switcher-item>
<dap-ds-content-switcher-item value="grid">Grid View</dap-ds-content-switcher-item>
<dap-ds-content-switcher-item value="table">Table View</dap-ds-content-switcher-item>
</dap-ds-content-switcher>
Pre-selected Value

Set a default selection using the value attribute:

<dap-ds-content-switcher value="grid" label="Display mode">
<dap-ds-content-switcher-item value="list">List</dap-ds-content-switcher-item>
<dap-ds-content-switcher-item value="grid">Grid</dap-ds-content-switcher-item>
<dap-ds-content-switcher-item value="table">Table</dap-ds-content-switcher-item>
</dap-ds-content-switcher>
Multiple Selection

Enable multiple selections by setting the multiSelect attribute. The value should be a comma-separated list:

<dap-ds-content-switcher multiSelect value="email,sms" label="Notification preferences">
<dap-ds-content-switcher-item value="email">Email</dap-ds-content-switcher-item>
<dap-ds-content-switcher-item value="sms">SMS</dap-ds-content-switcher-item>
<dap-ds-content-switcher-item value="push">Push</dap-ds-content-switcher-item>
<dap-ds-content-switcher-item value="inapp">In-App</dap-ds-content-switcher-item>
</dap-ds-content-switcher>
Importing 
import { DapDSContentSwitcher } from 'dap-design-system/dist/dds'
Importing React 
import { DapDSContentSwitcherReact } from 'dap-design-system/dist/react'
Attributes
PropertyTypeDefaultDescription
multiSelectbooleanfalseWhether the content switcher allows multiple selections.
valuestringThe value of the content switcher. A comma-separated list if multiSelect is true.
Slots
NameDescription
(default)The content switcher items.
Events
Event NameDescriptionType
dds-changeFired when the content switcher is changed.{value: string, selected: boolean }
CSS Parts
Part NameDescription
baseThe main content switcher container.
CSS Custom Properties
Property NameDescription
--dds-content-switcher-min-widthThe minimum width of the content switcher (default: var(--dds-spacing-4000, 160px))
--dds-content-switcher-paddingThe padding of the content switcher (default: var(--dds-spacing-100, 4px))
--dds-content-switcher-border-widthThe border width of the content switcher (default: var(--dds-border-width-base))
--dds-content-switcher-border-colorThe border color of the content switcher (default: var(--dds-border-neutral-transparent))
--dds-content-switcher-border-radiusThe border radius of the content switcher (default: var(--dds-radius-rounded, 1000px))
--dds-content-switcher-backgroundThe background color of the content switcher (default: var(--dds-transparent-black-subtle, rgb(0 0 0 / 5%)))
--dds-content-switcher-gapThe gap between content switcher items (default: var(--dds-spacing-100, 4px))
Components Content switcher item <dap-ds-content-switcher-item/> Attributes
PropertyTypeDefaultDescription
valuestringThe value of the segmented control item.
checkedbooleanfalseThe checked state of the segmented control item.
disabledbooleanfalseThe disabled state of the segmented control item.
namestringThe name of the segmented control item.
Slots
NameDescription
iconcontentThe icon content of the segmented control item.
Events

No custom events available.

CSS Parts
Part NameDescription
inputThe input of the segmented control item.
CSS Custom Properties
Property NameDescription
--dds-content-switcher-item-heightThe height of the content switcher item (default: var(--dds-spacing-800, 32px))
--dds-content-switcher-item-paddingThe padding of the content switcher item (default: var(--dds-spacing-200, 8px) var(--dds-spacing-400, 16px))
--dds-content-switcher-item-font-sizeThe font size of the content switcher item (default: var(--dds-size-sm, 14px))
--dds-content-switcher-item-font-weightThe font weight of the content switcher item (default: var(--dds-weight-bold, 700))
--dds-content-switcher-item-border-radiusThe border radius of the content switcher item (default: var(--dds-radius-large, 16px))
--dds-content-switcher-item-backgroundThe background color of the content switcher item (default: transparent)
--dds-content-switcher-item-colorThe text color of the content switcher item (default: var(--dds-text-neutral-base))
--dds-content-switcher-item-border-colorThe border color of the content switcher item (default: transparent)
--dds-content-switcher-item-checked-backgroundThe background color of the checked content switcher item (default: var(--dds-button-primary-background-enabled))
--dds-content-switcher-item-checked-colorThe text color of the checked content switcher item (default: var(--dds-text-neutral-on-inverted))
--dds-content-switcher-item-checked-border-colorThe border color of the checked content switcher item (default: var(--dds-border-neutral-transparent-interactive))