Tabs

Tabs organize content into separate views where only one view is visible at a time. Users can switch between views by selecting the corresponding tab.

Import

import { Tabs, TabList, Tab, TabPanel } from '@proyecto-viviana/solid-spectrum';

Basic Usage

A simple tab interface with multiple panels.

Account

Password

Notifications

Manage your account settings, profile information, and preferences.

<Tabs items={tabs} aria-label="Settings">
  <TabList>
    {(item) => <Tab id={item.id}>{item.label}</Tab>}
  </TabList>
  <TabPanel id="account">...</TabPanel>
  <TabPanel id="password">...</TabPanel>
  <TabPanel id="notifications">...</TabPanel>
</Tabs>

Controlled Tabs

Control which tab is selected programmatically.

Tab 1

Tab 2

Tab 3

<Tabs items={tabs} selectedKey={selectedKey()} onSelectionChange={setSelectedKey} aria-label="Controlled tabs">...</Tabs>

Disabled Tabs

Individual tabs can be disabled.

Free Features

Pro Features

Enterprise (Contact Sales)

Free tier features available to all users.

<Tabs items={tabs} disabledKeys={["enterprise"]} aria-label="Feature tiers">...</Tabs>

Vertical Orientation

Tabs can be displayed vertically.

General

Security

Privacy

Advanced

General settings and preferences.

<Tabs items={tabs} orientation="vertical" aria-label="Vertical navigation">...</Tabs>

Tabs Props

Props

Prop	Type	Default	Description
`items`	T[]	—	Collection of tab items
`selectedKey`	string	—	Currently selected tab key (controlled)
`defaultSelectedKey`	string	—	Default selected tab (uncontrolled)
`onSelectionChange`	(key: string) => void	—	Handler called when selection changes
`orientation`	'horizontal' \| 'vertical'	`'horizontal'`	Tab layout orientation
`isDisabled`	boolean	`false`	Whether all tabs are disabled
`disabledKeys`	Iterable<string>	—	Keys of disabled tabs

Tab Props

Props

Prop	Type	Default	Description
`id`	string	—	Unique identifier for the tab
`isDisabled`	boolean	`false`	Whether the tab is disabled
`children`	JSX.Element	—	Tab label content

TabPanel Props

Props

Prop	Type	Default	Description
`id`	string	—	Must match the corresponding Tab id
`children`	JSX.Element	—	Panel content

Accessibility

Uses tablist, tab, and tabpanel ARIA roles
Arrow keys navigate between tabs
Home/End keys jump to first/last tab
Tab panels are linked via aria-controls and aria-labelledby
Focus indicator clearly shows which tab is focused
Automatic activation on focus (follows ARIA best practices)