@contentful/f36-tabs

Forma 36: Tabs component

Usage no npm install needed!

<script type="module">
  import contentfulF36Tabs from 'https://cdn.skypack.dev/@contentful/f36-tabs';
</script>

README

title: 'Tabs' slug: /components/tabs/ github: 'https://github.com/contentful/forma-36/tree/master/packages/components/tabs' storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/components-tabs' typescript: ./src/Tabs.tsx,./src/Tab.tsx,./src/TabPanel.tsx,./src/TabList.tsx

Tabs is a component that makes navigating between sections of related content possible, displaying one section at a time.

Use Tabs if the content can be separated into sections that make sense as standalone pieces of information. Be aware that the users will not see all the content at the same time. Make sure the first section is the most relevant one.

Import

import { Tabs } from '@contentful/f36-components';
// or
import { Tabs } from '@contentful/f36-tabs';

Examples

Basic

With divider

By default, Tabs has no divider, but you can add it by providing variant prop to the Tabs.List

With vertical divider:

With horizontal divider:

With default open tab

With disabled tab

Controlled Tabs

By default, Tabs is an uncontrolled component, but you can make it controlled by providing currentTab and onTabChange props.

Props (API reference)

Tabs

Tab

TabPanel

TabList

Content guidelines

  • every Tab should have concise copy
  • all content within a Tab should be related to it's label
  • to ensure an optimal cognitive load for users, do not use more than six (6) Tabs at any given time