Tabs component for Stripe Apps
Use tabs to display sections of content.
Tabs are sections of content that display one panel of content at a time. The list of tab elements sits along the top edge of the currently displayed panel.
To add the Tabs
component to your app:
Tabs props
Property | Type |
---|---|
| Required
One or more |
| Optional
Whether or not the |
| Optional
Callback to be fired when a |
| Optional
Key of the selected |
| Optional
The size of the component. |
Tab
The TabList
component supports the selection of content. TabList
is made up of a collection of Tab
components. Each Tab
can be uniquely identified with a tabKey
prop. If you render Tab
components using a map
function, you must still add a key
to satisfy the rules of React.
TabList props
Property | Type |
---|---|
| Required
One or more |
Tab props
Property | Type |
---|---|
| Required
The contents of the component. |
| Optional
Whether or not the tab should be disabled. |
| Optional
A unique identifier that controls selection using the |
| OptionalDeprecated use the
A unique identifier to use with the |
TabPanel
The TabPanels
component supports displaying panels of content with Tabs. TabPanels
is made up of a collection of TabPanel
components. Each TabPanel
can be uniquely identified with a tabKey
prop. If you render TabPanel
components using a map
function, you must still add a key
to satisfy the rules of React.
TabPanel props
Property | Type |
---|---|
| Required
The contents of the component. |
| Optional
A unique identifier that controls selection using the |
| OptionalDeprecated use the
A unique identifier to use with the |
Small Tabs
Disabled Tabs
Unsupported uses
Tabs don’t support conditional content within fragments unless the fragment children are given the same key.
To avoid unsupported uses of Tabs, use components instead of fragments. Alternatively, give the children of fragments a shared key
.
Controlled Tabs
Use the selectedKey
prop from Tabs
in combination with the tabKey
prop from Tab
and TabPanel
to create a controlled component.