Tabs

The Tabs component organizes content into sections that can be navigated via tabbed controls.

Example

Preview

Content for Tab 1

Code

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@hv/ui/tabs';

<Tabs defaultValue='tab1'>
  <TabsList>
    <TabsTrigger value='tab1'>Tab 1</TabsTrigger>
    <TabsTrigger value='tab2'>Tab 2</TabsTrigger>
    <TabsTrigger value='tab3'>Tab 3</TabsTrigger>
    <TabsTrigger disabled value='tab4'>Disabled</TabsTrigger>
  </TabsList>
  <TabsContent value='tab1'>Content for Tab 1</TabsContent>
  <TabsContent value='tab2'>Content for Tab 2</TabsContent>
  <TabsContent value='tab3'>Content for Tab 3</TabsContent>
  <TabsContent value='tab4'>Content for Tab 4</TabsContent>
</Tabs>;

Props

Tabs Props

Name	Description	Type
defaultValue	Default active tab	String
value	Controlled active tab	String
onValueChange	Callback on tab change	Function

TabsList Props

Name	Description	Type
className	Additional classes for styling	String

TabsTrigger Props

Name	Description	Type
value	The value associated with the tab	String
className	Additional classes for styling	String
disabled	Disables the tab	Boolean

TabsContent Props

Name	Description	Type
value	The value associated with the content	String
className	Additional classes for styling	String

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• Otherwise, pass className overrides. Class overrides can be applied to all sub-components.