TabSelect

Compact tabs for mode switching.

TabSelect

TabSelect is useful for switching between modes or workspaces. It renders a horizontal row of tabs and calls onChange when the selected index changes.

<tab_select
  tabs={["Editor", "Diff", "Console"]}
  selectedIndex={activeTab()}
  onChange={(index) => setActiveTab(index)}
/>

You can customize tab styles via props and disable individual tabs by setting a disabled flag.

<tab_select
  tabs={[
    { label: "Home" },
    { label: "Settings", disabled: true },
  ]}
  selectedIndex={0}
  onChange={(i) => setTab(i)}
/>

Tabs work best when they represent persistent “areas” of the UI (not transient actions). If you need transient actions, consider a menu or command palette instead.

Props

Prop	Type	Notes
`tabs`	`array`	Tab labels/options. Keep them short (terminal width).
`selectedIndex`	`number`	Controlled active tab index.
`focused`	`boolean`	Requests focus on mount (React/Solid).
`onChange`	`(index, tab) => void`	Fires when active tab changes (arrow keys / click).
`onSelect`	`(index, tab) => void`	Fires on confirmation (if supported by the binding).