PHP 7.3 reaches end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in April 2022. You may want to consider planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.

Tab component

The Tab component implements a tab content area.

See the Admin Design Pattern Library (Tabs) topic for information about the UI design patterns that can be implemented using the Tab component.

Configuration options

Option Description Type Default
component The path to the component’s JS constructor, in terms of RequireJS. String Magento_Ui/js/form/components/area
template The path to the component’s .html template. String templates/layout/tabs/tab/default
uniqueNs Unique namespace for the component. String params.activeArea

Examples

Integrate the Tab component with the Form component

This example integrates the Tab component with the Form component.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<form>
    ...
    <argument name="data" xsi:type="array">
        ...
        <item name="label" xsi:type="string" translate="true">Tabs</item>
    </argument>
    <settings>
        ...
        <layout>
            <navContainerName>left</navContainerName>
            <type>tabs</type>
        </layout>
    </settings>
    <fieldset name="tab1">
        <settings>
            ...
            <label translate="true">Tab 1</label>
        </settings>
        ...
    </fieldset>
    <fieldset name="tab2">
        <settings>
            ...
            <label translate="true">Tab 2</label>
        </settings>
        ...
    </fieldset>
</form>

Results

Ui tab result