Tabs

Tabs are great to show segregate information in a non-navigating manner. When a tab is active its corresponding content is visible. Only one Tab can be active at a time and there is a visual treatment applied.

<form action="/submission">
    <SpacedGroup xs={16}>
      <Tabs defaultActiveTab={0} defaultFocusedTab={0} data-test="Tabs">
        <Grid>
          <TabsList data-test="TabsList">
            <Tab data-test="Tab.1">
              <UnderlineTab title="Tab 1" icon={<TeamIcon />} />
            
            <Tab data-test="Tab.2">
              <UnderlineTab title="Tab 2" icon={<TeamIcon />} />
            </Tab>
            <Tab data-test="Tab.3">
              <UnderlineTab title="Tab 3" icon={<TeamIcon />} />
            </Tab>
          </TabsList>
          <TabsPanels>
            <TabsPanel data-test="TabsPanel.1">
              <p>Content of panel 1</p>
            </TabsPanel>
            <TabsPanel data-test="TabsPanel.2">
              <p>Content of panel 2</p>
            </TabsPanel>
            <TabsPanel data-test="TabsPanel.3">
              <p>Content of panel 3</p>
            </TabsPanel>
          </TabsPanels>
        </Grid>
      </Tabs>
      <Tabs defaultActiveTab={2}>
        <Grid>
          <TabsList>
            <Tab>
              <UnderlineTab title="Tab 1" icon={<TeamIcon />} />
            </Tab>
            <Tab disabled>
              <UnderlineTab title="Tab 2" icon={<TeamIcon />} />
            </Tab>
            <Tab>
              <UnderlineTab title="Tab 3" icon={<TeamIcon />} />
            </Tab>
          </TabsList>
          <TabsPanels>
            <TabsPanel>
              <p>Content of panel 1</p>
            </TabsPanel>
            <TabsPanel>
              <p>Content of panel 2</p>
            </TabsPanel>
            <TabsPanel>
              <p>Content of panel 3</p>
            </TabsPanel>
          </TabsPanels>
        </Grid>
      </Tabs>
      <Tabs defaultActiveTab={2}>
        <Grid>
          <TabsList>
            <Tab disabled>
              <UnderlineTab title="Tab 1" icon={<TeamIcon />} />
            </Tab>
            <Tab disabled>
              <UnderlineTab title="Tab 2" icon={<TeamIcon />} />
            </Tab>
            <Tab>
              <UnderlineTab title="Tab 3" icon={<TeamIcon />} />
            </Tab>
          </TabsList>
          <TabsPanels>
            <TabsPanel>
              <p>Content of panel 1</p>
            </TabsPanel>
            <TabsPanel>
              <p>Content of panel 2</p>
            </TabsPanel>
            <TabsPanel>
              <p>Content of panel 3</p>
            </TabsPanel>
          </TabsPanels>
        </Grid>
      </Tabs>
      <Tabs defaultActiveTab={0}>
        <Grid>
          <TabsList>
            <Tab>
              <UnderlineTab title="Tab 1" icon={<TeamIcon />} />
            </Tab>
            <Tab disabled>
              <UnderlineTab title="Tab 2" icon={<TeamIcon />} />
            </Tab>
            <Tab disabled>
              <UnderlineTab title="Tab 3" icon={<TeamIcon />} />
            </Tab>
          </TabsList>
          <TabsPanels>
            <TabsPanel>
              <p>Content of panel 1</p>
            </TabsPanel>
            <TabsPanel>
              <p>Content of panel 2</p>
            </TabsPanel>
            <TabsPanel>
              <p>Content of panel 3</p>
            </TabsPanel>
          </TabsPanels>
        </Grid>
      </Tabs>
      <Tabs defaultActiveTab={1}>
        <Grid>
          <TabsList>
            <Tab disabled>
              <UnderlineTab title="Tab 1" icon={<TeamIcon />} />
            </Tab>
            <Tab>
              <UnderlineTab title="Tab 2" icon={<TeamIcon />} />
            </Tab>
            <Tab disabled>
              <UnderlineTab title="Tab 3" icon={<TeamIcon />} />
            </Tab>
          </TabsList>
          <TabsPanels>
            <TabsPanel>
              <p>Content of panel 1</p>
            </TabsPanel>
            <TabsPanel>
              <p>Content of panel 2</p>
            </TabsPanel>
            <TabsPanel>
              <p>Content of panel 3</p>
            </TabsPanel>
          </TabsPanels>
        </Grid>
      </Tabs>
      <Tabs defaultActiveTab={0}>
        <Grid>
          <TabsList>
            <Tab disabled>
              <UnderlineTab title="Tab 1" icon={<TeamIcon />} />
            </Tab>
            <Tab disabled>
              <UnderlineTab title="Tab 2" icon={<TeamIcon />} />
            </Tab>
            <Tab disabled>
              <UnderlineTab title="Tab 3" icon={<TeamIcon />} />
            </Tab>
          </TabsList>
          <TabsPanels>
            <TabsPanel>
              <p>Content of panel 1</p>
            </TabsPanel>
            <TabsPanel>
              <p>Content of panel 2</p>
            </TabsPanel>
            <TabsPanel>
              <p>Content of panel 3</p>
            </TabsPanel>
          </TabsPanels>
        </Grid>
      </Tabs>
    </SpacedGroup>
  </form>
</Playground>

Tab Render Props

Tab will accept a render prop or a Component, like UnderlineTab used above to provide the consumer full control of the user interface of the tab. The playground below will use render props and the following code block highlights its usage:

<Tab>
  {({ selected, disabled, focused }) => (
    <SpacedGroup center xs={4}>
      <TeamIcon />
      <span>Tab 1</span>
    </SpacedGroup>
  )}
</Tab>

Content of panel 1

Content of panel 2

Content of panel 3

<SpacedGroup>
    <Tabs defaultActiveTab={0}>
      <Grid>
        <TabsList>
          <Tab>
            {({ selected, disabled, focused }) => (
              <SpacedGroup center xs={4}>
                <TeamIcon />
                <span>Tab 1
              </SpacedGroup>
            )}
          </Tab>
          <Tab disabled>
            {({ selected, disabled, focused }) => (
              <SpacedGroup center xs={4}>
                <TeamIcon />
                <span>Tab 2</span>
              </SpacedGroup>
            )}
          </Tab>
          <Tab>
            {({ selected, disabled, focused }) => (
              <SpacedGroup center xs={4}>
                <TeamIcon />
                <span>Tab 3</span>
              </SpacedGroup>
            )}
          </Tab>
        </TabsList>
        <TabsPanels>
          <TabsPanel>
            <p>Content of panel 1</p>
          </TabsPanel>
          <TabsPanel>
            <p>Content of panel 2</p>
          </TabsPanel>
          <TabsPanel>
            <p>Content of panel 3</p>
          </TabsPanel>
        </TabsPanels>
      </Grid>
    </Tabs>
  </SpacedGroup>
</Playground>

Layout

Tabs don't control the layout of its tabs and content. Instead it allows the consumer to use its own Layout components!

Content of panel 2

Content of panel 3

<SpacedGroup>
    <Tabs defaultActiveTab={0}>
      <Grid>
        <TabsList>
          <Tab>
            <UnderlineTab placement="right" title="Tab 1" icon={<TeamIcon />} />
          
          <Tab>
            <UnderlineTab placement="right" title="Tab 2" icon={<TeamIcon />} />
          </Tab>
          <Tab>
            <UnderlineTab placement="right" title="Tab 3" icon={<TeamIcon />} />
          </Tab>
        </TabsList>
        <SpacedGroup>
          <TabsPanels>
            <TabsPanel>
              <p>
                Tabs don't control the layout of its tabs and content. Instead
                it allows the consumer to use its own Layout components!
              </p>
            </TabsPanel>
            <TabsPanel>
              <p>Content of panel 2</p>
            </TabsPanel>
            <TabsPanel>
              <p>Content of panel 3</p>
            </TabsPanel>
          </TabsPanels>
        </SpacedGroup>
      </Grid>
    </Tabs>
  </SpacedGroup>
</Playground>

Tabs

Tab Render Props

Layout

API

Tabs

TabsList

Tab

TabsPanels

TabsPanel

VersionOne Components v9.1.0