Skip to main content

Tabs

The tabs component organizes content into separate views, allowing merchants to switch between related information without leaving the current page. Use tabs when you need to present multiple categories of content in a space-efficient manner.

Tabs consist of a tab list containing clickable tab buttons and corresponding tab panels that display the content. Only one panel is visible at a time, reducing cognitive load and keeping the interface clean.

Support
Targets (10)

Supported targets

Anchor to Tabs PropertiesTabs Properties

Configure the following properties on the tabs component.

Anchor to defaultValue
defaultValue
string

The default value of the selected tab.

This should match the id prop of one of the tab panel components. If not provided, the first tab will be selected by default.

Reflects to the value attribute

Anchor to disabled
disabled
boolean

Disables all tabs and prevents user interaction.

Anchor to value
value
string

The value of the selected tab.

This should match the id prop of one of the tab panel components. If not provided, the first tab will be selected by default.

Anchor to Tabs EventsTabs Events

The tabs component provides event callbacks for handling user interactions. Learn more about handling events.

Anchor to change
change
(event: <"s-tabs">) => void

Anchor to TabListTabList

The tab list component contains the tab buttons. It must be a direct child of the tabs component.

Anchor to children
children

Accepts only tabs components.

Anchor to TabTab

The tab component represents an individual tab button. It must be placed within a tab list and should use the controls property to associate it with a corresponding tab panel.

Anchor to controls
controls
string

Corresponds to the id property of the tab panel component that will be displayed when selected

Anchor to disabled
disabled
boolean
Default: false

Disables the control, disallowing any interaction.

Anchor to TabPanelTabPanel

The tab panel component contains the content for each tab. It must have an id that matches the controls property of the corresponding tab.

Anchor to id
id
string

The id of the tab panel used for identification in the tabs component. Must match the controls prop of the corresponding tab component.

Anchor to ExamplesExamples

Anchor to Create a tabbed interfaceCreate a tabbed interface

Organize content into tabs using the tabs component with tab list, tab, and tab panel components. This example shows a basic tabbed interface with two tabs.

Create a tabbed interface

Organize content into tabs using the tabs component with tab list, tab, and tab panel components. This example shows a basic tabbed interface with two tabs.

Create a tabbed interface

<s-tabs defaultValue="tab1">
<s-tab-list>
<s-tab controls="tab1">Tab 1</s-tab>
<s-tab controls="tab2">Tab 2</s-tab>
</s-tab-list>

<s-tab-panel id="tab1">
<s-text>Content for Tab 1</s-text>
</s-tab-panel>

<s-tab-panel id="tab2">
<s-text>Content for Tab 2</s-text>
</s-tab-panel>
</s-tabs>

Anchor to Handle tab change eventsHandle tab change events

Subscribe to the onChange event to respond when merchants select different tabs. This example shows how to handle tab changes and capture the selected tab value in real time, enabling dynamic behavior based on which tab is active.

Preview

Handle tab change events

<s-tabs
defaultValue="details"
onChange="(event) => console.log('Tab changed to:', event.currentTarget.value)"
>
<s-tab-list>
<s-tab controls="details">Details</s-tab>
<s-tab controls="history">History</s-tab>
<s-tab controls="notes">Notes</s-tab>
</s-tab-list>

<s-tab-panel id="details">
<s-text>Customer details and information</s-text>
</s-tab-panel>

<s-tab-panel id="history">
<s-text>Order and purchase history</s-text>
</s-tab-panel>

<s-tab-panel id="notes">
<s-text>Customer notes and comments</s-text>
</s-tab-panel>
</s-tabs>

Anchor to AccessibilityAccessibility

  • Provide accessibility labels: Use the accessibilityLabel prop on the tabs component to describe the purpose of the tab group.
  • Ensure keyboard navigation: The component supports arrow key navigation between tabs and Enter/Space to activate tabs.
  • Connect tabs and panels: Always use matching controls (on tab) and id (on tab panel) properties to maintain proper semantic relationships.
Was this page helpful?