defaultValue- Type
string- Default
- -
- Description
- Initially active tab (uncontrolled).
Components / Navigation
Tabs
தாவல்கள்
Tabs organise content into multiple sections that are revealed one at a time. They are best for content-switching at the same level of hierarchy.
தாவல்கள் உள்ளடக்கத்தை ஒரு நேரத்தில் ஒரு பகுதியாக காட்டும் பல பிரிவுகளாக ஒழுங்கமைக்கின்றன.
Basic tabs
Component preview
Government profile tabsஅரசு சுயவிவர தாவல்கள்Anatomy
Structure
Anatomy
4 parts documented for implementation and review.
1
TabsList
தாவல் பட்டிrequired<div>Horizontal bar with role=tablist containing all tab triggers. Default variant: muted pill background (bg-muted, rounded-md). Line variant: transparent with bottom-border indicators. Height 32px.
2
TabsTrigger
தாவல் தூண்டிrequired<button>Tab button with role=tab. Active: aria-selected=true with bg-background (default variant) or bottom-border (line variant). Arrow keys navigate, Enter/Space activates. Text-sm font-medium.
3
TabsContent
தாவல் உள்ளடக்கம்required<div>Content panel with role=tabpanel linked to trigger via aria-labelledby. Only the active panel is visible. Flex-1 text-sm. Accepts any React children.
4
Active indicator
செயலில் குறிActive indicator — a 2px brand-colored underline at the bottom of the active trigger (line variant) or a white pill background (default variant). Animates between tabs.
API
Props
value- Type
string- Default
- -
- Description
- Controlled active tab.
onValueChange- Type
(value: string) => void- Default
- -
- Description
- Fired when active tab changes.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string | - | Initially active tab (uncontrolled). |
value | string | - | Controlled active tab. |
onValueChange | (value: string) => void | - | Fired when active tab changes. |
Accessibility
- Arrow keys navigate between tabs. Home/End jump to first/last.
- Tab panels have
role="tabpanel"automatically. - Tamil tab labels: use
font-tamilclass onTabsTrigger.
Best practices
Keep tab labels short and use at most 5–6 tabs
தாவல் லேபிள்களை சுருக்கமாக வைத்து அதிகபட்சம் 5–6 தாவல்களே பயன்படுத்தவும்
Short 1–2 word labels are scannable; more than 5–6 tabs should be redesigned as a different navigation pattern.
1–2 சொல் லேபிள்கள் விரைவாக படிக்க உதவும் — 5–6-க்கும் அதிக தாவல்கள் வேறு வழிசெலுத்தல் வடிவமைப்பாக மாற்றவும்.
Don't use Tabs to navigate between pages
பக்கங்களுக்கு இடையில் செல்ல Tabs பயன்படுத்தாதே
Tabs switch content within a page — they should not navigate the user to a different URL. Use a Link-based nav for that.
Tabs ஒரே பக்கத்தில் உள்ளடக்கத்தை மாற்றும் — வேறு URL-க்கு செல்ல இணைப்பு அடிப்படை வழிசெலுத்தல் பயன்படுத்தவும்.
Show clear active indicator on the current tab
செயலில் உள்ள தாவலுக்கு தெளிவான குறி காட்டவும்
The active tab must be visually distinct so users always know which panel they are viewing.
செயலில் உள்ள தாவல் தெளிவாக தெரிய வேண்டும் — பயனர் எந்த பலகம் தெரிகிறது என்று எப்போதும் அறிய வேண்டும்.
Don't nest Tabs inside Tabs
தாவல்களுக்குள் தாவல்கள் வைக்காதே
Nested tabs create navigational confusion — users lose track of which level they are on.
தாவல்களுக்குள் தாவல்கள் வழிசெலுத்தல் குழப்பத்தை உருவாக்கும் — பயனர் எந்த நிலையில் இருக்கிறார் என்று தெரியாது.