Components
Tabs
Switch between panels. Underline and pill variants, horizontal or vertical.
Client componentUses state or handlers, so it starts with "use client".
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@glob-ui/tabs"Preview
Change your name and email.
Examples
Pill, vertical
variant="pill" and orientation="vertical". Arrow keys follow the orientation.
General settings.
API
Props are generated from the TypeScript types in the package source.
Tabs
Prop
Type
TabsList
Prop
Type
TabsTrigger
Prop
Type
TabsContent
Prop
Type
Accessibility
| Key or action | Behaviour |
|---|---|
| Tab | Enters the tab list on the selected tab. Only one tab is in the tab order. |
| Arrow keys (Left and Right, or Up and Down when vertical) | Move to the next or previous tab, and select it. The list loops. |
| Home, End | Move to the first or last enabled tab. |
| Disabled tab | Skipped. |
ARIA. The list is role="tablist" with aria-orientation. Each trigger is role="tab" with aria-selected and aria-controls. The panel is role="tabpanel". If value matches no tab, the first enabled tab takes the tab stop.