hx components Tabs

HxTabs

Tabbed content with header navigation and body switching. Each tab is defined as an object in the content array.

The active-tab indicator and header scrolling use logical offsets. In RTL direction, tabs are laid out right-to-left, the indicator positions from the inline-start (right) edge, and the overflow more-tab dropdown sticks to the inline-end (left) edge.

<HxTabs
  $model={form}
  content={[
    { mark: 'general', header: 'General', body: <GeneralTab />, defaultActive: true },
    { mark: 'security', header: 'Security', body: <SecurityTab /> },
    { mark: 'billing', header: 'Billing', body: <BillingTab />, $disabled: (m) => !m.canBill },
  ]}
  border
  borderRadius="md"
  contentPaddingX="lg"
  restoreScroll
/>

Props

Prop	Type	Default	Description
$model	HxObject<T>	—	Reactive model, passed to all tab bodies
$field	ModelPath<T> | HxDataPath	—	Nested model field path
content	HxTab[]	required	Array of tab definitions
border	boolean	false	Show border around content area
borderRadius	HxTabsBorderRadius	—	Border radius
contentPaddingX	HxTabsPaddingX	CSS default (12px) when unset	Body horizontal padding
contentPaddingT	HxTabsPaddingT	CSS default (12px) when unset	Body top padding
contentPaddingB	HxTabsPaddingB	CSS default (12px) when unset	Body bottom padding
contentContainerType	'block' | 'flex' | 'grid'	'grid'	CSS display for tab body content
restoreScroll	boolean	true	Restore scroll position when returning to a previously viewed tab

HxTab Definition

Each element in content:

Prop	Type	Required	Description
mark	string	yes	Unique identifier for the tab
header	ReactNode	yes	Content rendered in the tab header
body	ReactNode	yes	Content rendered when this tab is active
defaultActive	boolean	no	Initially active tab
$visible	DisabledPropValue<T>	no	Reactive visibility — hidden tabs don't render
$disabled	DisabledPropValue<T>	no	Reactive disabled — can't be selected

Sub-Components

• HxTabsHeader — Row of tab header buttons
• HxTabsBody — Container for the active tab body
• HxTabHeader — Individual tab header (click to switch)
• HxTabBody — Individual tab body container

Keyboard Navigation

• Arrow Left / Right — Move between tab headers
• Enter / Space — Activate focused tab
• Tab — Move focus into active tab content

Hooks

• useHxTabs() — { tabs, activeMark, switchToTab }
• useHxTab() — { isActive, mark, activate }

Native DOM Events

All events forwarded. In practice, tab switching is handled internally via header clicks and keyboard navigation. onClick on tab headers is available but usually unnecessary — use the content array's callbacks instead.

Global Config

import { configHxTabs } from '@hx/components';
configHxTabs({ restoreScroll: true, containerType: 'grid' });