Skip to content
Docs

Tabs

@hua-labs/ui
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@hua-labs/hua";

Account Settings

Manage your account information and preferences.

Pills
Underline
Cards

sm
md
lg

Current:
account

defaultValuestring-Initial active tab value (uncontrolled)
valuestring-Active tab value (controlled)
onValueChange(value: string) => void-Callback when tab changes
orientation"horizontal" | "vertical""horizontal"Tab orientation
variant"default" | "pills" | "underline" | "cards""default"Visual style variant
size"sm" | "md" | "lg""md"Tab size

docs:common.basicUsagetsx
1// Via framework (recommended)
2import { Tabs, TabsList, TabsTrigger, TabsContent } from '@hua-labs/hua';
3// Or direct import
4// import { Tabs, TabsList, TabsTrigger, TabsContent } from '@hua-labs/ui/interactive';
5 
6<Tabs defaultValue="tab1">
7  <TabsList>
8    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
9    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
10    <TabsTrigger value="tab3">Tab 3</TabsTrigger>
11  </TabsList>
12  <TabsContent value="tab1">Content for Tab 1</TabsContent>
13  <TabsContent value="tab2">Content for Tab 2</TabsContent>
14  <TabsContent value="tab3">Content for Tab 3</TabsContent>
15</Tabs>
Controlledtsx
1const [activeTab, setActiveTab] = useState("account");
2 
3<Tabs value={activeTab} onValueChange={setActiveTab}>
4  <TabsList>
5    <TabsTrigger value="account">Account</TabsTrigger>
6    <TabsTrigger value="settings">Settings</TabsTrigger>
7  </TabsList>
8  <TabsContent value="account">Account settings...</TabsContent>
9  <TabsContent value="settings">App settings...</TabsContent>
10</Tabs>
docs:common.variantstsx
1// Pills variant
2<Tabs variant="pills" defaultValue="tab1">
3  <TabsList>
4    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
5    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
6  </TabsList>
7</Tabs>
8 
9// Underline variant
10<Tabs variant="underline" defaultValue="tab1">
11  ...
12</Tabs>

  • •Keyboard Navigation: Arrow keys to navigate, Home/End to jump to first/last tab
  • •ARIA: role='tablist', role='tab', role='tabpanel' with proper aria attributes
  • •Focus Management: Focus follows selection, tabindex managed automatically
AccordionTooltip