Tabs

Tabs organize content into multiple sections and allow users to navigate between them.


Import

NextUI exports 2 tabs-related components:

  • Tabs: The main component to display a tab list.
  • Tab: The component to display a tab item. The children of this component will be displayed as the content of the tab.

Usage

Dynamic

You can render tabs dynamically by using items prop.

Disabled

Disabled Item

Sizes

Radius

Colors

Variants

With Icons

Controlled

You can use the onSelectionChange and selectedKey props to control the selected tab.

With Form

Slots

  • base: The main tabs slot, it wraps the items and the panels.
  • tabList: The tab list slot, it wraps the tab items.
  • tab: The tab slot, it wraps the tab item.
  • tabContent: The tab content slot, it wraps the tab content.
  • cursor: The cursor slot, it wraps the cursor. This is only visible when disableAnimation=false
  • panel: The panel slot, it wraps the tab panel (content).

Custom Styles

You can customize the Tabs component by passing custom Tailwind CSS classes to the component slots.

Data Attributes

Tab has the following attributes on the base element:

  • data-selected: When the tab is selected.
  • data-disabled: When the tab is disabled.
  • data-hover: When the tab is being hovered. Based on useHover.
  • data-hover-selected: When the tab is being hovered and is not selected. Based on useHover and selected state.
  • data-focus: When the tab is being focused. Based on useFocusRing.
  • data-focus-visible: When the tab is being focused with the keyboard. Based on useFocusRing.
  • data-pressed: When the tab is pressed. Based on usePress.

Accessibility

  • Support for mouse, touch, and keyboard interactions on tabs.
  • Keyboard event support for arrows keys.
  • Support for disabled tabs.
  • Follows the tabs ARIA pattern, semantically linking tabs and their associated tab panels.
  • Focus management for tab panels without any focusable children.

API

Tabs Props

AttributeTypeDescriptionDefault
children*ReactNode | ((item: T) => ReactElement)The list of tabs.-
variantsolid | bordered | light | underlinedThe tabs appearance style.solid
colordefault | primary | secondary | success | warning | dangerThe tabs color theme.default
sizesm | md | lgThe tabs size.md
radiusnone | sm | md | lg | fullThe tabs border radius.-
fullWidthbooleanWhether the tabs should take the full width of its parent.false
itemsIterable<T>The list of tabs (dynamic).-
disabledKeysReact.Key[]The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.-
selectedKeyReact.KeyThe key for the currently selected item.-
defaultSelectedKeyReact.KeyThe key for the initially selected item.-
disallowEmptySelectionbooleanWhether the tabs should allow empty selection.false
keyboardActivationautomatic | manualWhether tabs are activated automatically on focus or manually.automatic
motionPropsMotionPropsThe props to modify the cursor framer motion animation. Use the variants API to create your own animation.-
disableCursorAnimationbooleanWhether the cursor should be hidden.false
isDisabledbooleanWhether the tab list should be disabled.false
disableAnimationbooleanWhether the tab list should be animated.false
classNamesRecord<"base"| "tabList"| "tab"| "tabContent"| "tabContent" | "cursor" | "panel", string>Allows to set custom class names for the card slots.-

Tabs Events

AttributeTypeDescription
onSelectionChange(key: React.Key) => anyHandler that is called when the selection changes.

Tab Props

AttributeTypeDescriptionDefault
children*ReactNodeThe content of the tab.-
titleReactNodeThe title of the tab.-
titleValuestringA string representation of the item's contents. Use this when the title is not readable.-

Motion Props

export type MotionProps = HTMLMotionProps<"div">; // @see https://www.framer.com/motion/