Adobe Commerce 2.3 reached end of support in September 2022.

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