Tabs

Guidelines React

Github Storybook Markdown Copy for LLM

Tabs are used to allow users to navigate quickly between views within the same context.

Import

import { Tabs } from "@cfa/react-core";

Live Editor

Examples

Color

The color prop is set to "primary" red by default, use "secondary" for blue.

Disabled

The isDisabled prop can disable the all Tabs, or one or more single Tab.

Force Mount

The forceMount prop can be used to force the tab panel to mount even when it is not selected. This is useful for keeping the state of the panel when switching between tabs.

Fullwidth

The fullWidth prop can be used to make the tabs take up the full width of the container.

Scrolling

Tabs Nested

Tabs nested within Tabs are not preferred by Design UX Patterns/Standards, but are possible to achieve.

Props

Visit the Documentation Site for the full list of props.

Tabs.Root

Name	Type	Default	Description
alignment	"left" | "center" | "right"	left	Determines the alignment of the Tabs.
color	"primary" | "secondary"	primary	Determines the color of the Tabs.
fullWidth	boolean	false	Determines if the Tabs should be a fluid full width.
aria-describedby	string	-	Identifies the element (or elements) that describes the object.
aria-details	string	-	Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-label	string	-	Defines a string value that labels the current element.
aria-labelledby	string	-	Identifies the element (or elements) that labels the current element.
children	ChildrenOrFunction<TabsRenderProps>	-	The children of the component. A function may be provided to alter the children based on component state.
className	ClassNameOrFunction<TabsRenderProps>	'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.
defaultSelectedKey	Key	-	The initial selected keys in the collection (uncontrolled).
dir	string	-	-
disabledKeys	Iterable<Key>	-	The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
hidden	boolean	-	-
id	string	-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
inert	boolean	-	-
isDisabled	boolean	-	Whether the TabList is disabled. Shows that a selection exists, but is not available in that circumstance.
keyboardActivation	"automatic" | "manual"	'automatic'	Whether tabs are activated automatically on focus or manually.
lang	string	-	-
onAnimationEnd	AnimationEventHandler<HTMLDivElement>	-	-
onAnimationEndCapture	AnimationEventHandler<HTMLDivElement>	-	-
onAnimationIteration	AnimationEventHandler<HTMLDivElement>	-	-
onAnimationIterationCapture	AnimationEventHandler<HTMLDivElement>	-	-
onAnimationStart	AnimationEventHandler<HTMLDivElement>	-	-
onAnimationStartCapture	AnimationEventHandler<HTMLDivElement>	-	-
onAuxClick	MouseEventHandler<HTMLDivElement>	-	-
onAuxClickCapture	MouseEventHandler<HTMLDivElement>	-	-
onClick	MouseEventHandler<HTMLDivElement>	-	-
onClickCapture	MouseEventHandler<HTMLDivElement>	-	-
onContextMenu	MouseEventHandler<HTMLDivElement>	-	-
onContextMenuCapture	MouseEventHandler<HTMLDivElement>	-	-
onDoubleClick	MouseEventHandler<HTMLDivElement>	-	-
onDoubleClickCapture	MouseEventHandler<HTMLDivElement>	-	-
onGotPointerCapture	PointerEventHandler<HTMLDivElement>	-	-
onGotPointerCaptureCapture	PointerEventHandler<HTMLDivElement>	-	-
onLostPointerCapture	PointerEventHandler<HTMLDivElement>	-	-
onLostPointerCaptureCapture	PointerEventHandler<HTMLDivElement>	-	-
onMouseDown	MouseEventHandler<HTMLDivElement>	-	-
onMouseDownCapture	MouseEventHandler<HTMLDivElement>	-	-
onMouseEnter	MouseEventHandler<HTMLDivElement>	-	-
onMouseLeave	MouseEventHandler<HTMLDivElement>	-	-
onMouseMove	MouseEventHandler<HTMLDivElement>	-	-
onMouseMoveCapture	MouseEventHandler<HTMLDivElement>	-	-
onMouseOut	MouseEventHandler<HTMLDivElement>	-	-
onMouseOutCapture	MouseEventHandler<HTMLDivElement>	-	-
onMouseOver	MouseEventHandler<HTMLDivElement>	-	-
onMouseOverCapture	MouseEventHandler<HTMLDivElement>	-	-
onMouseUp	MouseEventHandler<HTMLDivElement>	-	-
onMouseUpCapture	MouseEventHandler<HTMLDivElement>	-	-
onPointerCancel	PointerEventHandler<HTMLDivElement>	-	-
onPointerCancelCapture	PointerEventHandler<HTMLDivElement>	-	-
onPointerDown	PointerEventHandler<HTMLDivElement>	-	-
onPointerDownCapture	PointerEventHandler<HTMLDivElement>	-	-
onPointerEnter	PointerEventHandler<HTMLDivElement>	-	-
onPointerLeave	PointerEventHandler<HTMLDivElement>	-	-
onPointerMove	PointerEventHandler<HTMLDivElement>	-	-
onPointerMoveCapture	PointerEventHandler<HTMLDivElement>	-	-
onPointerOut	PointerEventHandler<HTMLDivElement>	-	-
onPointerOutCapture	PointerEventHandler<HTMLDivElement>	-	-
onPointerOver	PointerEventHandler<HTMLDivElement>	-	-
onPointerOverCapture	PointerEventHandler<HTMLDivElement>	-	-
onPointerUp	PointerEventHandler<HTMLDivElement>	-	-
onPointerUpCapture	PointerEventHandler<HTMLDivElement>	-	-
onScroll	UIEventHandler<HTMLDivElement>	-	-
onScrollCapture	UIEventHandler<HTMLDivElement>	-	-
onSelectionChange	(key: Key) => void	-	Handler that is called when the selection changes.
onTouchCancel	TouchEventHandler<HTMLDivElement>	-	-
onTouchCancelCapture	TouchEventHandler<HTMLDivElement>	-	-
onTouchEnd	TouchEventHandler<HTMLDivElement>	-	-
onTouchEndCapture	TouchEventHandler<HTMLDivElement>	-	-
onTouchMove	TouchEventHandler<HTMLDivElement>	-	-
onTouchMoveCapture	TouchEventHandler<HTMLDivElement>	-	-
onTouchStart	TouchEventHandler<HTMLDivElement>	-	-
onTouchStartCapture	TouchEventHandler<HTMLDivElement>	-	-
onTransitionCancel	TransitionEventHandler<HTMLDivElement>	-	-
onTransitionCancelCapture	TransitionEventHandler<HTMLDivElement>	-	-
onTransitionEnd	TransitionEventHandler<HTMLDivElement>	-	-
onTransitionEndCapture	TransitionEventHandler<HTMLDivElement>	-	-
onTransitionRun	TransitionEventHandler<HTMLDivElement>	-	-
onTransitionRunCapture	TransitionEventHandler<HTMLDivElement>	-	-
onTransitionStart	TransitionEventHandler<HTMLDivElement>	-	-
onTransitionStartCapture	TransitionEventHandler<HTMLDivElement>	-	-
onWheel	WheelEventHandler<HTMLDivElement>	-	-
onWheelCapture	WheelEventHandler<HTMLDivElement>	-	-
render	DOMRenderFunction<"div", TabsRenderProps>	-	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.
selectedKey	Key	-	The currently selected key in the collection (controlled).
slot	string	-	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>	-	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"	-	-

Tabs.List

Tabs.Item

Tabs.Panel