Tabs
A set of layered sections of content, known as tab panels, that are displayed one at a time. Full ARIA role="tablist" support.
Tabs organize content into multiple views that the user can switch between. They are a complex component that requires specific focus management and ARIA roles.
Accessibility Features
- Role Mapping: Implements
role="tablist",role="tab", androle="tabpanel". - Keyboard: Arrow keys for navigation,
Home/Endsupport. - Focus Tracking: Restores focus correctly when switching tabs.
Usage Example
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@holmdigital/components'; <Tabs defaultValue="account"> <TabsList> <TabsTrigger value="account">Account</TabsTrigger> <TabsTrigger value="password">Password</TabsTrigger> </TabsList> <TabsContent value="account">Make changes to your account here.</TabsContent> <TabsContent value="password">Change your password here.</TabsContent> </Tabs>