Tabs
The Tabs component consists of tabbed sections, or tab panels, that display content one at a time. It provides organized and efficient navigation through different categories or topics within the interface, enhancing the user experience by keeping content easily accessible and well-structured.
Account
Make changes to your account here. Click save when you're done.
Configurable Props
<Tabs>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
defaultValue | string | The value of the select when initially rendered. Use when you do not need to control the state of the select. | |
value | string | The controlled value of the select. Should be used in conjunction with onValueChange. | |
onValueChange | function (value: string) => void | Event handler called when the value changes. | |
orientation | enum ("horizontal" | "vertical" | undefined) | "horizontal" | The orientation of the component. |
activationMode | enum ("automatic" | "manual") | "automatic" | When automatic, tabs are activated when receiving focus. When manual, tabs are activated when clicked. |
<TabsList>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
loop | boolean | true | When true, keyboard navigation will loop from last tab to first, and vice versa. |
<TabsContent>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
value* | string | A unique value that associates the content with a trigger. |