Skip to content

Add tab sync example #3103

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ethanpalm merged 2 commits into from
Feb 4, 2026
Merged

Add tab sync example #3103

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
96a3ebf
add example of disabled synchronization tabs
ethanpalm Feb 4, 2026
68cd421
copy edit
ethanpalm Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 18 additions & 5 deletions components/tabs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,13 +54,22 @@ Use tabs to organize content into multiple panels that users can switch between.
</Tabs>
````

Tabs automatically synchronize with other tabs and [code groups](/components/code-groups) on the same page when their labels match. When you select a tab, all other tabs and code groups with the same label update to match your selection. You can disable this behavior by setting `sync={false}`.
Tabs with matching titles stay in sync across the page. For example, if you have multiple tab groups that include a `JavaScript` tab title, selecting `JavaScript` in one tab group automatically selects `JavaScript` in the others. This helps users who choose a language or framework once see that choice reflected everywhere. Tabs also sync with [code groups](/components/code-groups) that have matching titles.

## Properties
To disable tab synchronization, add `sync={false}` to a `<Tabs>` component.

<ResponseField name="sync" type="boolean" default="true">
When `true`, tabs synchronize with other tabs and code groups on the page that have matching labels. Set to `false` to make tabs independent.
</ResponseField>
```mdx Disable tab sync example
<Tabs sync={false}>
<Tab title="First tab">
This tab group operates independently.
</Tab>
<Tab title="Second tab">
Selecting tabs here won't affect other tab groups.
</Tab>
</Tabs>
```

## Properties

<ResponseField name="title" type="string" required>
The title of the tab. Short titles are easier to navigate. Tabs with matching titles synchronize their selections.
Expand All @@ -74,6 +83,10 @@ Tabs automatically synchronize with other tabs and [code groups](/components/cod
For Font Awesome icons only: One of `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>

<ResponseField name="sync" type="boolean" default="true">
When `true`, tabs synchronize with other tabs and code groups on the page that have matching titles. Set to `false` to make tabs independent.
</ResponseField>

<ResponseField name="borderBottom" type="boolean">
Adds a bottom border and padding to the tabs container. Useful to visually separate tabbed content from the rest of the page, especially when tabs contain content of varying lengths.
</ResponseField>