kapable

Tabs

Navigation · 6 exports · v0.1.0 · showcase

Keyboard-roving tab set for switching among related panels in place.

Tabs
TabList
Tab
TabPanel
onTabsChange
TabsChangeEvent

Browse 72 component families

Preview

Tabs renders its active panel during SSR, but switching tabs requires the client runtime. This server-rendered page does not imitate client behavior. Open the live playground.

Usage

<Tabs defaultActiveTab="overview">
  <TabList label="Deploy sections"><Tab name="overview">Overview</Tab></TabList>
  <TabPanel name="overview">Summary</TabPanel>
</Tabs>

API

TabsProps

Tabs props
prop	type	notes
defaultActiveTab?	string	Uncontrolled: the tab active on first render.
activeTab?	string	Controlled: the active tab name (pair with onActiveTabChange).
onActiveTabChange?	(activeTab: string) => void
disabled?	boolean	Disables every tab.
children?	RemixNode	TabList + Tab children, then TabPanel siblings.
mix?	MixInput	Composition passthrough for the root element.

TabListProps

TabList props
prop	type	notes
label	string	Accessible name for the tablist (what the group of views is).
children?	RemixNode
mix?	MixInput

TabProps

Tab props
prop	type	notes
name	string	Tab name, matched by the TabPanel with the same name.
disabled?	boolean
children?	RemixNode
mix?	MixInput

TabPanelProps

TabPanel props
prop	type	notes
name	string	Name of the Tab this panel belongs to.
children?	RemixNode
mix?	MixInput

More in Navigation