They're based on the Card component and have similar behaviour in terms of elevation. They can be used in place of a Card, or inside a Card as an inline component.
- Show adjacent pieces of content with an obvious relationship, e.g. "Electric | Gas"
- Content should not flow from one tab to another
- Tabs should not be used to compare content as only one panel can be viewed at a time
- If you are using more than three tabs, it may be more appropriate to consider an Accordion
- Don't use tabs to combine unrelated pieces of content, e.g. "Electric usage | Gas usage | Offers"
Live example
Availabile platforms
|
Platform |
Available |
|---|---|
|
Figma |
✓ |
|
Web (@ovotech/element) |
✓ |
|
App (@ovotech/element-native) |
✓ |
How to use it
Accessibility
Similar to Radio Field, tabs can be navigated with arrow keys. This will select a new tab and change the content to the corresponding panel. The active tab will be the only tabbable element, so the user can easily tab to other elements on the page.
Defining your tabs
Tab content should be related content that is separated into, at most, a few sections. Ideally, no more than 3-4 tabs should be used.
Choosing titles
Consider the goal of the tab and pick one noun to describe the topic. For tone of voice, dial up our straight-talking and inclusive traits. Read our tone of voice guidelines for details.
- Use concrete nouns
- Be concise
- Tell it like it is – the majority of primary tabs should be nouns
- Represent what the user will find in their tabs
- Use tabs to separate related or like topics
- Don’t be elaborate, as tabs should be purely directional
- Don’t use more than two words in the tab title
- Don’t use ambiguous labels
Setting tab widths
Tabs by default will be responsive and displayed as full width below the smallest breakpoint. You can override this by setting fullWidth="always" and fullWidth="never".
Integrating into components
Like Cards, tabs that are placed inside of a raised component can be flattened by using adding the inline property.
Setting a default tab
Default selected tab can be set using onSelected and defaultSelected properties.
Properties
Tabs
|
Name |
Values |
Default |
|---|---|---|
|
defaultSelected |
Number |
|
|
onSelected |
Function |
|
|
fullWidth |
always never small |
small |
|
inline |
Boolean |
false |
|
... |
JSX.IntrinsicElements["div"] |
|
TabList
|
Name |
Values |
Default |
|---|---|---|
|
fullWidth |
always never small |
|
|
setActiveTab |
(i: number) => void |
|
|
activeTab |
Number |
|
|
tabRefs |
React.RefObject<any>[] |
|
|
tabIds |
string[] |
|
|
inline |
Boolean |
|
|
... |
JSX.IntrinsicElements["ul"] |
|
Tab
|
Name |
Values |
Default |
|---|---|---|
|
onClick |
Function |
|
|
... |
JSX.IntrinsicElements["li"] |
|
TabPanel
|
Name |
Values |
Default |
|---|---|---|
|
hidden |
Boolean |
false |
|
... |
JSX.IntrinsicElements["section"] |
|
Checking for accessibility
User stories
The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.
- As a keyboard-only user, I want focus to move to the selected tab and then, using the arrow keys, I want to navigate through the tabs.
- As a screen reader user, I want to be able to understand that these elements are tabs, and which is currently selected.
- As a screen reader user, I only want content visible within the current tab to be readable. Content that is hidden in unselected tabs should not be readable.
- As someone with a colour vision deficiency, I want to be able to perceive which tab has been selected.
Test steps
Use these steps to check that the Tabs component has been implemented correctly:
- Turn on a screen reader.
- Navigate to a tab control using the Tab key.
- Verify that the role of the tab and its name are announced by the screen reader.
- Verify that focus can be moved through the related tabs using the arrow keys.
- Verify that the select tab can be identified as such by a screen reader.
- Navigating again with the Tab key, verify that focus moves to the next interactive item (either within the related tab content, or elsewhere on the page) and not the next tab.