# Tabs component for Stripe Apps Use tabs to display sections of content. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/tabs?app-sdk-version=8. 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: ```js import {Tabs, Tab, TabList, TabPanel, TabPanels} from '@stripe/ui-extension-sdk/ui'; ``` ### Tabs props | Property | Type | | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Required) `React.ReactNode` One or more `TabList` or `TabPanels` components. | | `fitted` | (Optional) `boolean | undefined` Whether or not the `TabList` should take up the entire width of its container. | | `onSelectionChange` | (Optional) `((event: React.Key) => void) | undefined` Callback to be fired when a `Tab` is selected. | | `selectedKey` | (Optional) `React.Key | undefined` Key of the selected `Tab` when using it as a controlled component. Use with `onSelectionChange` to control the tab selection state. | | `size` | (Optional) `("small" | "medium" | "large") | undefined` 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](https://reactjs.org/docs/lists-and-keys.html#keys). ### TabList props | Property | Type | | ---------- | --------------------------------------------------------------- | | `children` | (Required) `React.ReactNode` One or more `Tab` components. | ### Tab props | Property | Type | | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Required) `React.ReactNode` The contents of the component. | | `disabled` | (Optional) `boolean | undefined` Whether or not the tab should be disabled. | | `id` | (Optional) `string | undefined` A unique identifier that controls selection using the `Tabs` component’s `selectedKey` prop. | | `tabKey` | (Optional)(Deprecated) use the `id` prop instead. `(React.Key | null) | undefined` A unique identifier to use with the `Tabs` `selectedKey`. | ## 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](https://reactjs.org/docs/lists-and-keys.html#keys). ### TabPanel props | Property | Type | | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Required) `React.ReactNode` The contents of the component. | | `id` | (Optional) `string | undefined` A unique identifier that controls selection using the `Tabs` component’s `selectedKey` prop. | | `tabKey` | (Optional)(Deprecated) use the `id` prop instead. `(React.Key | null) | undefined` A unique identifier to use with the `Tabs` `selectedKey`. | ## 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. # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/tabs?app-sdk-version=9. 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: ```js import {Tabs, Tab, TabList, TabPanel, TabPanels} from '@stripe/ui-extension-sdk/ui'; ``` ### Tabs props | Property | Type | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Required) `React.ReactNode` One or more `TabList` or `TabPanels` components. | | `fitted` | (Optional) `boolean | undefined` Whether or not the `TabList` should take up the entire width of its container. | | `onSelectionChange` | (Optional) `((event: string) => void) | undefined` Callback to be fired when a `Tab` is selected. | | `selectedKey` | (Optional) `string | undefined` The `id` of the selected `Tab` when using it as a controlled component. Use with `onSelectionChange` to control the tab selection state. | | `size` | (Optional) `("small" | "medium" | "large") | undefined` 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 `id` prop. If you render `Tab` components using a `map` function, you must still add a `key` to satisfy [the rules of React](https://reactjs.org/docs/lists-and-keys.html#keys). ### TabList props | Property | Type | | ---------- | --------------------------------------------------------------- | | `children` | (Required) `React.ReactNode` One or more `Tab` components. | ### Tab props | Property | Type | | ---------- | --------------------------------------------------------------------------------------------------------------------- | | `children` | (Required) `React.ReactNode` The contents of the component. | | `id` | (Required) `string` A unique identifier that controls selection using the `Tabs` component’s `selectedKey` prop. | | `disabled` | (Optional) `boolean | undefined` Whether or not the tab should be disabled. | ## TabPanels 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 `id` prop. If you render `TabPanel` components using a `map` function, you must still add a `key` to satisfy [the rules of React](https://reactjs.org/docs/lists-and-keys.html#keys). ### TabPanels props | Property | Type | | ---------- | ------------------------------------------------------------------ | | `children` | (Required) `React.ReactNode` One or more TabPanel components. | ### TabPanel props | Property | Type | | ---------- | --------------------------------------------------------------------------------------------------------------------- | | `children` | (Required) `React.ReactNode` The contents of the component. | | `id` | (Required) `string` A unique identifier that controls selection using the `Tabs` component’s `selectedKey` prop. | ## 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 `id` prop from `Tab` and `TabPanel` to create a controlled component. ## See also - [Design patterns to follow](https://docs.stripe.com/stripe-apps/patterns.md) - [Style your app](https://docs.stripe.com/stripe-apps/style.md) - [UI testing](https://docs.stripe.com/stripe-apps/ui-testing.md)