navigation contract
Tabs
Switch between sibling views in the same scope. Keyboard-driven.
Variants
- underline
- pill
- segmented
Sizes
- sm
- md
- lg
Example
<Tabs value={tab} onValueChange={setTab}><TabsList><TabsTrigger value="overview">Overview</TabsTrigger>...</TabsList><TabsContent value="overview">...</TabsContent></Tabs>Usage rule
role="tablist" + role="tab" + role="tabpanel". Use Radix Tabs / equivalent.
The full Tabs contract has 5 more rules, plus the do-not patterns. Get the full recipe.