Tabs

A full-featured tabbed interface that combines a tab bar with associated panel content.

Basic tabs

Overview content goes here.

Detailed information goes here.

Settings content goes here.

<diwa-tabs active-tab-index="0" class="block w-full">
  <diwa-tabs-item label="Overview">Overview content goes here.</diwa-tabs-item>
  <diwa-tabs-item label="Details">Detailed information goes here.</diwa-tabs-item>
  <diwa-tabs-item label="Settings">Settings content goes here.</diwa-tabs-item>
</diwa-tabs>

Controlled tabs

Listen to the update event to keep external state in sync with the active tab.

Manage your public profile information.

Update your password and two-factor authentication settings.

Configure which emails and push notifications you receive.

<diwa-tabs id="tabs" active-tab-index="0">
  <diwa-tabs-item label="Profile">Manage your public profile information.</diwa-tabs-item>
  <diwa-tabs-item label="Security">Update your password and two-factor authentication settings.</diwa-tabs-item>
  <diwa-tabs-item label="Notifications">Configure which emails and push notifications you receive.</diwa-tabs-item>
</diwa-tabs>
<script>
  const el = document.querySelector('#tabs');
  el.addEventListener('update', (e) => {
    console.log('Active tab index:', e.detail.activeTabIndex);
  });
</script>

Active tab index: 0