TkxTabs

OverviewActivitySettings

The overview panel — first to render.

import { TkxTabs, TkxTab, TkxTabPanel } from 'tekivex-ui';

<TkxTabs defaultActive="overview">
  <TkxTab id="overview">Overview</TkxTab>
  <TkxTab id="activity">Activity</TkxTab>
  <TkxTab id="settings">Settings</TkxTab>

  <TkxTabPanel id="overview">Overview content</TkxTabPanel>
  <TkxTabPanel id="activity">Activity feed</TkxTabPanel>
  <TkxTabPanel id="settings">Settings form</TkxTabPanel>
</TkxTabs>

Controlled

Controlled — active: Tab A

Tab ATab BTab C

Panel A

const [active, setActive] = useState('overview');

<TkxTabs active={active} onChange={setActive}>
  {/* … */}
</TkxTabs>

Variants

<TkxTabs variant="line">    {/* underline indicator (default) */}
<TkxTabs variant="solid">   {/* filled active tab */}
<TkxTabs variant="enclosed"> {/* boxed tabs */}

Lazy rendering

Tab panels render only when first activated by default. Pass forceMount to render every panel up front (useful when forms inside tabs need their state preserved across tab switches):

<TkxTabPanel id="settings" forceMount>
  <SettingsForm />
</TkxTabPanel>

Accessibility — what’s automatic

• role="tablist" on the container with aria-orientation
• role="tab" + aria-selected + aria-controls on every tab
• role="tabpanel" + aria-labelledby on every panel
• Arrow keys move focus between tabs (Left/Right or Up/Down)
• Home / End jump to first / last tab
• Manual activation by default (focus follows arrows but doesn’t switch the panel until Enter / Space)

Pass activationMode="auto" to switch panels on focus instead — only appropriate when panel mounting is cheap.

Props

TkxTabs

Prop	Type	Required	Description
defaultActive	string		Uncontrolled initial tab id.
active	string		Controlled active tab id.
onChange	(id: string) => void		Fires on tab activation.
variant	'line' | 'solid' | 'enclosed'		Defaults to line.
orientation	'horizontal' | 'vertical'		Defaults to horizontal.
activationMode	'manual' | 'auto'		Defaults to manual.

TkxTab / TkxTabPanel

Both require an id that links the tab to its panel.

Source

src/components/TkxTabs.tsx