React Tabs Component API

Tabs API

Explore the API reference for the React Tabs component and discover how to effectively utilize its props for customization.

On this page

import { CTab } from '@coreui/react'
// or
import CTab from '@coreui/react/src/components/tabs/CTab'

Property	Default	Type
className#	-	`string`
A string of all className you want applied to the base component.
disabled#	-	`boolean`
Toggle the disabled state for the component.
itemKey#	-	`string`, `number`
Item key.

import { CTabContent } from '@coreui/react'
// or
import CTabContent from '@coreui/react/src/components/tabs/CTabContent'

Property	Default	Type
className#	-	`string`
A string of all className you want applied to the base component.

import { CTabList } from '@coreui/react'
// or
import CTabList from '@coreui/react/src/components/tabs/CTabList'

Property	Default	Type
className#	-	`string`
A string of all className you want applied to the base component.
layout#	-	`'fill'`, `'justified'`
Specify a layout type for component.
variant#	-	`'enclosed'`, `'enclosed-pills'`, `'pills'`, `'tabs'`, `'underline'`, `'underline-border'`
Set the nav variant to tabs or pills.

import { CTabPanel } from '@coreui/react'
// or
import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel'

Property	Default	Type
className#	-	`string`
A string of all className you want applied to the base component.
itemKey#	-	`string`, `number`
Item key.
onHide#	-	`() => void`
Callback fired when the component requests to be hidden.
onShow#	-	`() => void`
Callback fired when the component requests to be shown.
transition#	`true`	`boolean`
Enable fade in and fade out transition.
visible#	-	`boolean`
Toggle the visibility of component.

import { CTabs } from '@coreui/react'
// or
import CTabs from '@coreui/react/src/components/tabs/CTabs'

Property	Default	Type
activeItemKey#	-	`string`, `number`
Controls the currently active tab. When provided, the component operates in a controlled mode. You must handle tab switching manually by updating this prop. const [activeTab, setActiveTab] = useState(0); <CTabs activeItemKey={activeTab} onChange={setActiveTab} />
className#	-	`string`
A string of all className you want applied to the base component.
defaultActiveItemKey#	-	`string`, `number`
Sets the initially active tab when the component mounts. After initialization, the component manages active tab changes internally. Use `defaultActiveItemKey` for uncontrolled usage. <CTabs defaultActiveItemKey={1} />
onChange#	-	`(value: string \| number) => void`
Callback fired when the active tab changes. In controlled mode (`activeItemKey` provided), you must update `activeItemKey` yourself based on the value received. In uncontrolled mode, this callback is called after internal state updates. <CTabs onChange={(key) => console.log('Tab changed to', key)} />