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.

✅ 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)

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>

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>

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>

import { DapDSContentSwitcher } from 'dap-design-system'

import { DapDSContentSwitcherReact } from 'dap-design-system/react'

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSContentSwitcher } from 'dap-design-system/components'

You can style CSS parts using the ::part() pseudo-element selector:

/* Target a specific part */
.my-custom-dap-ds-content-switcher::part(base) {
  /* Your custom styles */
}

Example usage:

<dap-ds-content-switcher class="my-custom-dap-ds-content-switcher">
  Content switcher
</dap-ds-content-switcher>

.my-custom-dap-ds-content-switcher::part(base) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:

Method 1: Inline styles (Quick customization)

<dap-ds-content-switcher
  style="--dds-content-switcher-min-width: value; --dds-content-switcher-padding: value;">
  Content switcher
</dap-ds-content-switcher>

Method 2: CSS classes (Reusable styles)

.my-custom-dap-ds-content-switcher {
  --dds-content-switcher-min-width: value;
  --dds-content-switcher-padding: value;
  --dds-content-switcher-border-width: value;
}

<dap-ds-content-switcher class="my-custom-dap-ds-content-switcher">
  Content switcher
</dap-ds-content-switcher>

Method 3: Global theme customization

/* Apply to all instances */
dap-ds-content-switcher {
  --dds-content-switcher-min-width: value;
  --dds-content-switcher-padding: value;
}

No custom events available.