Tabs
A set of layered sections of content—known as tab panels—that are displayed one at a time.
Account Settings
Make changes to your account here. Click save when you're done.
1<Tabs>...</Tabs>#Installation
1bunx barefoot add tabs#Usage
1import { createSignal, createMemo } from '@barefootjs/dom'2import {3 Tabs,4 TabsList,5 TabsTrigger,6 TabsContent,7} from '@/components/ui/tabs'89export default function Page() {10 const [activeTab, setActiveTab] = createSignal('account')1112 // Use createMemo for derived selection states13 const isAccountSelected = createMemo(() => activeTab() === 'account')14 const isPasswordSelected = createMemo(() => activeTab() === 'password')1516 return (17 <Tabs value={activeTab()} onValueChange={setActiveTab}>18 <TabsList>19 <TabsTrigger20 value="account"21 selected={isAccountSelected()}22 onClick={() => setActiveTab('account')}23 >24 Account25 </TabsTrigger>26 <TabsTrigger27 value="password"28 selected={isPasswordSelected()}29 onClick={() => setActiveTab('password')}30 >31 Password32 </TabsTrigger>33 </TabsList>34 <TabsContent value="account" selected={isAccountSelected()}>35 Make changes to your account here.36 </TabsContent>37 <TabsContent value="password" selected={isPasswordSelected()}>38 Change your password here.39 </TabsContent>40 </Tabs>41 )42}#Examples
#Basic
Account Settings
Make changes to your account here. Click save when you're done.
1const [activeTab, setActiveTab] = createSignal('account')23// Use createMemo for derived selection states4const isAccountSelected = createMemo(() => activeTab() === 'account')5const isPasswordSelected = createMemo(() => activeTab() === 'password')67<Tabs value={activeTab()}>8 <TabsList>9 <TabsTrigger10 value="account"11 selected={isAccountSelected()}12 onClick={() => setActiveTab('account')}13 >14 Account15 </TabsTrigger>16 <TabsTrigger17 value="password"18 selected={isPasswordSelected()}19 onClick={() => setActiveTab('password')}20 >21 Password22 </TabsTrigger>23 </TabsList>24 <TabsContent value="account" selected={isAccountSelected()}>25 Make changes to your account here.26 </TabsContent>27 <TabsContent value="password" selected={isPasswordSelected()}>28 Change your password here.29 </TabsContent>30</Tabs>#Multiple Tabs
Overview content goes here.
1const [activeTab, setActiveTab] = createSignal('overview')23// Use createMemo for each tab's selection state4const isOverviewSelected = createMemo(() => activeTab() === 'overview')5const isAnalyticsSelected = createMemo(() => activeTab() === 'analytics')6const isReportsSelected = createMemo(() => activeTab() === 'reports')7const isNotificationsSelected = createMemo(() => activeTab() === 'notifications')89<Tabs value={activeTab()}>10 <TabsList>11 <TabsTrigger value="overview" selected={isOverviewSelected()} onClick={() => setActiveTab('overview')}>12 Overview13 </TabsTrigger>14 <TabsTrigger value="analytics" selected={isAnalyticsSelected()} onClick={() => setActiveTab('analytics')}>15 Analytics16 </TabsTrigger>17 <TabsTrigger value="reports" selected={isReportsSelected()} onClick={() => setActiveTab('reports')}>18 Reports19 </TabsTrigger>20 <TabsTrigger value="notifications" selected={isNotificationsSelected()} onClick={() => setActiveTab('notifications')}>21 Notifications22 </TabsTrigger>23 </TabsList>24 {/* TabsContent for each tab... */}25</Tabs>#Disabled Tab
This tab is active.
1<TabsTrigger value="disabled" disabled>2 Disabled Tab3</TabsTrigger>#Accessibility
- Keyboard Navigation - Arrow Left/Right to switch tabs, Home/End to jump to first/last
- Focus Management - Focus moves to the selected tab trigger
- ARIA - role="tablist" on container, role="tab" on triggers, role="tabpanel" on content
- State Attributes - aria-selected on triggers, aria-controls/aria-labelledby for associations
- Disabled State - aria-disabled on disabled tabs, skipped in keyboard navigation
#API Reference
Tabs
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | - | The currently selected tab value. |
| defaultValue | string | - | The initial tab value when uncontrolled. |
| onValueChange | (value: string) => void | - | Event handler called when the selected tab changes. |
TabsTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | - | A unique value for the tab. |
| selected | boolean | false | Whether the tab is currently selected. |
| disabled | boolean | false | Whether the tab is disabled. |
| onClick | () => void | - | Event handler called when the tab is clicked. |
TabsContent
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | - | The value that associates the content with a trigger. |
| selected | boolean | false | Whether the content is visible. |