Tabs

The <el-tab-group> component makes it easy to build accessible, keyboard-navigable tab interfaces with full control over styling and layout.

Component API

<el-tab-group>

The main container that coordinates the tabs and panels.

<el-tab-list>

The container for tab buttons.

<el-tab-panels>

The container for tab panels. All direct children are considered panels.

Examples

Basic example

Use the <el-tab-group>, <el-tab-list>, and <el-tab-panels> components, along with native <button> elements, to build a tab group:

<el-tab-group>
  <el-tab-list>
    <button type="button">Tab 1</button>
    <button type="button">Tab 2</button>
    <button type="button">Tab 3</button>
  </el-tab-list>
  <el-tab-panels>
    <div>Content 1</div>
    <div hidden>Content 2</div>
    <div hidden>Content 3</div>
  </el-tab-panels>
</el-tab-group>

Setting the active tab

The initially active tab is determined by the absence of the hidden attribute on panels. This allows the component to work correctly with server-side rendering.

<el-tab-panels>
  <div>Active panel</div>
  <div hidden>Inactive panel</div>
  <div hidden>Inactive panel</div>
</el-tab-panels>

You can also programmatically set the active tab using the setActiveTab(index) method on <el-tab-group>:

<el-tab-group id="my-tabs">
  <el-tab-list>
    <button type="button">Tab 1</button>
    <button type="button">Tab 2</button>
    <button type="button">Tab 3</button>
  </el-tab-list>
  <el-tab-panels>
    <div>Content 1</div>
    <div hidden>Content 2</div>
    <div hidden>Content 3</div>
  </el-tab-panels>
</el-tab-group>

<script type="module">
  const tabs = document.getElementById('my-tabs');
  tabs.setActiveTab(1);
</script>