Skip to content

Add sync property documentation to Tabs component #3100

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
dino475 merged 1 commit into from
Feb 3, 2026
Merged

Add sync property documentation to Tabs component #3100

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 5 additions & 1 deletion components/tabs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,14 @@ 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.
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}`.
Copy link
Collaborator

@ethanpalm ethanpalm Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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 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 tab synchronization for individual tabs with the `sync={false}` property.


## Properties

<ResponseField name="sync" type="boolean" default="true">
Copy link
Collaborator

@ethanpalm ethanpalm Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should move this lower. Will push a commit

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>

<ResponseField name="title" type="string" required>
The title of the tab. Short titles are easier to navigate. Tabs with matching titles synchronize their selections.
</ResponseField>
Expand Down