Chakra-UI

I♥️Components

Tabs

|

Chakra Docs

|

⦾ You can render any element within Tabs, but TabList should only have Tab as children, and TabPanels should have TabPanel as children. Tabs expects TabList and TabPanels as children. The order doesn't matter, you can have TabList at the top, at the bottom, or both.
  • Tabs: Provides context and state for all components
  • TabList: Wrapper for the Tab components
  • Tab: element that serves as a label for one of the tab panels and can be activated to display that panel.
  • TabPanels: Wrapper for the TabPanel components TabPanel: element that contains the content associated with a tab

These components can be imported as follows:

Examples

Default Settings

⦾ Tabs in Chakra UI are designed to contain any sort of elements, however, there are specific guidelines for what elements should be direct children of TabList and TabPanels. Tab elements are expected to be the only direct children of a TabList, while TabPanel elements should be the only direct children of TabPanels.

The Tabs component in Chakra UI is quite flexible when it comes to ordering. You are allowed to place TabList and TabPanels in any order within the Tabs component. For instance, you could place the TabList at the bottom, or even have multiple TabLists. Despite this flexibility, remember to maintain a consistent layout for an optimal user experience.

one!

Code

Variants and Colors

⦾ Tabs come in 6 variations as shown below, which can be applied using the variant prop on the Tabs component.
  • line: displays an underline below the active tab.
  • enclosed: adds a border around the active tab and the tab panel.
  • enclosed-colored: is similar to the enclosed variant but with a colored background on the active tab.
  • soft-rounded: gives the active tab a rounded outline and a slightly shaded background.
  • solid-rounded: gives the active tab a solid background and rounded corners.
  • unstyled: doesn't apply any styles to the tabs. This is particularly useful when you want to build a completely custom tab design from scratch.

one!

Code

⦾ In Chakra UI, you have the ability to modify the color scheme of any particular variant by supplying a colorScheme prop. The value you provide to colorScheme should correspond to a key within the theme.colors object in your theme, and this key should possess a range of color values from 50 to 900. This allows you to seamlessly blend the Tabs component with the overall color scheme of your application.

one!

Code

Tab Sizing

⦾ In Chakra UI, you have the option to adjust the size of the tab by utilizing the size prop. There are three supported sizes you can choose from: sm for small, md for medium, and lg for large. For instance, if you wanted to use a small-sized tab with the soft-rounded variant and a red color scheme, you would specify these options using the respective properties.

one!

Code

Changing Alignment

⦾ You can change the alignment of the TabList by passing align prop. Charka supports 3 variations start, center, and end. The following uses a center alignment.

one!

Code

Fitted Tabs

⦾ Stretch the tab list to fit the container by passing isFitted prop.

one!

Code

TabIndicator: Styling the tab states via props

⦾ To customize the active tab indicator, set the variant tounstyled and set styles on TabIndicator.

In Chakra UI's Tabs component, the TabIndicator represents a visual indicator that highlights the currently active tab. It is a visual element that helps users identify the active tab and provides visual feedback as they navigate through different tab options.

The TabIndicator is typically a horizontal line or a bar that appears below or above the active tab, indicating its selected state. It visually separates the active tab from the rest of the tabs and provides a clear visual cue of the user's current selection.

Chakra UI's Tabs component automatically manages the positioning and appearance of the TabIndicator based on the selected tab. It updates its position and size when the active tab changes, providing a smooth transition between tabs. You can customize the appearance of the TabIndicator by modifying the styles associated with the active tab. Chakra UI provides a range of styling options to customize the TabIndicator's color, size, position, and animation using its theme and style props.

The TabIndicator in Chakra UI's Tabs component serves as a visual guide to help users navigate and understand the current state of the tabbed interface.

one!

Code

Customizing individual tabs

⦾ In the event that you need to create custom styles for individual tabs, use the _selected, _hover, and _active style props.

one!

Code

The onChange Property

⦾ The onChange callback returns the active tab's index whenever the user changes tabs. If you intend to control the tabs programmatically, use this with the index prop.
I am a pink TabPanel.

Code

Focus a specific tab by default:

⦾ By default, only one item may be expanded and it can only be collapsed again by expanding another. Pressing the up and down arrow keys will move focus between accordion buttons. Here, the defaultIndex on Tabs is set to 3.

Code

Disable a Tab

⦾ When a Tab is disabled, it is skipped during keyboard navigation and it is not clickable. Here, the isDisabled property is used on the second tab.
1

Code

Manually activate 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 noticeable 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!

Code

Lazy Tab Mounting

⦾ By default, the Tabs component renders all tabs content to the DOM, meaning that invisible tabs are still rendered but are hidden by styles. If you want to defer rendering of each tab until that tab is selected, you can use the isLazy prop. This is useful if your tabs require heavy performance, or make network calls on mount that should only happen when the component is displayed.
Tabs: isLazy

one!

Code

Controlled Tabs

⦾ Like form inputs, a tab's state can be controlled. Make sure to include an onChange as well, or else the tabs will not be interactive.

Slide or click tabs

Code

Custom Tab Components

⦾ Because TabList needs to know the order of the children, we use cloneElement to pass state internally. Your custom Tab component must use React.forwardRef.
1

Code

DataTabs

⦾ If you'd like to drive your tabs with an array instead of using the granular components, you can create your own DataTabs component.
Truth: Chopsticks are better than forks.

Code

Did you know?

Creative Idea No. 1

Nested Tabs: It is possible to nest tabs within other tabs. While this can be complex in many UI libraries, Chakra UI makes this quite straightforward.

Nested Tab 1 Content

Code

Creative Idea No. 2

Orientation Control: Chakra UI Tabs have support for both horizontal and vertical orientations. This might not be immediately apparent to many users, but it can help you create unique layouts.

Tab 1 Content

Code

Creative Idea No. 3

Chakra UI allows you to use custom icons from any icon library or even your own SVG icons. This can be utilized to make your tabs more visually appealing and intuitive.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.