Tabs
Tabs is a component that displays a list of tabs and allows the user to select one.
Update your personal information such as name, email address, and profile picture.
Manage your subscription plan, view invoices, and update your payment method.
Customize how the application looks and behaves to match your personal preferences.
basic-demo
Usage#
import { Tabs } from '@primereact/ui/tabs';<Tabs>
<Tabs.List>
<Tabs.Tab value="tab1">Tab 1</Tabs.Tab>
</Tabs.List>
<Tabs.Panels>
<Tabs.Panel value="tab1">Tab 1 Content</Tabs.Panel>
</Tabs.Panels>
</Tabs>Examples#
Dynamic#
Update your personal information such as name, email address, and profile picture.
Manage your subscription plan, view invoices, and update your payment method.
Customize how the application looks and behaves to match your personal preferences.
dynamic-demo
import { Tabs } from '@primereact/ui/tabs';
const tabs = [
{ id: 'tab1', title: 'Account Info', content: 'Update your personal information such as name, email address, and profile picture.' },
{ id: 'tab2', title: 'Payment', content: 'Manage your subscription plan, view invoices, and update your payment method.' },
{ id: 'tab3', title: 'Preferences', content: 'Customize how the application looks and behaves to match your personal preferences.' }
];
export default function DynamicDemo() {
return (
<div>
<Tabs.Root value="tab1">
<Tabs.List>
{tabs.map((tab) => (
<Tabs.Tab key={tab.id} value={tab.id}>
{tab.title}
</Tabs.Tab>
))}
<Tabs.Indicator />
</Tabs.List>
<Tabs.Panels>
{tabs.map((tab) => (
<Tabs.Panel key={tab.id} value={tab.id}>
<p>{tab.content}</p>
</Tabs.Panel>
))}
</Tabs.Panels>
</Tabs.Root>
</div>
);
}
Controlled#
Update your personal information such as name, email address, and profile picture.
Manage your subscription plan, view invoices, and update your payment method.
Customize how the application looks and behaves to match your personal preferences.
controlled-demo
'use client';
import { TabsProps, useTabsChangeEvent } from '@primereact/types/shared/tabs';
import { Button } from '@primereact/ui/button';
import { Tabs } from '@primereact/ui/tabs';
import * as React from 'react';
const tabs = [
{ id: 'tab1', title: 'Account Info', content: 'Update your personal information such as name, email address, and profile picture.' },
{ id: 'tab2', title: 'Payment', content: 'Manage your subscription plan, view invoices, and update your payment method.' },
{ id: 'tab3', title: 'Preferences', content: 'Customize how the application looks and behaves to match your personal preferences.' }
];
export default function ControlledDemo() {
const [activeTab, setActiveTab] = React.useState<TabsProps['value']>('tab1');
return (
<div className="space-y-4">
<Button onClick={() => setActiveTab('tab2')}>Go to Payment</Button>
<Tabs.Root value={activeTab} onValueChange={(e: useTabsChangeEvent) => setActiveTab(e.value)}>
<Tabs.List>
{tabs.map((tab) => (
<Tabs.Tab key={tab.id} value={tab.id}>
{tab.title}
</Tabs.Tab>
))}
<Tabs.Indicator />
</Tabs.List>
<Tabs.Panels>
{tabs.map((tab) => (
<Tabs.Panel key={tab.id} value={tab.id}>
<p>{tab.content}</p>
</Tabs.Panel>
))}
</Tabs.Panels>
</Tabs.Root>
</div>
);
}
Scrollable#
Tab 1 Content
Tab 2 Content
Tab 3 Content
Tab 4 Content
Tab 5 Content
Tab 6 Content
Tab 7 Content
Tab 8 Content
Tab 9 Content
Tab 10 Content
Tab 11 Content
Tab 12 Content
Tab 13 Content
Tab 14 Content
Tab 15 Content
Tab 16 Content
Tab 17 Content
Tab 18 Content
Tab 19 Content
Tab 20 Content
Tab 21 Content
Tab 22 Content
Tab 23 Content
Tab 24 Content
Tab 25 Content
Tab 26 Content
Tab 27 Content
Tab 28 Content
Tab 29 Content
Tab 30 Content
Tab 31 Content
Tab 32 Content
Tab 33 Content
Tab 34 Content
Tab 35 Content
Tab 36 Content
Tab 37 Content
Tab 38 Content
Tab 39 Content
Tab 40 Content
Tab 41 Content
Tab 42 Content
Tab 43 Content
Tab 44 Content
Tab 45 Content
Tab 46 Content
Tab 47 Content
Tab 48 Content
Tab 49 Content
Tab 50 Content
scrollable-demo
import { Tabs } from '@primereact/ui/tabs';
const scrollableTabs = Array.from({ length: 50 }, (_, i) => ({ title: `Tab ${i + 1}`, content: `Tab ${i + 1} Content`, value: `${i}` }));
export default function ScrollableDemo() {
return (
<div>
<Tabs.Root value="0" scrollable>
<Tabs.List>
{scrollableTabs.map((tab) => (
<Tabs.Tab key={tab.value} value={tab.value}>
{tab.title}
</Tabs.Tab>
))}
<Tabs.Indicator />
</Tabs.List>
<Tabs.Panels>
{scrollableTabs.map((tab) => (
<Tabs.Panel key={tab.value} value={tab.value}>
{tab.content}
</Tabs.Panel>
))}
</Tabs.Panels>
</Tabs.Root>
</div>
);
}
Disabled#
Update your personal information such as name, email address, and profile picture.
Manage your subscription plan, view invoices, and update your payment method.
Customize how the application looks and behaves to match your personal preferences.
disabled-demo
import { Tabs } from '@primereact/ui/tabs';
export default function DisabledDemo() {
return (
<div>
<Tabs.Root value="tab1">
<Tabs.List>
<Tabs.Tab value="tab1">Account Info</Tabs.Tab>
<Tabs.Tab value="tab2" disabled>
Payment
</Tabs.Tab>
<Tabs.Tab value="tab3">Preferences</Tabs.Tab>
<Tabs.Indicator />
</Tabs.List>
<Tabs.Panels>
<Tabs.Panel value="tab1">
<p>Update your personal information such as name, email address, and profile picture.</p>
</Tabs.Panel>
<Tabs.Panel value="tab2">
<p>Manage your subscription plan, view invoices, and update your payment method.</p>
</Tabs.Panel>
<Tabs.Panel value="tab3">
<p>Customize how the application looks and behaves to match your personal preferences.</p>
</Tabs.Panel>
</Tabs.Panels>
</Tabs.Root>
</div>
);
}
Custom Indicator#
Update your personal information such as name, email address, and profile picture.
Manage your subscription plan, view invoices, and update your payment method.
Customize how the application looks and behaves to match your personal preferences.
custom-indicator-demo
import { Tabs } from '@primereact/ui/tabs';
const tabs = [
{ id: 'tab1', title: 'Account Info', content: 'Update your personal information such as name, email address, and profile picture.' },
{ id: 'tab2', title: 'Payment', content: 'Manage your subscription plan, view invoices, and update your payment method.' },
{ id: 'tab3', title: 'Preferences', content: 'Customize how the application looks and behaves to match your personal preferences.' }
];
export default function CustomIndicatorDemo() {
return (
<div>
<Tabs.Root value="tab1">
<Tabs.List>
{tabs.map((tab) => (
<Tabs.Tab key={tab.id} value={tab.id} className="border-none z-10">
{tab.title}
</Tabs.Tab>
))}
<Tabs.Indicator className="w-[var(--width)] h-[calc(var(--height)-12px)] bottom-none top-1/2 -translate-y-1/2 bg-surface-100 dark:bg-surface-800 rounded-md" />
</Tabs.List>
<Tabs.Panels>
{tabs.map((tab) => (
<Tabs.Panel key={tab.id} value={tab.id}>
<p>{tab.content}</p>
</Tabs.Panel>
))}
</Tabs.Panels>
</Tabs.Root>
</div>
);
}
Template#
Update your personal information such as name, email address, and profile picture.
Manage your subscription plan, view invoices, and update your payment method.
Customize how the application looks and behaves to match your personal preferences.
template-demo
import { Badge } from '@primereact/ui/badge';
import { Button } from '@primereact/ui/button';
import { InputText } from '@primereact/ui/inputtext';
import { Label } from '@primereact/ui/label';
import { Switch } from '@primereact/ui/switch';
import { Tabs } from '@primereact/ui/tabs';
import { User } from '@primeicons/react/user';
import { CreditCard } from '@primeicons/react/credit-card';
import { Cog } from '@primeicons/react/cog';
const tabs = [
{
id: 'tab1',
title: 'Account Info',
icon: User,
content: 'Update your personal information such as name, email address, and profile picture.'
},
{
id: 'tab2',
title: 'Payment',
icon: CreditCard,
badge: 'New',
content: 'Manage your subscription plan, view invoices, and update your payment method.'
},
{
id: 'tab3',
title: 'Preferences',
icon: Cog,
content: 'Customize how the application looks and behaves to match your personal preferences.'
}
];
export default function TemplateDemo() {
return (
<div>
<Tabs.Root value="tab1" className="max-w-md mx-auto">
<Tabs.List>
{tabs.map((tab) => {
const Icon = tab.icon;
return (
<Tabs.Tab key={tab.id} value={tab.id} className="flex items-center gap-2">
<Icon />
{tab.title}
{tab.badge && <Badge size="small">{tab.badge}</Badge>}
</Tabs.Tab>
);
})}
<Tabs.Indicator />
</Tabs.List>
<Tabs.Panels>
<Tabs.Panel value="tab1">
<div>
<p className="mt-2 mb-8 text-surface-500">
Update your personal information such as name, email address, and profile picture.
</p>
<form>
<div className="space-y-4">
<div className="flex flex-col gap-1">
<Label htmlFor="username">Username</Label>
<InputText id="username" placeholder="john.doe" />
</div>
<div className="flex flex-col gap-1">
<Label htmlFor="email">Email</Label>
<InputText id="email" placeholder="[email protected]" />
</div>
</div>
<Button className="mt-8 w-fit">Save Changes</Button>
</form>
</div>
</Tabs.Panel>
<Tabs.Panel value="tab2">
<div>
<p className="mt-2 mb-8 text-surface-500">
Manage your subscription plan, view invoices, and update your payment method.
</p>
<form>
<div className="space-y-4">
<div className="flex flex-col gap-1">
<Label htmlFor="cardName">Cardholder Name</Label>
<InputText id="cardName" placeholder="John Doe" />
</div>
<div className="flex flex-col gap-1">
<Label htmlFor="cardNumber">Card Number</Label>
<InputText id="cardNumber" placeholder="0000 0000 0000 0000" />
</div>
<div className="flex flex-col gap-1">
<Label htmlFor="expiryDate">Expiry Date</Label>
<InputText id="expiryDate" placeholder="MM/YY" />
</div>
</div>
<Button className="mt-8 w-fit">Update Payment</Button>
</form>
</div>
</Tabs.Panel>
<Tabs.Panel value="tab3">
<div>
<p className="mt-2 mb-8 text-surface-500">
Customize how the application looks and behaves to match your personal preferences.
</p>
<form>
<div className="space-y-4">
<div className="flex items-center justify-between">
<Label htmlFor="darkMode">Dark Mode</Label>
<Switch.Root inputId="darkMode">
<Switch.Control>
<Switch.Thumb />
</Switch.Control>
</Switch.Root>
</div>
<div className="flex items-center justify-between">
<Label htmlFor="emailNotifications">Email Notifications</Label>
<Switch.Root inputId="emailNotifications" defaultChecked>
<Switch.Control>
<Switch.Thumb />
</Switch.Control>
</Switch.Root>
</div>
<div className="flex items-center justify-between">
<Label htmlFor="desktopNotifications">Desktop Notifications</Label>
<Switch.Root inputId="desktopNotifications">
<Switch.Control>
<Switch.Thumb />
</Switch.Control>
</Switch.Root>
</div>
</div>
<Button className="w-fit mt-8 ml-auto mr-0">Save Preferences</Button>
</form>
</div>
</Tabs.Panel>
</Tabs.Panels>
</Tabs.Root>
</div>
);
}
Accessibility#
Screen Reader#
The tabs container in TabList is defined with the tablist role, as any attribute is passed to the container element aria-labelledby can be optionally used to specify an element to describe the Tabs. Each Tab has a tab role along with aria-selected state attribute and aria-controls to refer to the corresponding TabPanel. TabPanel has tabpanel role, an id to match the aria-controls of Tab and aria-labelledby reference to Tab as the accessible name.
Tab Keyboard Support#
| Key | Function |
|---|---|
tab | Moves focus through the header. |
enter | Activates the focused tab header. |
space | Activates the focused tab header. |
right arrow | Moves focus to the next header. If focus is on the last header, moves focus to the first header. |
left arrow | Moves focus to the previous header. If focus is on the first header, moves focus to the last header. |
home | Moves focus to the last header. |
end | Moves focus to the first header. |
pageUp | Moves scroll position to first header. |
pageDown | Moves scroll position to last header. |