Tabs
Use Tabs to organize related content in a single view. This helps users navigate related content without having to switch contexts.
Used for this
- To filter information into easily parsable views
- To organize related content and controls within a single page
How to use it
Default
The typical usage of a Tab component.
Disabled
Individual tabs can be disabled to prevent users from interacting with them.
Orientation
Tab layout is horizontal by default and can also stack vertically.
Configuration
- Name8.76.4•View source•View on npm
- Installnpm install @zendeskgarden/react-tabs
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Tab, TabList, TabPanel, Tabs } from '@zendeskgarden/react-tabs'
API
Tab
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | – | Indicates that the element is not interactive |
item | any | – | Defines a unique value to identify the tab. Provided to the onChange event in the Tabs component. |
TabList
Extends HTMLAttributes<HTMLDivElement>
TabPanel
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
item | any | – | Defines a value used to match a tab panel with its associated tab |
Tabs
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isVertical | boolean | – | Arranges the tabs vertically |
onChange | – | Handles tab selection Parameters selectedItem The selected tab's item value | |
selectedItem | any | – | Specifies the currently selected tab |