Panel with Tabs


A Panel with tabs component consists of tabs and tab panels that are available at all times, but only one is shown at once. Tabs function similarly to buttons. When one tab is activated, the corresponding panel is made visible.


When the component is active the user should be able to enter, edit or see data for the selected (active) tab. Other tabs are available at all times but not displayed. Once a new tab is selected a new panel will appear.

Panel with Tabs example

It is also possible to rearrange Tabs using the up (↑) and down (↓) arrows, available in the "Properties" panel.

Tabs sorting example



Do's and Don'ts

For more details, refer to Panel with Tabs Usage and Visual styleguides in our Storybook.