//
A set of layered sections of content.
bun add xiod-ui1import {2 Tabs,3 TabsContent,4 TabsPanel,5 TabsList,6 TabsTab,7 TabsTrigger8} from "xiod-ui/tabs";1<Tabs>2 <TabsTrigger />3 <TabsContent>4 <TabsList>5 </TabsList>6 <TabsPanel />7 <TabsTab />8 </TabsContent>9</Tabs>| Prop | Type | Default | Description |
|---|---|---|---|
value | any | - | The value of the currently active `Tab`. Use when the component is controlled. When the value is `null`, no Tab will be active. |
defaultValue | any | 0 | The default value. Use when the component is not controlled. When the value is `null`, no Tab will be active. |
orientation | Orientation| undefined | 'horizontal' | The component orientation (layout flow direction). |
onValueChange | ((value: any, eventDetails: TabsRootChangeEventDetails) => void)| undefined | - | Callback invoked when new value is being set. The event `reason` is `'none'` for user-initiated changes, such as a click or keyboard navigation; `'initial'` for the first automatic selection or fallback in uncontrolled roots when `defaultValue` is omitted or `undefined`, including when the implicit initial value is disabled or missing; `'disabled'` for automatic fallback when the selected tab becomes disabled in uncontrolled roots; or `'missing'` for automatic fallback when the selected tab is removed, or when an explicit `defaultValue` never matches a mounted tab in uncontrolled roots. For automatic changes, the selected value can be `null` when no enabled Tab is available as a fallback. Automatic changes cannot be canceled; calling `eventDetails.cancel()` for `'initial'`, `'disabled'`, or `'missing'` has no effect. |
className | string| ((state: TabsRootState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, TabsRootState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: TabsRootState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
valueReq | any | - | The value of the TabPanel. It will be shown when the Tab with the corresponding value is active. |
keepMounted | boolean| undefined | false | Whether to keep the HTML element in the DOM while the panel is hidden. |
className | string| ((state: TabsPanelState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, TabsPanelState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: TabsPanelState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
activateOnFocus | boolean| undefined | false | Whether to automatically change the active tab on arrow key focus. Otherwise, tabs will be activated using <kbd>Enter</kbd> or <kbd>Space</kbd> key press. |
loopFocus | boolean| undefined | true | Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. |
className | string| ((state: TabsListState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, TabsListState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: TabsListState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
variant | TabsVariant| undefined | default |
| Prop | Type | Default | Description |
|---|---|---|---|
valueReq | any | - | The value of the Tab. |
disabled | boolean| undefined | - | Whether the Tab is disabled. If a first Tab on a `<Tabs.List>` is disabled, it won't initially be selected. Instead, the next enabled Tab will be selected. However, it does not work like this during server-side rendering, as it is not known during pre-rendering which Tabs are disabled. To work around it, ensure that `defaultValue` or `value` on `<Tabs.Root>` is set to an enabled Tab's value. |
nativeButton | boolean| undefined | true | Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`). |
className | string| ((state: TabsTabState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, TabsTabState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: TabsTabState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |