Tabs

A component with multiple panels activated by an interactive tab list.

Source link opens in new window

import { Tabs, Tab, TabPanel } from '@deque/cauldron-react'

Examples#

Horizontal#

By default, the tab list will be horizontal above the tab panel.

Tab 1
Tab 2
Tab 3

Panel for Horizontal Tabs (1)

Panel for Horizontal Tabs (2)

Panel for Horizontal Tabs (3)

function HorizontalTabs() {
  const tabRef1 = useRef()
  const tabRef2 = useRef()
  const tabRef3 = useRef()

  return (
    <>
      <Tabs aria-label="Horizontal Tabs">
        <Tab target={tabRef1}>Tab 1</Tab>
        <Tab target={tabRef2}>Tab 2</Tab>
        <Tab target={tabRef3}>Tab 3</Tab>
      </Tabs>
      <TabPanel ref={tabRef1}>
        Panel for Horizontal Tabs (1)
      </TabPanel>
      <TabPanel ref={tabRef2}>
        Panel for Horizontal Tabs (2)
      </TabPanel>
      <TabPanel ref={tabRef3}>
        Panel for Horizontal Tabs (3)
      </TabPanel>
    </>
  )
}

Vertical#

Alternatively, the tab list can also be placed vertically to the left of the tab panel.

Tab 1
Tab 2
Tab 3

Panel for Vertical Tabs (1)

Panel for Vertical Tabs (2)

Panel for Vertical Tabs (3)

function VerticalTabs() {
  const tabRef1 = useRef()
  const tabRef2 = useRef()
  const tabRef3 = useRef()

  // Panels need a min-height to match the # of tab items
  const panelStyles = { minHeight: '10rem' }

  return (
    <>
      <Tabs aria-label="Vertical Tabs" orientation="vertical">
        <Tab target={tabRef1}>Tab 1</Tab>
        <Tab target={tabRef2}>Tab 2</Tab>
        <Tab target={tabRef3}>Tab 3</Tab>
      </Tabs>
      <TabPanel style={panelStyles} ref={tabRef1}>
        Panel for Vertical Tabs (1)
      </TabPanel>
      <TabPanel style={panelStyles} ref={tabRef2}>
        Panel for Vertical Tabs (2)
      </TabPanel>
      <TabPanel style={panelStyles} ref={tabRef3}>
        Panel for Vertical Tabs (3)
      </TabPanel>
    </>
  )
}

Thin#

Additionally, there is a thin variant with reduced spacing within the tab list.

Tab 1
Tab 2
Tab 3

Panel for Thin Tabs (1)

Panel for Thin Tabs (2)

Panel for Thin Tabs (3)

function ThinTabs() {
  const tabRef1 = useRef()
  const tabRef2 = useRef()
  const tabRef3 = useRef()

  return (
    <>
      <Tabs aria-label="Thin Tabs" thin>
        <Tab target={tabRef1}>Tab 1</Tab>
        <Tab target={tabRef2}>Tab 2</Tab>
        <Tab target={tabRef3}>Tab 3</Tab>
      </Tabs>
      <TabPanel ref={tabRef1}>
        Panel for Thin Tabs (1)
      </TabPanel>
      <TabPanel ref={tabRef2}>
        Panel for Thin Tabs (2)
      </TabPanel>
      <TabPanel ref={tabRef3}>
        Panel for Thin Tabs (3)
      </TabPanel>
    </>
  )
}

Props#

Tabs#

Name	Type	Default	Description
children Required	React.ReactNode		Child content.
initialActiveIndex	number	0	The initial active tab.
thin	boolean	false	Thin variant of tabs.
orientation	horizontal \| vertical	horizontal	Vertical or horizontal orientation of the tab list.
onChange	function		Callback function that gets invoked when the active tab changes.
aria-label	string		A label for tabs is required. This means you must provide either an aria-label or aria-labelledby prop.
aria-labelledby	string		A label for tabs is required. This means you must provide either an aria-label or aria-labelledby prop.

Tab#

Name	Type	Description
children	React.ReactNode	Child content.
className	string	Class name string.
target Required	React.RefObject<HTMLDivElement> \| HTMLElement	Pointer to the targeted TabPanel to display when the tab is active.
ref	React.RefObject<HTMLLIElement>	A ref pointed to the element rendered by this component.

TabPanel#

Name	Type	Description
children	React.ReactNode	Child content.
className	string	Class name string.
ref	React.RefObject<HTMLDivElement>	A ref pointed to the element rendered by this component.

Edit this page on GitHub

On This Page