Tabs
Component for building tabs.
The <Tabs> component allows you to organize related content into multiple sections. They allow the user to navigate between groups of information that appear within the same context.
Anatomy
<Tabs> consist of a tab list with one or more visually separated tabs. Each tab has associated content, and only the selected tab's content is shown. Each tab can be clicked, tapped, or navigated to via arrow keys.
- Tab list: Holds multiple tabs. Use the
<Tabs.List>component within<Tabs>to group tabs that a user can switch between. - Tab: Use
<Tabs.Item>inside<Tabs.List>to add a title for an individual item. A tab has a clear signifier that marks which tabs is displaying content. - Tab panel: Shows the content to the selected Tab.
Info
<Tabs> is a so called compound component. If you don't know what that means or you want to explore more
about it you find a tutorial for this topic in our reference
app.
Appearance
The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.
| Property | Type | Description |
|---|---|---|
variant | - | The available variants of this component. |
size | - | The available sizes of this component. |
Usage
<Tabs> are used to organize groups of related content that are at the same level of hierarchy, allowing users to
navigate views without leaving the page.
Important note
The example show how to connect the <Tab.List> item with the <Tab.Panel>. It is necessary that both
components using the same id.
Events
import { Headline, Tabs, TabsProps } from '@marigold/components';export default (props: TabsProps) => ( <> <Headline level="2">Events</Headline> <Tabs aria-label="tabs" {...props}> <Tabs.List aria-label="Events"> <Tabs.Item id="upcoming">Upcoming</Tabs.Item> <Tabs.Item id="past">Past</Tabs.Item> <Tabs.Item id="cancelled">Cancelled</Tabs.Item> </Tabs.List> <Tabs.TabPanel id="upcoming">Upcoming events.</Tabs.TabPanel> <Tabs.TabPanel id="past">Past events.</Tabs.TabPanel> <Tabs.TabPanel id="cancelled">Cancelled events</Tabs.TabPanel> </Tabs> </>);- Use only one row of tabs
- Position the tab list above the tab panel
- Write short tab labels
Arrangement of tabs
Arrange tab content so the most used content is first in the list and selected by default. This maximizes visibility of frequently accessed content and lowers its interaction cost.
Tab labels
Users should be able to predict what they'll find when selecting a tab. Since unselected tabs conceal their content, labels with strong information scent are crucial for users to engage with them.
Don't mix and match tab types
Mixing in-page and navigation tabs within one tab control will disorient users. In-page tabs should have similar content and keep users where they are. Navigation tabs should have dissimilar content and navigate users away from the current page.
Props
Tabs
Prop
Type
Tabs.List
Prop
Type
Tabs.Item
Prop
Type
Tabs.TabPanel
Prop
Type
Alternative components
Accordion: Accordions are another effective method for collapsing content. Accordions can utilize longer labels and work well to organize short pieces of content such as FAQs.