Components / UI components / Navigation
Shared controlsExperimental alpha
Tabs
Switch between related views with a controlled selection.
Tabs preview
Three accounts are ready for owner review.
Interactions use local sample data.
Usage and props
Use for related views on the same page. Inactive content unmounts, so keep drafts and values that must survive switching in the parent component. Provide stable item IDs and descriptive labels. Tabs use automatic activation.
valuestring- The active item value.
onValueChange(value: string) => void- Update value when a different tab is selected.
items{ value: string; label: string; content: ReactNode }[]- Each item needs a unique value, a visible label and its panel content.
labelstring- The accessible name for this group of tabs.
These are the main props for the example. The package's TypeScript declarations include the full API.