Tabs

View Source

A single content area with multiple panels, each associated with a header in a list.

Tab 1

Tab 2

Tab 3

Tab 4

Content for tab 1

const tabs = [1, 2, 3, 4]
render(
  <Tabs>
    <Tabs.TabList minWidth={60}>
      {tabs.map((tab, index) => (
        <Tabs.Tab key={tab} disabled={index === 2}>
          Tab {tab}
        </Tabs.Tab>
      ))}
    </Tabs.TabList>
    <Tabs.TabPanels>
      {tabs.map((tab) => (
        <Tabs.TabPanel key={tab} padding={2}>
          Content for tab {tab}
        </Tabs.TabPanel>
      ))}
    </Tabs.TabPanels>
  </Tabs>
)

const tabs = [1, 2, 3, 4]
render(
  <Tabs>
    <Tabs.TabList minWidth={60}>
      {tabs.map((tab, index) => (
        <Tabs.Tab key={tab} disabled={index === 2}>
          Tab {tab}
        </Tabs.Tab>
      ))}
    </Tabs.TabList>
    <Tabs.TabPanels>
      {tabs.map((tab) => (
        <Tabs.TabPanel key={tab} padding={2}>
          Content for tab {tab}
        </Tabs.TabPanel>
      ))}
    </Tabs.TabPanels>
  </Tabs>
)

Tab 1

Tab 2

Tab 3

Tab 4

Content for tab 1

const tabs = [1, 2, 3, 4]
render(
  <Card as={Tabs} axis="horizontal">
    <Tabs.TabList axis="vertical" distribution="start" minWidth={20}>
      {tabs.map((tab) => (
        <Tabs.Tab key={tab}>Tab {tab}</Tabs.Tab>
      ))}
    </Tabs.TabList>
    <Tabs.TabPanels>
      {tabs.map((tab) => (
        <Tabs.TabPanel key={tab} padding={2}>
          Content for tab {tab}
        </Tabs.TabPanel>
      ))}
    </Tabs.TabPanels>
  </Card>
)

const tabs = [1, 2, 3, 4]
render(
  <Card as={Tabs} axis="horizontal">
    <Tabs.TabList axis="vertical" distribution="start" minWidth={20}>
      {tabs.map((tab) => (
        <Tabs.Tab key={tab}>Tab {tab}</Tabs.Tab>
      ))}
    </Tabs.TabList>
    <Tabs.TabPanels>
      {tabs.map((tab) => (
        <Tabs.TabPanel key={tab} padding={2}>
          Content for tab {tab}
        </Tabs.TabPanel>
      ))}
    </Tabs.TabPanels>
  </Card>
)

Props

Themeable

Accepts StackView props.

Use the tabs key in ThemeProvider to customize the default properties of this component.

activeIndexnumber

Controls the active Tab and TabPanel.

childrenReactReactNode

Usually accepts TabList and TabPanel components.

defaultActiveIndexnumber

Used in place of activeIndex for uncontrolled components.

onChangeFunction

Called when the active tab should change.

returns nextActiveIndex

Props

PreviousTab NextToggleSwitch