Tabs
Switch between related views using a moving selection indicator and arrow-key navigation.
Installation
Import from the Reflow workspace package.
Playground
Open demoimport { Tabs } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Tabs label="Workspace" defaultValue="item-1" items={[
{ value: 'overview', label: 'Overview', panel: <p>Overview</p> },
{ value: 'activity', label: 'Activity', panel: <p>Activity</p> },
]} />
</>
)
}With Icons
import { Tabs } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
const icon = <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
const homeIcon = <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
const inboxIcon = <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
const settingsIcon = <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
return () => (
<>
<Tabs label="Navigation" items={[
{ value: 'home', label: 'Home', icon: homeIcon },
{ value: 'inbox', label: 'Inbox', icon: inboxIcon },
{ value: 'settings', label: 'Settings', icon: settingsIcon },
]} />
</>
)
}Active Label
import { Tabs } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
const items = ['Home', 'Inbox', 'Settings'].map((label) => ({ value: label.toLowerCase(), label, panel: <p>{label}</p> }))
return () => (
<>
<Tabs activeLabel label="Navigation" items={items} />
</>
)
}Underline
import { Tabs } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
const items = ['Home', 'Inbox', 'Settings'].map((label) => ({ value: label.toLowerCase(), label, panel: <p>{label}</p> }))
return () => (
<>
<Tabs variant="underline" label="Workspace" items={items} />
</>
)
}API Reference
Public props for the Reflow implementation. Native controls also accept their standard HTML attributes and Remix event mixes.
Tabs
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Accessible name or visible label for the control. |
items* | readonly TabItem[] | — | Items and their content. |
defaultValue | string | — | Initial value for an uncontrolled component. |
value | string | — | Current value when controlled by the parent. |
onValueChange | ((value: string) => void) | — | Called when the selected value changes. |
variant | "pill" | "underline" | — | Visual or layout treatment. |
activeLabel | boolean | — | Shows the label only for the active tab. |
size | "default" | "compact" | — | Control density or icon-button dimensions. |
TabItem
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | — | Unique identifier for the tab and its associated panel. |
label* | string | — | Text of the tab trigger. |
panel | RemixNode | — | Content of the selected tab panel. |
icon | RemixNode | — | Icon content. |
disabled | boolean | — | Prevents interaction and conveys the disabled state. |