React Tabs Component API

Tabs API

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

On this page

import{CTab}from'@coreui/react'
// or
importCTabfrom'@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
importCTabContentfrom'@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
importCTabListfrom'@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
importCTabPanelfrom'@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
importCTabsfrom'@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); <CTabsactiveItemKey={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. <CTabsdefaultActiveItemKey={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. <CTabsonChange={(key)=>console.log('Tab changed to', key)}/>