Tabs

Tabs

Basic (Uncontrolled)

OverviewFeaturesPricing

Welcome to the overview tab. This is the default active tab.

Here are the features: fast, lightweight, and accessible.

Our pricing is simple: free and open source.

Controlled

Go to Tab 1Go to Tab 2Go to Tab 3

Tab 1Tab 2Tab 3

Content for Tab 1. Use the buttons above to switch tabs externally.

Content for Tab 2. The active tab is controlled by state.

Content for Tab 3. Current value: tab1

Usage

import { Tabs, TabList, Tab, TabPanel } from "@f0rbit/ui";

<Tabs defaultValue="overview">
  <TabList>
    <Tab value="overview">Overview</Tab>
    <Tab value="features">Features</Tab>
  </TabList>
  <TabPanel value="overview">
    <p>Overview content here.</p>
  </TabPanel>
  <TabPanel value="features">
    <p>Features content here.</p>
  </TabPanel>
</Tabs>

Uncontrolled Mode

Use defaultValue to set the initially active tab:

<Tabs defaultValue="first">
  <TabList>
    <Tab value="first">First</Tab>
    <Tab value="second">Second</Tab>
  </TabList>
  <TabPanel value="first">First panel content</TabPanel>
  <TabPanel value="second">Second panel content</TabPanel>
</Tabs>

Controlled Mode

For full control, use value and onValueChange:

const [activeTab, setActiveTab] = createSignal("tab1");

<Tabs value={activeTab()} onValueChange={setActiveTab}>
  <TabList>
    <Tab value="tab1">Tab 1</Tab>
    <Tab value="tab2">Tab 2</Tab>
  </TabList>
  <TabPanel value="tab1">Controlled content 1</TabPanel>
  <TabPanel value="tab2">Controlled content 2</TabPanel>
</Tabs>

Keyboard Navigation

The Tabs component supports keyboard interaction following WAI-ARIA patterns:

Key	Action
Tab	Moves focus into the tab list, landing on the active tab
Enter / Space	Activates the focused tab (if not already active)
Tab (from tab list)	Moves focus to the active panel content

Note: Arrow key navigation between tabs is not currently implemented. Users can navigate between tabs using Tab to move focus out and back into the tab list, or by clicking directly on tabs.

Accessibility

The Tabs component implements proper ARIA attributes for screen reader support:

ARIA Roles & Attributes

• TabList: role="tablist" - identifies the container as a tab list
• Tab: role="tab" with aria-selected - indicates the tab’s selection state
• TabPanel: role="tabpanel" with hidden - associates content with its tab

Focus Management

• Active tab has tabindex="0" (focusable in normal tab order)
• Inactive tabs have tabindex="-1" (focusable only programmatically)
• Only the active panel is visible; others are hidden from the DOM

Screen Reader Behavior

Screen readers will announce:

• The tab role and its label
• Whether the tab is selected
• The position in the tab list (e.g., “tab 1 of 3”)

Props

Tabs

Prop	Type	Default	Description
defaultValue	string	—	Initial active tab (uncontrolled)
value	string	—	Controlled active tab value
onValueChange	(value: string) => void	—	Callback when active tab changes

Tab

Prop	Type	Default	Description
value	string	—	Unique identifier for this tab
children	JSX.Element	—	Tab label content

TabPanel

Prop	Type	Default	Description
value	string	—	Must match a Tab value to associate content
children	JSX.Element	—	Panel content