TableTextarea
Get Started
Introduction
Components
Accordion
Badge
Button
Card
Checkbox
Command
Dialog
Dropdown Menu
Input
Select
Switch
Table
Tabs
Toast
Tooltip
Forms
Controlled Input
Field Arrays
Submit
Validation

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Account settings content.

account
password

#Installation

bunx --bun barefoot add tabs

#Usage

Account Settings

Make changes to your account here. Click save when you're done.

1"use client"23import { createSignal, createMemo } from '@barefootjs/dom'4import {5  Tabs,6  TabsList,7  TabsTrigger,8  TabsContent,9} from '@/components/ui/tabs'1011function TabsDemo() {12  const [activeTab, setActiveTab] = createSignal('account')1314  const isAccountSelected = createMemo(() => activeTab() === 'account')15  const isPasswordSelected = createMemo(() => activeTab() === 'password')1617  return (18    <Tabs value={activeTab()}>19      <TabsList>20        <TabsTrigger21          value="account"22          selected={isAccountSelected()}23          onClick={() => setActiveTab('account')}24        >25          Account26        </TabsTrigger>27        <TabsTrigger28          value="password"29          selected={isPasswordSelected()}30          onClick={() => setActiveTab('password')}31        >32          Password33        </TabsTrigger>34      </TabsList>35      <TabsContent value="account" selected={isAccountSelected()}>36        Make changes to your account here.37      </TabsContent>38      <TabsContent value="password" selected={isPasswordSelected()}>39        Change your password here.40      </TabsContent>41    </Tabs>42  )43}

#Examples

#Basic

Account Settings

Make changes to your account here. Click save when you're done.

1"use client"23import { createSignal, createMemo } from '@barefootjs/dom'4import {5  Tabs,6  TabsList,7  TabsTrigger,8  TabsContent,9} from '@/components/ui/tabs'1011function TabsBasic() {12  const [activeTab, setActiveTab] = createSignal('account')1314  const isAccountSelected = createMemo(() => activeTab() === 'account')15  const isPasswordSelected = createMemo(() => activeTab() === 'password')1617  return (18    <Tabs value={activeTab()}>19      <TabsList>20        <TabsTrigger21          value="account"22          selected={isAccountSelected()}23          onClick={() => setActiveTab('account')}24        >25          Account26        </TabsTrigger>27        <TabsTrigger28          value="password"29          selected={isPasswordSelected()}30          onClick={() => setActiveTab('password')}31        >32          Password33        </TabsTrigger>34      </TabsList>35      <TabsContent value="account" selected={isAccountSelected()}>36        Make changes to your account here.37      </TabsContent>38      <TabsContent value="password" selected={isPasswordSelected()}>39        Change your password here.40      </TabsContent>41    </Tabs>42  )43}

#Multiple Tabs

Overview content goes here.

1"use client"23import { createSignal, createMemo } from '@barefootjs/dom'4import {5  Tabs,6  TabsList,7  TabsTrigger,8  TabsContent,9} from '@/components/ui/tabs'1011function TabsMultiple() {12  const [activeTab, setActiveTab] = createSignal('overview')1314  const isOverviewSelected = createMemo(() => activeTab() === 'overview')15  const isAnalyticsSelected = createMemo(() => activeTab() === 'analytics')16  const isReportsSelected = createMemo(() => activeTab() === 'reports')17  const isNotificationsSelected = createMemo(() => activeTab() === 'notifications')1819  return (20    <Tabs value={activeTab()}>21      <TabsList>22        <TabsTrigger value="overview" selected={isOverviewSelected()} onClick={() => setActiveTab('overview')}>23          Overview24        </TabsTrigger>25        <TabsTrigger value="analytics" selected={isAnalyticsSelected()} onClick={() => setActiveTab('analytics')}>26          Analytics27        </TabsTrigger>28        <TabsTrigger value="reports" selected={isReportsSelected()} onClick={() => setActiveTab('reports')}>29          Reports30        </TabsTrigger>31        <TabsTrigger value="notifications" selected={isNotificationsSelected()} onClick={() => setActiveTab('notifications')}>32          Notifications33        </TabsTrigger>34      </TabsList>35      {/* TabsContent for each tab... */}36    </Tabs>37  )38}

#Disabled Tab

This tab is active.

1"use client"23import {4  Tabs,5  TabsList,6  TabsTrigger,7} from '@/components/ui/tabs'89function TabsDisabled() {10  return (11    <Tabs>12      <TabsList>13        <TabsTrigger value="enabled" selected>14          Enabled Tab15        </TabsTrigger>16        <TabsTrigger value="disabled" disabled>17          Disabled Tab18        </TabsTrigger>19      </TabsList>20    </Tabs>21  )22}

#API Reference

Tabs

PropTypeDefaultDescription
valuestring-The currently selected tab value.
defaultValuestring-The initial tab value when uncontrolled.
onValueChange(value: string) => void-Event handler called when the selected tab changes.

TabsTrigger

PropTypeDefaultDescription
valuestring-A unique value for the tab.
selectedbooleanfalseWhether the tab is currently selected.
disabledbooleanfalseWhether the tab is disabled.
onClick() => void-Event handler called when the tab is clicked.

TabsContent

PropTypeDefaultDescription
valuestring-The value that associates the content with a trigger.
selectedbooleanfalseWhether the content is visible.