activation | TabsActivation | — | Whether focus selects the tab. Defaults to {@link TabsActivation.Automatic}.
Panel mode only. Links are not a roving tab stop; Tab moves between them. |
aria-description | LocalizedMessage | — | Extended description for assistive tech. |
aria-label | LocalizedMessage | — | Accessible name when the visible label is insufficient. |
aria-placeholder | LocalizedMessage | — | Hint for an empty control. |
children | ReactNode | — | Tabs, tab lists and panels.
Link mode renders items, not children. |
className | string | — | Optional module class from colocated CSS. |
currentPath | string | "" | Link mode only.
Current pathname that decides which tab is current. Pass the app route; with the default "" no tab is current. |
defaultValue | DisplayValue | — | Initially selected tab value when uncontrolled. When omitted, no tab is selected until the user picks one.
Panel mode only. |
items | readonly TabsLinkItem[] | — | Link tabs. Passing items selects link mode, which cannot take panel children.
The link tabs, in order. Passing items selects link mode: the root renders a nav landmark of links, the
current route's tab gets aria-current="page", and there are no panels. Every item is a link, so link and panel
tabs cannot be mixed in one instance. |
label | LocalizedMessage | — | Link mode only. Name a panel tab list with the label of {@link TabsList }.
Accessible name of the nav landmark.
Use label or aria-labelledby, not both. |
landmark | boolean | true | Link mode only.
When false, the nav renders with role="none" and no aria-label, aria-labelledby, aria-describedby,
aria-details or aria-roledescription, so it adds no landmark. Use inside another named nav, such as a navbar. |
loop | boolean | — | Whether arrow keys wrap at the ends. Defaults to true.
Panel mode only. |
matchPath | MatchPathFn | — | Link mode only.
Route matcher, for example react-router matchPath. Defaults to pathname equality, or a segment prefix match when a matcher sets exact: false. |
navigate | ((path: string) => void) | — | Link mode only.
Called with a tab's href on an unmodified primary click so a client router can handle it without a document
load. The component calls preventDefault() itself, including for the already-current tab. Without navigate
the click is left to the {@link LinkProvider } adapter or the browser. |
onValueChange | ((value: DisplayValue, details: ChangeDetails<ChangeReason>) => void) | — | Called when the selected tab changes. details.reason is {@link ChangeReason.ListNavigation } for arrow keys,
Home and End in automatic activation, and {@link ChangeReason.ItemPress } for pointer, Enter and Space.
Call details.cancel() to keep the current tab.
Panel mode only. A link tab reports a route through navigate. |
orientation | TabsOrientation | — | Layout and arrow-key axis. Defaults to {@link TabsOrientation.Horizontal}.
Panel mode only. Link tabs are always horizontal. |
panels | boolean | — | When true (default), each {@link TabsTrigger } sets aria-controls to its panel id. Set to false for a
panel-less tab menu (ui-core TabMenu): omit {@link TabsContent } and pass panels={false} so triggers do not
reference missing elements.
Panel mode only. |
ref | ((instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLDivElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null | — | Ref to the root element.
Ref to the nav element. |
showUnderline | boolean | — | Link mode only. Set it on {@link TabsList }.
Draws the baseline under the whole list. The current tab keeps its underline. Defaults to true. |
size | TabsSize | — | Link mode only. Set the size on {@link TabsList }.
Tab height and inline padding. Defaults to {@link TabsSize.Medium}. |
slidingAnimation | boolean | — | Link mode only. Set it on {@link TabsList }.
One shared underline slides between tabs. Pass false to opt out and draw a static per-tab underline. Defaults to true. |
title | LocalizedMessage | — | Native tooltip; accessibility hint, not visible UI title text. |
value | DisplayValue | — | Selected tab value when controlled.
Panel mode only. Link tabs have no selected value; the current route selects. |