React TabView

React TabView is a container component to group content with tabs.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import { TabView,TabPanel } from 'primereact/tabview';

Getting Started

Tabview element consists of one or more TabPanel elements and can either be used as a Controlled or Uncontrolled component.

Controlled Component

In controlled mode, activeIndex and onTabChange properties need to be defined to control the state.

<TabView activeIndex={this.state.activeIndex} onTabChange={(e) => this.setState({activeIndex: e.index})}>
    <TabPanel header="Header I">
        Content I
    </TabPanel>
    <TabPanel header="Header II">
        Content II
    </TabPanel>
    <TabPanel header="Header III">
        Content III
    </TabPanel>
</TabView>

Uncontrolled

In uncontrolled mode, no additional properties are required. Initial active tab can be provided using the activeIndex property in uncontrolled mode however it is evaluated at initial rendering and ignored in further updates. If you programmatically need to update the active tab, prefer to use the component as controlled.

<TabView>
    <TabPanel header="Header I">
        Content I
    </TabPanel>
    <TabPanel header="Header II">
        Content II
    </TabPanel>
    <TabPanel header="Header III">
        Content III
    </TabPanel>
</TabView>

Theming

TabView supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact TabView showcase for demos and documentation.