Tabs connects each tab to a panel using a shared value. Keep the values unique within a root.
Tab panels
Tabs.Tab accepts startIcon, badge, and a size of sm or md (default sm). The active indicator is included in Tabs.List.
Controlled state and manual activation
activateOnFocus={false}, arrow keys move focus and Enter or Space activates the focused tab. loopFocus defaults to true. Disabled tabs are skipped. Use orientation="vertical" on Root for vertical navigation.
Parts
Use
keepMounted on a panel when its contents must remain mounted while inactive. Give the list an accessible name that describes the set of panels.
Props
The reference is generated from the public component types. Native attributes, including accessible names and event handlers, are also accepted on parts that render elements.Tabs.Root
string | ((state: TabsRootState) => string | undefined)
CSS class applied to the element, or a function that
returns a class based on the component’s state.
any
default:"0"
The default value. Use when the component is not controlled.
When the value is
null, no Tab will be active.((value: any, eventDetails: TabsRootChangeEventDetails) => void)
Callback invoked when new value is being set.The event
reason is 'none' for user-initiated changes, such as a click
or keyboard navigation; 'initial' for the first automatic selection or
fallback in uncontrolled roots when defaultValue is omitted or
undefined, including when the implicit initial value is disabled or
missing; 'disabled' for automatic fallback when the selected tab becomes
disabled in uncontrolled roots; or 'missing' for automatic fallback when
the selected tab is removed, or when an explicit defaultValue never
matches a mounted tab in uncontrolled roots.For automatic changes, the selected value can be null when no enabled Tab
is available as a fallback.Automatic changes cannot be canceled; calling eventDetails.cancel() for
'initial', 'disabled', or 'missing' has no effect."horizontal" | "vertical"
default:"horizontal"
The component orientation (layout flow direction).
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TabsRootState>
Allows you to replace the component’s HTML element
with a different tag, or compose it with another component.Accepts a
ReactElement or a function that returns the element to render.CSSProperties | ((state: TabsRootState) => CSSProperties | undefined)
Style applied to the element, or a function that
returns a style object based on the component’s state.
any
The value of the currently active
Tab. Use when the component is controlled.
When the value is null, no Tab will be active.Tabs.List
boolean
default:"false"
Whether to automatically change the active tab on arrow key focus.
Otherwise, tabs will be activated using <kbd>Enter</kbd> or <kbd>Space</kbd> key press.
string | ((state: TabsListState) => string | undefined)
CSS class applied to the element, or a function that
returns a class based on the component’s state.
boolean
default:"true"
Whether to loop keyboard focus back to the first item
when the end of the list is reached while using the arrow keys.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TabsListState>
Allows you to replace the component’s HTML element
with a different tag, or compose it with another component.Accepts a
ReactElement or a function that returns the element to render.CSSProperties | ((state: TabsListState) => CSSProperties | undefined)
Style applied to the element, or a function that
returns a style object based on the component’s state.
Tabs.Tab
ReactNode
Content rendered after the label, such as a count.
string | ((state: TabsTabState) => string | undefined)
CSS class applied to the element, or a function that
returns a class based on the component’s state.
boolean
Whether the Tab is disabled.If a first Tab on a
<Tabs.List> is disabled, it won’t initially be selected.
Instead, the next enabled Tab will be selected.
However, it does not work like this during server-side rendering, as it is not known
during pre-rendering which Tabs are disabled.
To work around it, ensure that defaultValue or value on <Tabs.Root> is set to an enabled Tab’s value.boolean
default:"true"
Whether the component renders a native
<button> element when replacing it
via the render prop.
Set to false if the rendered element is not a button (for example, <div>).ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TabsTabState>
Allows you to replace the component’s HTML element
with a different tag, or compose it with another component.Accepts a
ReactElement or a function that returns the element to render."sm" | "md"
default:"sm"
Visual size of the tab.
ReactNode
Icon rendered before the label.
CSSProperties | ((state: TabsTabState) => CSSProperties | undefined)
Style applied to the element, or a function that
returns a style object based on the component’s state.
any
required
The value of the Tab.
Tabs.Panel
string | ((state: TabsPanelState) => string | undefined)
CSS class applied to the element, or a function that
returns a class based on the component’s state.
boolean
default:"false"
Whether to keep the HTML element in the DOM while the panel is hidden.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, TabsPanelState>
Allows you to replace the component’s HTML element
with a different tag, or compose it with another component.Accepts a
ReactElement or a function that returns the element to render.CSSProperties | ((state: TabsPanelState) => CSSProperties | undefined)
Style applied to the element, or a function that
returns a style object based on the component’s state.
any
required
The value of the TabPanel. It will be shown when the Tab with the corresponding value is active.