When To Use
- Use Tabs when the user needs to enter or choose information as part of a larger form or workflow.
- Start from this pattern when you need the interaction, spacing, and state treatment to match the rest of the system.
- Use the examples below to choose the least complex control that still communicates the user’s next step clearly.
When Not To Use
- Do not introduce a heavier or more customizable control when a simpler native-style field is sufficient.
- Do not hide required context, validation, or option meaning behind placeholder text alone.
Accessibility Notes
- Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
- Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
- Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.
Key Props / API
Key exports
TabsRoot, TabsList, TabsTrigger, TabsContent
Example Code
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@hilum/ui"
<Tabs defaultValue="settings">
<TabsList>
<TabsTrigger value="settings">Settings</TabsTrigger>
<TabsTrigger value="history">History</TabsTrigger>
<TabsTrigger value="usage">Usage</TabsTrigger>
</TabsList>
<TabsContent value="settings">
<p className="text-sm text-ground-500">Manage your account settings and preferences.</p>
</TabsContent>
<TabsContent value="history">
<p className="text-sm text-ground-500">View your generation history.</p>
</TabsContent>
<TabsContent value="usage">
<p className="text-sm text-ground-500">Track your API usage and credits.</p>
</TabsContent>
</Tabs>Tabs
Underline style
Horizontal tab strip with active underline indicator
Manage your account settings and preferences.