Tabs
Views of the same subject shown one at a time, with a row or column of tabs to switch.
Tabs show one of several views of the same subject: the overview, the participants and the
documents of a scheme. The reader switches without leaving the page. Use them for parallel content;
for steps in a sequence, use a stepper, and for pages with their own address, links. The composed
Responsive turns tabs into a select on a narrow screen.
// apps/docs/examples/ui/tabs.tsx'use client';
import { Tabs, TabsContent, TabsList, TabsTrigger,} from '@workspace/active-ui/components/primitives/tabs';
const PANELS = [ [ 'overview', 'Overview', 'The scheme has 214 participants and runs since 2019.', ], [ 'participants', 'Participants', '198 active, 12 deferred and 4 retired members.', ], [ 'documents', 'Documents', 'Regulations, the last statement and two notices.', ],] as const;
/** * Views of the same subject, one at a time: the default and the `line` * variant, and a vertical list. The arrow keys move between the tabs, and * Enter or Space shows the panel of the focused tab. */export default function TabsExample() { return ( <div className="grid w-full max-w-lg gap-10"> <Tabs defaultValue="overview"> <TabsList aria-label="Scheme"> {PANELS.map(([value, label]) => ( <TabsTrigger key={value} value={value}> {label} </TabsTrigger> ))} </TabsList> {PANELS.map(([value, , text]) => ( <TabsContent key={value} value={value} className="pt-3"> {text} </TabsContent> ))} </Tabs>
<Tabs defaultValue="participants"> <TabsList variant="line" aria-label="Scheme, line tabs"> {PANELS.map(([value, label]) => ( <TabsTrigger key={value} value={value}> {label} </TabsTrigger> ))} </TabsList> {PANELS.map(([value, , text]) => ( <TabsContent key={value} value={value} className="pt-3"> {text} </TabsContent> ))} </Tabs>
<Tabs defaultValue="documents" orientation="vertical"> <TabsList aria-label="Scheme, vertical tabs"> {PANELS.map(([value, label]) => ( <TabsTrigger key={value} value={value}> {label} </TabsTrigger> ))} </TabsList> {PANELS.map(([value, , text]) => ( <TabsContent key={value} value={value} className="ps-3"> {text} </TabsContent> ))} </Tabs> </div> );}Usage#
import { Tabs, TabsContent, TabsList, TabsTrigger,} from '@workspace/active-ui/components/primitives/tabs';
<Tabs defaultValue="overview"> <TabsList aria-label="Scheme"> <TabsTrigger value="overview">Overview</TabsTrigger> <TabsTrigger value="documents">Documents</TabsTrigger> </TabsList> <TabsContent value="overview">…</TabsContent> <TabsContent value="documents">…</TabsContent></Tabs>;Anatomy#
Tabs: the value;valueandon(controlled) orValue Change default.Value orientationhorizontal(default) orvertical.Tabs: the tabs.List variant:default(a filled track with the current tab raised) orline(a line under the current tab, for tabs in a page header).activatemakes the panel follow the focus as the arrow keys move; by default the arrow keys only move the focus.On Focus Tabs: one tab, by itsTrigger value;disabledskips it.Tabs: the panel of aContent value. Only the current panel is rendered, unlesskeep.Mounted tabs: the classes of a list, for an element of your own.List Variants({variant})
What your application provides#
A name for the list (
aria-), the labels of the tabs and the panels.label The value when it must survive a reload or be linked to: keep it in the URL, or use the composed
Search.Param Tabs
Accessibility and keyboard#
The list is one tab stop:
←and→(or↑and↓when vertical) move the focus between the tabs,HomeandEndto the first and last, andEnterorSpaceshows the focused tab's panel (at once withactivate).On Focus Tabthen moves into the panel.The list is a
role="tablist", each tab atabwitharia-, each panel aselected tabpanellabelled by its tab.
API#
TabsList#
Import from @workspace/
Props marked Base UI are behaviour of the Base UI part this component is built on.
Props
- Type
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.
- Type
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.
- Type
"default""line"null- Default
'default'
default is a filled track with the current tab raised; line a line under the current tab.
- Type
ComponentRender Fn<…> ReactElement<…>
Allows you to replace the component's HTML element with a different tag, or compose it with another component.
Accepts a React or a function that returns the element to render.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
Other parts#
Tabs
All props come from the Base UI part this component is built on.
Props
- Type
any
The value of the currently active Tab. Use when the component is controlled. When the value is null, no Tab will be active.
- Type
any- Default
0
The default value. Use when the component is not controlled. When the value is null, no Tab will be active.
- Type
Orientation- Default
'horizontal'
The component orientation (layout flow direction).
- Type
ComponentRender Fn<…> ReactElement<…>
Allows you to replace the component's HTML element with a different tag, or compose it with another component.
Accepts a React or a function that returns the element to render.
Events
Called by the component when something happens.
- Type
(value, eventDetails) => 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 default 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 default 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 event for 'initial', 'disabled', or 'missing' has no effect.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
TabsTrigger
All props come from the Base UI part this component is built on.
Props
- Type
any
The value of the Tab.
- Type
boolean
Whether the Tab is disabled.
If a first Tab on a <Tabs. 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 default or value on <Tabs. is set to an enabled Tab's value.
- Type
ComponentRender Fn<…> ReactElement<…>
Allows you to replace the component's HTML element with a different tag, or compose it with another component.
Accepts a React or a function that returns the element to render.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
TabsContent
All props come from the Base UI part this component is built on.
Props
- Type
any
The value of the TabPanel. It will be shown when the Tab with the corresponding value is active.
- Type
boolean- Default
false
Whether to keep the HTML element in the DOM while the panel is hidden.
- Type
ComponentRender Fn<…> ReactElement<…>
Allows you to replace the component's HTML element with a different tag, or compose it with another component.
Accepts a React or a function that returns the element to render.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
Functions, hooks and constants
(props?: (ConfigVariants<{ variant: { default: string; line: string; }; }> & ClassProp) | undefined) => stringThis page adapts the Tabs documentation of shadcn/ui (MIT licence) to this package; see Third-party notices.