Tabs

Tabbed content panels.

Examples

Default

Overview

Details

First panel content.

import { Tabs, Text } from '@var-ui/react';

<Tabs
  tabs={[
    { id: 'overview', label: 'Overview', content: <Text>First panel content.</Text> },
    { id: 'details', label: 'Details', content: <Text>Second panel content.</Text> },
  ]}
/>

Props

Accessibility

Built on React Aria Components where applicable. The Astro Tabs component ships a small client script for keyboard navigation.

Props

Prop	Type	Default	Description
`tabs`	`TabDefinition[]`	—	Tab definitions with id, label, and panel content.

React Aria props

Prop	Type	Default	Description
`aria-describedby`	`string \| undefined`	—	Identifies the element (or elements) that describes the object.
`aria-details`	`string \| undefined`	—	Identifies the element (or elements) that provide a detailed, extended description for the object.
`aria-label`	`string \| undefined`	—	Defines a string value that labels the current element.
`aria-labelledby`	`string \| undefined`	—	Identifies the element (or elements) that labels the current element.
`className`	`ClassNameOrFunction<TabsRenderProps> \| undefined`	`'react-aria-Tabs'`	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
`dir`	`string \| undefined`	—	—
`disabledKeys`	`Iterable<Key> \| undefined`	—	The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
`hidden`	`boolean \| undefined`	—	—
`id`	`string \| undefined`	—	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`inert`	`boolean \| undefined`	—	—
`keyboardActivation`	`"manual" \| "automatic" \| undefined`	`'automatic'`	Whether tabs are activated automatically on focus or manually.
`lang`	`string \| undefined`	—	—
`onAnimationEnd`	`AnimationEventHandler<HTMLDivElement> \| undefined`	—	—
`onAnimationEndCapture`	`AnimationEventHandler<HTMLDivElement> \| undefined`	—	—
`onAnimationIteration`	`AnimationEventHandler<HTMLDivElement> \| undefined`	—	—
`onAnimationIterationCapture`	`AnimationEventHandler<HTMLDivElement> \| undefined`	—	—
`onAnimationStart`	`AnimationEventHandler<HTMLDivElement> \| undefined`	—	—
`onAnimationStartCapture`	`AnimationEventHandler<HTMLDivElement> \| undefined`	—	—
`onAuxClick`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onAuxClickCapture`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onClick`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onClickCapture`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onContextMenu`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onContextMenuCapture`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onDoubleClick`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onDoubleClickCapture`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onGotPointerCapture`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onGotPointerCaptureCapture`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onLostPointerCapture`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onLostPointerCaptureCapture`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseDown`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseDownCapture`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseEnter`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseLeave`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseMove`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseMoveCapture`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseOut`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseOutCapture`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseOver`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseOverCapture`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseUp`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onMouseUpCapture`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerCancel`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerCancelCapture`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerDown`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerDownCapture`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerEnter`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerLeave`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerMove`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerMoveCapture`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerOut`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerOutCapture`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerOver`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerOverCapture`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerUp`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onPointerUpCapture`	`PointerEventHandler<HTMLDivElement> \| undefined`	—	—
`onScroll`	`UIEventHandler<HTMLDivElement> \| undefined`	—	—
`onScrollCapture`	`UIEventHandler<HTMLDivElement> \| undefined`	—	—
`onTouchCancel`	`TouchEventHandler<HTMLDivElement> \| undefined`	—	—
`onTouchCancelCapture`	`TouchEventHandler<HTMLDivElement> \| undefined`	—	—
`onTouchEnd`	`TouchEventHandler<HTMLDivElement> \| undefined`	—	—
`onTouchEndCapture`	`TouchEventHandler<HTMLDivElement> \| undefined`	—	—
`onTouchMove`	`TouchEventHandler<HTMLDivElement> \| undefined`	—	—
`onTouchMoveCapture`	`TouchEventHandler<HTMLDivElement> \| undefined`	—	—
`onTouchStart`	`TouchEventHandler<HTMLDivElement> \| undefined`	—	—
`onTouchStartCapture`	`TouchEventHandler<HTMLDivElement> \| undefined`	—	—
`onTransitionCancel`	`TransitionEventHandler<HTMLDivElement> \| undefined`	—	—
`onTransitionCancelCapture`	`TransitionEventHandler<HTMLDivElement> \| undefined`	—	—
`onTransitionEnd`	`TransitionEventHandler<HTMLDivElement> \| undefined`	—	—
`onTransitionEndCapture`	`TransitionEventHandler<HTMLDivElement> \| undefined`	—	—
`onTransitionRun`	`TransitionEventHandler<HTMLDivElement> \| undefined`	—	—
`onTransitionRunCapture`	`TransitionEventHandler<HTMLDivElement> \| undefined`	—	—
`onTransitionStart`	`TransitionEventHandler<HTMLDivElement> \| undefined`	—	—
`onTransitionStartCapture`	`TransitionEventHandler<HTMLDivElement> \| undefined`	—	—
`onWheel`	`WheelEventHandler<HTMLDivElement> \| undefined`	—	—
`onWheelCapture`	`WheelEventHandler<HTMLDivElement> \| undefined`	—	—
`orientation`	`Orientation \| undefined`	`'horizontal'`	The orientation of the tabs.
`render`	`DOMRenderFunction<"div", TabsRenderProps> \| undefined`	—	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
`slot`	`string \| null \| undefined`	—	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
`style`	`StyleOrFunction<TabsRenderProps> \| undefined`	—	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
`translate`	`"yes" \| "no" \| undefined`	—	—

DOM props (4)

Prop	Type	Default	Description
`defaultSelectedKey`	`Key \| undefined`	—	The initial selected keys in the collection (uncontrolled).
`isDisabled`	`boolean \| undefined`	—	Whether the TabList is disabled. Shows that a selection exists, but is not available in that circumstance.
`onSelectionChange`	`((key: Key) => void) \| undefined`	—	Handler that is called when the selection changes.
`selectedKey`	`Key \| undefined`	—	The currently selected key in the collection (controlled).

Theme this component via createDesignTheme({ components: { tabs: … } }). See Customize for the full override API.

Public classes and data attributes from @var-ui/core tabs().

root

Name	Example	Description
`class`	`var-ui-tabs`	Root / part class name

list

Name	Example	Description
`class`	`var-ui-tabs__list`	Root / part class name

tab

Name	Example	Description
`class`	`var-ui-tabs__tab`	Root / part class name

panel

Name	Example	Description
`class`	`var-ui-tabs__panel`	Root / part class name

Apply via `recipeProps(recipe(…))` or copy the class / data attributes onto your markup.