Coming from Orbiter, you should be aware of the following changes:
orientationhas been removed, not supported.disabledhas been removed, not supported.manualhas been removed. Refer to this sample to quickly match old sizes.
Tabs
Tabs are used to organize content by grouping similar information on the same page.
Tabs are used to group different but related content, allowing users to navigate views without leaving the page. They always contain at least two items and one tab is active at a time. Tabs can be used on full page layouts or in components such as modals, listbox, or side panels.
Anatomy
Structure
<Tabs> <TabList> /* (Required) A list of tabs */ <Tab> /* (Required) A tab in the TabList */ <Icon /> /* (Optional) An icon in the tab */ <Badge /> /* (Optional) A badge in the tab */ <Text /> /* (Optional) Text in the tab, required if using another element */ <Tag /> /* (Optional) A tag in the tab */ </Tab> </TabList> <TabPanel /> /* (Required) A panel for the TabList */ </Tabs>
Composed Components
A Tab uses the following components:
Usage
Sizes
Tabs can vary in size.
Icon
A tab can contain an icon.
Lozenge
A tab can contain a lozenge.
Badge
A tab can contain a badge.
Dynamic Tabs
Tabs items can be rendered dynamically.
Manually Activated Tabs
By default, tabs are activated automatically. This means when you use the arrow keys to change tabs, the tab is activated and focused.
The content of a tab should ideally be preloaded. However, if switching to a tab panel causes a network request and possibly a page refresh, there might be some notable latency and this might affect the experience for keyboard and screen reader users.
In this scenario, you should use a manually activated tab, which moves focus without activating the tabs. With the focus on a specific tab, users can activate a tab by pressing Space or Enter.
Variants
Tabs can use different variants.
Fluid
A tabs component can split the width of its container equally between its tabs.
Controlled
The selectedKey state can be handled in a controlled mode.
Disabled
All tabs can be disabled using the isDisabled prop.
Disabled items
An individual Tab can be disabled with the isDisabled prop. Disabled tabs are not focusable, selectable, or keyboard navigable.
In dynamic collections, it may be more convenient to use the disabledKeys prop at the Tabs level instead of isDisabled on individual tabs.
Each key in this list corresponds with the id prop passed to the Tab component, or automatically derived from the values passed to the items prop.
A tab is considered disabled if its id exists in disabledKeys or if it has isDisabled.
Embedded
Tabs can be embedded in other components.
Links
Tabs can be used as links.
Best Practices
Tabs should:
- Represent the same kind of content, such as a list-view with different filters applied. Don't use tabs to group content that is dissimilar.
- Only be active one at a time.
- Not force users to jump back and forth to do a single task. Users should be able to complete this work and find what they need under each tab.
- Not be used for primary navigation.
Overflowing content
When the tab group's width is larger than the space necessary to display all of the tabs, we group them within a menu. This grouping happens when two or more tabs cannot be visible in the viewport. We add tabs to the menu as the viewport gets narrower. The grouping is always at the end of the tab group. However, the menu will never regroup all of the tabs of the tab group and will always keep the most important tab (the first one in the tab group) always visible.
When a user selects a tab from the tab grouping menu, the selected tab is displayed in the tab group and takes the position of the tab that was to the left of the grouping.
Displaying tabs in grouping
When users click on the tab grouping button, we display the tabs in the same order they would have appeared without the grouping in a Listbox component. All details like count, icons and upsell are displayed in the listbox.
Props
Tabs
variant?
The variant of the tabs.
Defaults to standalone.
size?
The size of the tabs.
Defaults to sm.
isFluid?
Whether or not the tabs takes up the width of its container.
selectedKey?
The currently selected key in the collection (controlled).
defaultSelectedKey?
The initial selected key in the collection (uncontrolled).
isDisabled?
Whether the TabList is disabled. Shows that a selection exists, but is not available in that circumstance.
disabledKeys?
The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
keyboardActivation?
Whether tabs are activated automatically on focus or manually.
Defaults to 'automatic'.
children?
The children of the component.
style?
The inline style for the element.
className?
The CSS className for the element.
TabList
Tab
isDisabled?
Whether the tab is disabled.
href?
A URL to link to. See MDN.
hrefLang?
Hints at the human language of the linked URL. SeeMDN.
target?
The target window for the link. See MDN.
rel?
The relationship between the linked resource and the current page. See MDN.
download?
Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.
ping?
A space-separated list of URLs to ping when the link is followed. See MDN.
referrerPolicy?
How much of the referrer to send when following the link. See MDN.
routerOptions?
Options for the configured client side router.
children?
The children of the component.
className?
The CSS className for the element.
style?
The inline style for the element.
TabPanel
shouldForceMount?
Whether to mount the tab panel in the DOM even when it is not currently selected. Inactive tab panels are inert and cannot be interacted with. They must be styled appropriately so this is clear to the user visually.
Defaults to false.
children?
The children of the component.
className?
The CSS className for the element.
style?
The inline style for the element.