Skip to content

TabPanel

Components4.8.2

WCAG 2.1 AA: Ideal Support

Component is usable and understandable for the majority of people with or without disabilities. The meaning conveyed and the functionality available is the same.

TabPanel

Wrap over the tab elements.

import TabPanel from '@semcore/ui/tab-panel';
<TabPanel />;
typeTabPanelProps
BoxProps & {...}
PropertyDescription
onChange
((value: TabPanelValue, e: React.SyntheticEvent) => void) | React.Dispatch

Is invoked when changing the selection

value

Value of the selected tab

defaultValue

Default value of the selected tab

TabPanel.Item

The tab element may contain Addon and Text, its structure is similar to Button. It takes some properties from TabLine (for example, size, disabled) and may override them.

It is recommended to make tabs with links, so that the user can open a separate tab with the report with the right mouse button if necessary.

import TabPanel from '@semcore/ui/tab-panel';
<TabPanel.Item />;
typeTabPanelItemProps
BoxProps & KeyboardFocusProps & {...}
PropertyDescription
selected
boolean

Makes a tab selected. This property is determined automatically depending on the value.

disabled
boolean

Disabled state

value

Tab value

addonLeft
React.ElementType

Left addon tag

addonRight
React.ElementType

Right addon tag

TabPanel.Item.Addon

The addon inside the tab (most commonly an icon) sets the correct indents depending on the size.

It takes all the properties of the Box.

import TabPanel from '@semcore/ui/tab-panel';
<TabPanel.Item.Addon />;

TabPanel.Item.Text

This ordinary text sets the appropriate indents depending on the size. If a simple text without addons is used in the Tab, it will turn into TabLine.Item.Text automatically.

It takes all the properties of the Box.

import TabPanel from '@semcore/ui/tab-panel';
<TabPanel.Item.Text />;