chakra-xui
@chakra-xui/tabs
An accessible tabs component.
The Tab and TabPanel elements are associated by their order in the tree.
None of the components are empty wrappers, each is associated with a real DOM
element in the document, giving you maximum control over styling and
composition.
Installation
yarn add @chakra-xui/tabs
# or
npm i @chakra-xui/tabsImport components
import { Tabs, TabList, TabPanels, Tab, TabPanel } from "@chakra-xui/react"Usage
<Tabs>
<TabList>
<Tab>One</Tab>
<Tab>Two</Tab>
<Tab>Three</Tab>
</TabList>
<TabPanels>
<TabPanel>
<p>one!</p>
</TabPanel>
<TabPanel>
<p>two!</p>
</TabPanel>
<TabPanel>
<p>three!</p>
</TabPanel>
</TabPanels>
</Tabs>Tab variants and color schemes
Tabs come in 6 different variants to style the tabs: line,enclosed,
enclosed-colored, soft-rounded, solid-rounded. Each variant comes it
different color schemes.
<Tabs variant="enclosed" colorScheme="red">
<TabList>
<Tab>One</Tab>
<Tab>Two</Tab>
</TabList>
<TabPanels>
<TabPanel>
<p>one!</p>
</TabPanel>
<TabPanel>
<p>two!</p>
</TabPanel>
</TabPanels>
</Tabs>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 TabPanel 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, it moves focus without activating the tabs. With focus on a specifc tab, users can activate a tab by pressing <kbd>Space</kbd> or <kbd>Enter</kbd>.
<Tabs isManual variant="enclosed">
<TabList>
<Tab>One</Tab>
<Tab>Two</Tab>
</TabList>
<TabPanels>
<TabPanel>
<p>one!</p>
</TabPanel>
<TabPanel>
<p>two!</p>
</TabPanel>
</TabPanels>
</Tabs>Tab sizes
You can change the size of the tab by passing size prop. We support 3 sizes
sm, md, lg
<Tabs size="md" variant="enclosed">
<TabList>
<Tab>One</Tab>
<Tab>Two</Tab>
</TabList>
<TabPanels>
<TabPanel>
<p>one!</p>
</TabPanel>
<TabPanel>
<p>two!</p>
</TabPanel>
</TabPanels>
</Tabs>