Tabs
NavigationTabbed interface with keyboard navigation and ARIA roles.
Section switcher with a 2px Neo Green underline that follows the active tab. Supports horizontal (bottom underline) and vertical (right edge underline) orientations. Composed from TabsList, TabsTrigger, and TabsContent.
Usage
import { Tabs, TabsList, TabsTrigger, TabsContent } from "nosible-ux"
export default function Example() {
return (
<Tabs defaultValue="signals">
<TabsList>
<TabsTrigger value="signals">Signals</TabsTrigger>
<TabsTrigger value="watchlist">Watchlist</TabsTrigger>
<TabsTrigger value="reports">Reports</TabsTrigger>
</TabsList>
<TabsContent value="signals">Signal feed content</TabsContent>
<TabsContent value="watchlist">Watchlist content</TabsContent>
<TabsContent value="reports">Reports content</TabsContent>
</Tabs>
)
}Examples
Horizontal (default)
Company overview panel
Vertical orientation
Account settings
Accessibility
Built on Radix Tabs: arrow key navigation, role="tablist", role="tab", role="tabpanel", and aria-selected are handled automatically.
Props
| Name | Type | Default | Description |
|---|---|---|---|
activationMode | "manual" | "automatic" | undefined | automatic | Whether a tab is activated automatically or manually. |
asChild | boolean | undefined | — | |
defaultValue | string | undefined | — | The value of the tab to select by default, if uncontrolled |
dir | Direction | undefined | — | The direction of navigation between toolbar items. |
onValueChange | ((value: string) => void) | undefined | — | A function called when a new tab is selected |
orientation | TabsOrientation | undefined | "horizontal" | Controls trigger layout and active indicator position. |
size | TabsSize | undefined | "md" | Controls trigger height. |
value | string | undefined | — | The value for the selected tab, if controlled |