Accessible Tabs component for React and Chakra UI
npm install @chakra-ui/tabsAn 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.
``sh
yarn add @chakra-ui/tabs
npm i @chakra-ui/tabs
`
`jsx`
import { Tabs, TabList, TabPanels, Tab, TabPanel } from "@chakra-ui/react"
`jsx
one! two! three!
`
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.
` one! two!jsx`
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 specific tab, users can activate a
tab by pressing Space or Enter.
` one! two!jsx`
You can change the size of the tab by passing size prop. We support 3 sizessm, md, lg
` one! two!jsx``