Top
TabPanel - Configuring tabs
TabPanel
The tabs in a <TabPanel /> component can be any valid React.Node. This means you can use any other React components as tabs/children inside the <TabPanel />.
There are two important props that can be used to configure <TabPanel /> tabs:
The <TabPanel /> component also exposes the following subcomponents, which can be used for additional control over the layout & configuration of the panel:
  • TabBody - can be used to customize the tab content
  • TabStrip - can be used to customize the tab strip, which is a wrapper around tab titles.
  • Tab - can be used to configure tabs.
    All properties that can be specified in tabProps can also be added on this component.
In the snippet above, using the <TabStrip /> after the <TabBody /> you get bottom-positioned tabs. To achieve this, you can also use tabPosition="bottom".
TabStrip can be used as a standalone component - see Using the TabStrip documentation page for more examples.
You can specify the following props:
  • tabs: React.Node[] - an array of ReactNode elements, which will be the tab titles
  • activeIndex - the index of the tab to render as active. **Controlled prop**!
  • defaultActiveIndex - uncontrolled version of `activeIndex`
  • onActivate - Fn(index) - function to be called when a new tab is clicked & activated.