Skip to content

Tab List

<quiet-tab-list> stable since 1.0

Tab lists let users switch between different sections of content without leaving the page, providing a clean and organized interface.

Tab lists follow the ARIA APG tooltip pattern for accessibility. They are comprised of three different components. A single tab list surrounds one or more tabs and their corresponding tab panels. Each panel must have a unique name, and each tab must have a panel attribute that maps to a panel.

First Second Third Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap. Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun. 
<quiet-tab-list label="Select a tab">
	<quiet-tab panel="first">First</quiet-tab>
	<quiet-tab panel="second">Second</quiet-tab>
	<quiet-tab panel="third">Third</quiet-tab>

	<quiet-tab-panel name="first">Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap.</quiet-tab-panel>
	<quiet-tab-panel name="second">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</quiet-tab-panel>
	<quiet-tab-panel name="third">Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun.</quiet-tab-panel>
</quiet-tab-list>

In the same way that images require alt text, you should add a label to every tab list. The label won't be displayed, but it will be announced by assistive devices.

Examples Jump to heading

Setting the active tab Jump to heading

To make a specific tab show initially, or to programmatically activate a tab, set the tab attribute to the name of the desired panel.

First Second Third Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap. Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun. 
<quiet-tab-list label="Select a tab" tab="second">
	<quiet-tab panel="first">First</quiet-tab>
	<quiet-tab panel="second">Second</quiet-tab>
	<quiet-tab panel="third">Third</quiet-tab>

	<quiet-tab-panel name="first">Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap.</quiet-tab-panel>
	<quiet-tab-panel name="second">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</quiet-tab-panel>
	<quiet-tab-panel name="third">Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun.</quiet-tab-panel>
</quiet-tab-list>

Showing tabs at the bottom Jump to heading

Set the placement attribute to bottom to show tabs at the bottom.

First Second Third Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap. Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun. 
<quiet-tab-list label="Select a tab" placement="bottom">
	<quiet-tab panel="first">First</quiet-tab>
	<quiet-tab panel="second">Second</quiet-tab>
	<quiet-tab panel="third">Third</quiet-tab>

	<quiet-tab-panel name="first">Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap.</quiet-tab-panel>
	<quiet-tab-panel name="second">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</quiet-tab-panel>
	<quiet-tab-panel name="third">Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun.</quiet-tab-panel>
</quiet-tab-list>

Showing tabs at the start Jump to heading

Set the placement attribute to start to show tabs at the start. The tabs will automatically move to the opposite side in RTL languages.

First Second Third Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap. Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun. 
<quiet-tab-list label="Select a tab" placement="start">
	<quiet-tab panel="first">First</quiet-tab>
	<quiet-tab panel="second">Second</quiet-tab>
	<quiet-tab panel="third">Third</quiet-tab>

	<quiet-tab-panel name="first">Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap.</quiet-tab-panel>
	<quiet-tab-panel name="second">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</quiet-tab-panel>
	<quiet-tab-panel name="third">Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun.</quiet-tab-panel>
</quiet-tab-list>

Showing tabs at the end Jump to heading

Set the placement attribute to end to show tabs at the end. The tabs will automatically move to the opposite side in RTL languages.

First Second Third Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap. Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun. 
<quiet-tab-list label="Select a tab" placement="end">
	<quiet-tab panel="first">First</quiet-tab>
	<quiet-tab panel="second">Second</quiet-tab>
	<quiet-tab panel="third">Third</quiet-tab>

	<quiet-tab-panel name="first">Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap.</quiet-tab-panel>
	<quiet-tab-panel name="second">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</quiet-tab-panel>
	<quiet-tab-panel name="third">Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun.</quiet-tab-panel>
</quiet-tab-list>

Scrolling tabs Jump to heading

When the number of tabs exceeds the available space in a top or bottom placement, the tab container will scroll horizontally.

First Second Third Fourth Fifth Sixth Seventh Eight Ninth Tenth Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap. Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun. Stealthy shadows in the moonlight, cats emerge for nocturnal adventures through gardens and alleyways. Their night vision reveals a secret world invisible to human eyes during daylight hours. Cozy blanket burrows become the ultimate fortress for sleepy kitties seeking warmth. The rhythmic breathing of a napping cat creates the most soothing soundtrack for peaceful afternoons. Laser pointer dots trigger ancient hunting instincts, sending cats into acrobatic displays of athleticism. Every red dot becomes the ultimate prey in this eternal game of chase and pounce. Catnip-infused toys transform ordinary house cats into euphoric party animals rolling with unbridled joy. This magical herb unlocks a level of feline happiness that's absolutely contagious to witness. Scratching posts serve as both manicure stations and territorial markers for our feline friends. Each scratch communicates ownership while maintaining those razor-sharp claws in perfect hunting condition. Cardboard boxes become luxury penthouses in the cat real estate market, regardless of size. Whether tiny or enormous, every box offers the perfect hideout for surveillance and surprise attacks. Sunrise stretches and yoga poses demonstrate the incredible flexibility that makes cats natural contortionists. Their graceful movements inspire humans to embrace daily stretching routines for better health. 
<quiet-tab-list label="Select a tab">
	<quiet-tab panel="first">First</quiet-tab>
	<quiet-tab panel="second">Second</quiet-tab>
	<quiet-tab panel="third">Third</quiet-tab>
	<quiet-tab panel="fourth">Fourth</quiet-tab>
	<quiet-tab panel="fifth">Fifth</quiet-tab>
	<quiet-tab panel="sixth">Sixth</quiet-tab>
	<quiet-tab panel="seventh">Seventh</quiet-tab>
	<quiet-tab panel="eight">Eight</quiet-tab>
	<quiet-tab panel="ninth">Ninth</quiet-tab>
	<quiet-tab panel="tenth">Tenth</quiet-tab>

	<quiet-tab-panel name="first">Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap.</quiet-tab-panel>
	<quiet-tab-panel name="second">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</quiet-tab-panel>
	<quiet-tab-panel name="third">Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun.</quiet-tab-panel>
	<quiet-tab-panel name="fourth">Stealthy shadows in the moonlight, cats emerge for nocturnal adventures through gardens and alleyways. Their night vision reveals a secret world invisible to human eyes during daylight hours.</quiet-tab-panel>
	<quiet-tab-panel name="fifth">Cozy blanket burrows become the ultimate fortress for sleepy kitties seeking warmth. The rhythmic breathing of a napping cat creates the most soothing soundtrack for peaceful afternoons.</quiet-tab-panel>
	<quiet-tab-panel name="sixth">Laser pointer dots trigger ancient hunting instincts, sending cats into acrobatic displays of athleticism. Every red dot becomes the ultimate prey in this eternal game of chase and pounce.</quiet-tab-panel>
	<quiet-tab-panel name="seventh">Catnip-infused toys transform ordinary house cats into euphoric party animals rolling with unbridled joy. This magical herb unlocks a level of feline happiness that's absolutely contagious to witness.</quiet-tab-panel>
	<quiet-tab-panel name="eight">Scratching posts serve as both manicure stations and territorial markers for our feline friends. Each scratch communicates ownership while maintaining those razor-sharp claws in perfect hunting condition.</quiet-tab-panel>
	<quiet-tab-panel name="ninth">Cardboard boxes become luxury penthouses in the cat real estate market, regardless of size. Whether tiny or enormous, every box offers the perfect hideout for surveillance and surprise attacks.</quiet-tab-panel>
	<quiet-tab-panel name="tenth">Sunrise stretches and yoga poses demonstrate the incredible flexibility that makes cats natural contortionists. Their graceful movements inspire humans to embrace daily stretching routines for better health.</quiet-tab-panel>
</quiet-tab-list>

If you don't want the tabs to scroll, you can apply flex-wrap: wrap to the tabs-content part to allow them to wrap instead.

First Second Third Fourth Fifth Sixth Seventh Eight Ninth Tenth Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap. Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun. Stealthy shadows in the moonlight, cats emerge for nocturnal adventures through gardens and alleyways. Their night vision reveals a secret world invisible to human eyes during daylight hours. Cozy blanket burrows become the ultimate fortress for sleepy kitties seeking warmth. The rhythmic breathing of a napping cat creates the most soothing soundtrack for peaceful afternoons. Laser pointer dots trigger ancient hunting instincts, sending cats into acrobatic displays of athleticism. Every red dot becomes the ultimate prey in this eternal game of chase and pounce. Catnip-infused toys transform ordinary house cats into euphoric party animals rolling with unbridled joy. This magical herb unlocks a level of feline happiness that's absolutely contagious to witness. Scratching posts serve as both manicure stations and territorial markers for our feline friends. Each scratch communicates ownership while maintaining those razor-sharp claws in perfect hunting condition. Cardboard boxes become luxury penthouses in the cat real estate market, regardless of size. Whether tiny or enormous, every box offers the perfect hideout for surveillance and surprise attacks. Sunrise stretches and yoga poses demonstrate the incredible flexibility that makes cats natural contortionists. Their graceful movements inspire humans to embrace daily stretching routines for better health. 
<quiet-tab-list label="Select a tab" id="tabs-list__no-scroll">
	<quiet-tab panel="first">First</quiet-tab>
	<quiet-tab panel="second">Second</quiet-tab>
	<quiet-tab panel="third">Third</quiet-tab>
	<quiet-tab panel="fourth">Fourth</quiet-tab>
	<quiet-tab panel="fifth">Fifth</quiet-tab>
	<quiet-tab panel="sixth">Sixth</quiet-tab>
	<quiet-tab panel="seventh">Seventh</quiet-tab>
	<quiet-tab panel="eight">Eight</quiet-tab>
	<quiet-tab panel="ninth">Ninth</quiet-tab>
	<quiet-tab panel="tenth">Tenth</quiet-tab>

	<quiet-tab-panel name="first">Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap.</quiet-tab-panel>
	<quiet-tab-panel name="second">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</quiet-tab-panel>
	<quiet-tab-panel name="third">Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun.</quiet-tab-panel>
	<quiet-tab-panel name="fourth">Stealthy shadows in the moonlight, cats emerge for nocturnal adventures through gardens and alleyways. Their night vision reveals a secret world invisible to human eyes during daylight hours.</quiet-tab-panel>
	<quiet-tab-panel name="fifth">Cozy blanket burrows become the ultimate fortress for sleepy kitties seeking warmth. The rhythmic breathing of a napping cat creates the most soothing soundtrack for peaceful afternoons.</quiet-tab-panel>
	<quiet-tab-panel name="sixth">Laser pointer dots trigger ancient hunting instincts, sending cats into acrobatic displays of athleticism. Every red dot becomes the ultimate prey in this eternal game of chase and pounce.</quiet-tab-panel>
	<quiet-tab-panel name="seventh">Catnip-infused toys transform ordinary house cats into euphoric party animals rolling with unbridled joy. This magical herb unlocks a level of feline happiness that's absolutely contagious to witness.</quiet-tab-panel>
	<quiet-tab-panel name="eight">Scratching posts serve as both manicure stations and territorial markers for our feline friends. Each scratch communicates ownership while maintaining those razor-sharp claws in perfect hunting condition.</quiet-tab-panel>
	<quiet-tab-panel name="ninth">Cardboard boxes become luxury penthouses in the cat real estate market, regardless of size. Whether tiny or enormous, every box offers the perfect hideout for surveillance and surprise attacks.</quiet-tab-panel>
	<quiet-tab-panel name="tenth">Sunrise stretches and yoga poses demonstrate the incredible flexibility that makes cats natural contortionists. Their graceful movements inspire humans to embrace daily stretching routines for better health.</quiet-tab-panel>
</quiet-tab-list>

<style>
  quiet-tab-list#tabs-list__no-scroll::part(tabs-content) {
    flex-wrap: wrap;
  }
</style>

Disabling Jump to heading

To disable a tab, add the disabled attribute to it. Since tabs use automatic activation , disabled tabs are not focusable but are still recognized by assistive devices as disabled tabs.

First Second (disabled) Third Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap. Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun. 
<quiet-tab-list label="Select a tab">
	<quiet-tab panel="first">First</quiet-tab>
	<quiet-tab panel="second" disabled>Second (disabled)</quiet-tab>
	<quiet-tab panel="third">Third</quiet-tab>

	<quiet-tab-panel name="first">Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap.</quiet-tab-panel>
	<quiet-tab-panel name="second">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</quiet-tab-panel>
	<quiet-tab-panel name="third">Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun.</quiet-tab-panel>
</quiet-tab-list>

Lazy loading content Jump to heading

Quiet considers lazy loading tab content to be an anti-pattern but, when necessary, you can use the quiet-tab-shown event to do it.

Regular Lazy Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. 
<quiet-tab-list label="Select a tab" id="tab-list__lazy">
	<quiet-tab panel="regular">Regular</quiet-tab>
	<quiet-tab panel="lazy">Lazy</quiet-tab>

	<quiet-tab-panel name="regular">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</quiet-tab-panel>
	<quiet-tab-panel name="lazy">
    <quiet-spinner label="Loading" style="display: block; margin-inline: auto;"></quiet-spinner>
  </quiet-tab-panel>
</quiet-tab-list>

<script>
  const tabList = document.getElementById('tab-list__lazy');
  const lazyPanel = tabList.querySelector('quiet-tab-panel[name="lazy"]');

  tabList.addEventListener('quiet-tab-shown', event => {
    if (event.detail.tab.panel === 'lazy' && !lazyPanel.hasAttribute('data-loaded')) {
      lazyPanel.setAttribute('data-loaded', '');

      // Some async operation...

      setTimeout(() => {
        lazyPanel.innerHTML = 'Surprise! A sleepy kitten just finished loading and is now ready for belly rubs and treats.';
      }, 2000);
    }
  });
</script>

Making tabs closable Jump to heading

Avoid nesting buttons and other interactive elements inside of a tab, as it will cause assistive devices to work incorrectly. Instead, you can add buttons adjacent to tabs using `. When tabs are removable, you should also listen for the Delete key.

Note that we use tabindex="-1" on the close button to prevent it from interfering with normal tabbing. The button, however, is still accessible to virtual cursors.

First Second Third Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap. Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun. Restore Tab 
<quiet-tab-list label="Select a tab" id="tab-list__closable">
	<quiet-tab panel="first">First</quiet-tab>
	<quiet-tab panel="second">Second</quiet-tab>
  <quiet-button slot="tab" appearance="text" size="xs" icon-label="Close second tab" tabindex="-1">
    <quiet-icon name="x"></quiet-icon>
  </quiet-button>
	<quiet-tab panel="third">Third</quiet-tab>

	<quiet-tab-panel name="first">Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap.</quiet-tab-panel>
	<quiet-tab-panel name="second">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</quiet-tab-panel>
	<quiet-tab-panel name="third">Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun.</quiet-tab-panel>
</quiet-tab-list>

<quiet-button disabled style="margin-block-start: 2rem;">Restore Tab</quiet-button>

<script>
  const tabList = document.getElementById('tab-list__closable');
  const firstTab = tabList.querySelector('quiet-tab[panel="first"]');
  const secondTab = tabList.querySelector('quiet-tab[panel="second"]');
  const secondPanel = tabList.querySelector('quiet-tab-panel[name="second"]');
  const closeButton = tabList.querySelector('quiet-button');
  const restoreButton = tabList.nextElementSibling;
  
  function closeTab() {
    closeButton.remove();
    secondTab.remove();
    secondPanel.remove();
    restoreButton.disabled = false;

    if (tabList.active === 'second') {
      tabList.active = 'third';
    }
  }

  function restoreTab() {
    firstTab.insertAdjacentElement('afterend', closeButton);
    firstTab.insertAdjacentElement('afterend', secondTab);
    tabList.append(secondPanel);
    restoreButton.disabled = true;
  }

  // Remove the tab when the close button is clicked
  closeButton.addEventListener('click', closeTab);

  // Remove the tab when delete is pressed
  secondTab.addEventListener('keydown', event => {
    if (event.key === 'Delete') {
      closeTab();
    }
  });
  
  // Restore the tab
  restoreButton.addEventListener('click', restoreTab);
</script>

<style>
  #tab-list__closable {
    quiet-button {
      position: relative;
      left: -1rem;
      font-size: .875rem;
      margin-inline-end: -.5rem;
    }
    
    quiet-button::part(button) {
      border-radius: var(--quiet-border-radius);
      height: 2rem;
    }
  }
</style>

Styling tab lists Jump to heading

Tab lists come with a simple, minimal appearance. Feel free to customize them with your own styles.

First Second Third Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap. Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun. 
<quiet-tab-list label="Select a tab" class="tab-list__cards">
	<quiet-tab panel="first">First</quiet-tab>
	<quiet-tab panel="second">Second</quiet-tab>
	<quiet-tab panel="third">Third</quiet-tab>

	<quiet-tab-panel name="first">Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap.</quiet-tab-panel>
	<quiet-tab-panel name="second">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</quiet-tab-panel>
	<quiet-tab-panel name="third">Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun.</quiet-tab-panel>
</quiet-tab-list>

<style>
  .tab-list__cards {
    border: solid 1px var(--quiet-neutral-stroke-softer);
    border-radius: var(--quiet-border-radius);
    box-shadow: var(--quiet-shadow-softer);

    &::part(tabs) {
      padding-top: 0.5rem;
    }

    &::part(panels) {
      padding: 1.5rem 1rem;
    }

    quiet-tab {
      background-color: var(--quiet-paper-color);
      border: solid 1px var(--quiet-neutral-stroke-softer);
      border-start-start-radius: var(--quiet-border-radius);
      border-start-end-radius: var(--quiet-border-radius);
      color: var(--quiet-text-muted);
      padding-block: 0.75rem;
      margin-inline: 0.25rem;

      &:state(active) {
        background-color: var(--quiet-background-color);
      }
    }

    quiet-tab:first-of-type {
      margin-inline-start: 0.5rem;
    }

    quiet-tab:last-of-type {
      margin-inline-end: 0.5rem;
    }

    quiet-tab:state(active) {
      border-bottom-color: var(--quiet-background-color);
      color: var(--quiet-text-body);
    }

    &::part(panels) {
      border-top-width: 1px;
      margin-top: -1px;
    }
  }  
</style>
First Second Third Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap. Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures. Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun. 
<quiet-tab-list label="Select a tab" class="tab-list__segments">
	<quiet-tab panel="first">First</quiet-tab>
	<quiet-tab panel="second">Second</quiet-tab>
	<quiet-tab panel="third">Third</quiet-tab>

	<quiet-tab-panel name="first">Whiskers twitching with curiosity, cats patrol their domain with silent paws and keen eyes. Every corner holds potential adventure or the perfect sunny spot for an afternoon nap.</quiet-tab-panel>
	<quiet-tab-panel name="second">Purring contentedly on warm windowsills, felines observe the world with ancient wisdom. Their graceful movements and mysterious expressions captivate humans across all cultures.</quiet-tab-panel>
	<quiet-tab-panel name="third">Playful pouncing and midnight zoomies reveal the wild hunter within every house cat. From cardboard boxes to feather toys, everything becomes an exciting opportunity for feline fun.</quiet-tab-panel>
</quiet-tab-list>

<style>
  .tab-list__segments {
    &::part(tabs) {
      justify-content: space-between;
      background-color: var(--quiet-neutral-fill-softer);
      border-radius: var(--quiet-border-radius);
      padding: .25rem;
    }

    quiet-tab {
      flex: 1 1 auto;
      justify-content: center;
      border: none;
      border-radius: calc(var(--quiet-border-radius) * .75);
      color: var(--quiet-text-muted);
      padding-inline: 2rem;
      padding-block: .25rem;
      transition: 100ms background-color ease, 100ms color ease;
    }

    quiet-tab:first-child {
      margin-inline-start: 0;
    }

    quiet-tab:state(active) {
      border: none;
      background-color: var(--quiet-background-color);
      color: var(--quiet-text-body);
    }

    &::part(panels) {
      border: none;
      padding-block: 1rem;
      margin: 0;
    }
  }  
</style>

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN npm

To manually import <quiet-tab-list> from the CDN, use the following code.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.0.0/dist/components/tab-list/tab-list.js';

To manually import <quiet-tab-list> from npm, use the following code.

import '@quietui/quiet/dist/components/tab-list/tab-list.js';

Slots Jump to heading

Tab List supports the following slots. Learn more about using slots

Name Description
(default) One or more <quiet-tab-panel> elements, each with a name attribute unique to the tab list.
tab One or more <quiet-tab> elements, each with a panel attribute linked to the name of a tab panel. Note that tabs will automatically apply this slot to themselves, so you can safely omit slot="tab" in your markup. Also useful for adding close buttons to tabs.

Properties Jump to heading

Tab List has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Property / Attribute Description Reflects Type Default
label An accessible label for the tab list. This won't be visible, but it will be read to assistive devices so you should always include one. string
tab The name of the tab panel that's currently active. string
placement The placement of tab controls. 'top'
'bottom'
'start'
'end' 		'top'

Events Jump to heading

Tab List dispatches the following custom events. You can listen to them the same way was native events. Learn more about custom events

Name Description
quiet-tab-shown Emitted after a tab is shown. The event will include a detail object with tab and panelproperties that reference the respective tab and panel elements.
quiet-tab-hidden Emitted after a tab is hidden. The event will include a detail object with tab and panel properties that reference the respective tab and panel elements.

CSS parts Jump to heading

Tab List exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts

Name Description CSS selector
tabs The container that holds all of the tabs, a <quiet-scroller> element. ::part(tabs)
tabs-content The scroller's content part. ::part(tabs-content)
panels The container that holds all of the tab panels. ::part(panels)

Dependencies Jump to heading

Tab List automatically imports the following elements. Sub-dependencies are also included in this list.

Search this website Toggle dark mode Get the code on GitHub Follow @quietui.org on Bluesky Follow @quiet_ui on X

    No results found