Tabs
Panels that share one space.
Default
Three tabs, one of them disabled. Arrows move, and the panel follows.
Your name and the address we write to.
Tab reaches the row of tabs once, and the arrow keys move between them — that is what makes it a tab row rather than a row of buttons. By default moving also opens the panel; ask for manual activation and the reader has to say so.
Installation
npx philcn@latest add tabsThe file is written into your project. It is yours from then on — change it as you like.
Examples
Manual activation
The arrows move the focus; Enter or Space opens the panel.
Yesterday: 1 240 downloads.
Props
| Prop | Type | What it does |
|---|---|---|
| Tabs.value | string | Controlled: the open tab. |
| Tabs.onValueChange | ((value: string) => void) | Called with the tab that was just opened. |
| Tabs.activationMode | "automatic" | "manual" | Automatic opens a panel as the focus lands on its tab; manual waits for Enter or Space. Manual when opening costs a request. |
| Tabs.orientation | Orientation | A row of tabs, or a column down the side. |
| TabsTrigger.value * | string | Ties this tab to its panel. Required. |
| TabsContent.value * | string | Ties this panel to its tab. Required. |
| TabsContent.forceMount | boolean | Keeps the panel in the page while it is hidden, for something expensive to build twice. |
Types are read from the library itself, so this table cannot describe an option the code no longer has.