Skip to main content

Tabs

Examples

Tabs

Renders tabs and their tab headers

Academic & Government

Code
<Tabs id="tabs-example">
  <Tab title="Academic & Government">
    <Text>
      Academic & Government
    </Text>
  </Tab>
  <Tab title="Health">
    <Text>
      Health
    </Text>
  </Tab>
  <Tab title="Industry">
    <Text>
      Industry
    </Text>
  </Tab>
  <Tab title="Cabbage">
    <Text>
      Cabbage
    </Text>
  </Tab>
</Tabs>

With focusable children

Renders tabs and their tab headers

Code
<Tabs
  containsFocusables
  id="tabs-example"
>
  <Tab title="Academic & Government">
    <Button>
      Academic & Government
    </Button>
  </Tab>
  <Tab title="Health">
    <Button>
      Health
    </Button>
  </Tab>
  <Tab title="Industry">
    <Button>
      Industry
    </Button>
  </Tab>
  <Tab title="Cabbage">
    <Button>
      Cabbage
    </Button>
  </Tab>
</Tabs>

Props

Tabs

id

string

A unique id that is used for determining the ids of the tabs and tab panels. This ensures there are no id conflicts when there are more than two Tabs components on a page.

containsFocusables

boolean

Default: false

Tab

title

string