Tabs

Tabs provide a way to navigate between panels that display related content without leaving the page.

Overview

Tabs help organize related content into manageable sections, making it easier for users to find and focus on specific information. They're particularly useful for displaying content in compact spaces, such as within modals or cards, allowing users to switch between sections without navigating away from the current view.

A lightweight running shoe with a breathable mesh upper and responsive foam midsole built for everyday miles.

<daff-tabs aria-label="Product details">
  <daff-tab>
    <daff-tab-label>
      <fa-icon [icon]="faAlignLeft" daffPrefix></fa-icon>
      Description
    </daff-tab-label>
    <daff-tab-panel>
      A lightweight running shoe with a breathable mesh upper and responsive foam midsole built for everyday miles.
    </daff-tab-panel>
  </daff-tab>

  <daff-tab>
    <daff-tab-label>
      <fa-icon [icon]="faListUl" daffPrefix></fa-icon>
      Specifications
    </daff-tab-label>
    <daff-tab-panel>
      Weight: 8.2 oz. Drop: 8mm. Upper: recycled mesh. Outsole: carbon rubber.
    </daff-tab-panel>
  </daff-tab>

  <daff-tab>
    <daff-tab-label>
      <fa-icon [icon]="faTruck" daffPrefix></fa-icon>
      Shipping & Returns
    </daff-tab-label>
    <daff-tab-panel>
      Free standard shipping on orders over $50. Return any unworn item within 30 days for a full refund.
    </daff-tab-panel>
  </daff-tab>

  <daff-tab>
    <daff-tab-label>
      <fa-icon [icon]="faStar" daffPrefix></fa-icon>
      Reviews
    </daff-tab-label>
    <daff-tab-panel>
      Rated 4.8 out of 5 from 1,204 verified customer reviews.
    </daff-tab-panel>
  </daff-tab>
</daff-tabs>

Best practices

When to use

Organizing related content into logical sections
Working within limited screen space
Allowing users to switch between content views without page navigation

When not to use

Content needs to be compared or viewed simultaneously
Users need to see all content in a sequential order

Usage

Import DAFF_TABS_COMPONENTS into your component:

import { DAFF_TABS_COMPONENTS } from '@daffodil/design/tabs';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DAFF_TABS_COMPONENTS,
  ],
})
export class CustomComponent {}

Anatomy

A tabs component is composed of a container, tabs, labels, and panels:

<daff-tabs>
  <daff-tab>
    <daff-tab-label>
      <fa-icon daffPrefix></fa-icon>
      Tab Label
      <fa-icon daffSuffix></fa-icon>
    </daff-tab-label>
    <daff-tab-panel>
      Tab content goes here
    </daff-tab-panel>
  </daff-tab>
</daff-tabs>

<daff-tabs>: The wrapper component that contains all tabs.
<daff-tab>: A single tab that groups a label and its corresponding panel together.
<daff-tab-label>: The clickable label that activates its corresponding tab panel. Labels can contain text, icons, or both.
<daff-tab-panel>: The content area displayed when a tab is active.
Add the [daffPrefix] or [daffSuffix] directive to an icon to place it before or after the label text. This provides a quick visual cue about the tab's purpose.

Features

Link mode

Set linkMode to true to replace the tab buttons with anchors, connecting the selected tab to a URL.

By default, the current URL and tab query param are used. Override these with the url and queryParam inputs, respectively.

A lightweight running shoe with a breathable mesh upper and responsive foam midsole built for everyday miles.

<daff-tabs aria-label="Product details" [linkMode]="true">
  <daff-tab>
    <daff-tab-label>
      <fa-icon [icon]="faAlignLeft" daffPrefix></fa-icon>
      Description
    </daff-tab-label>
    <daff-tab-panel>
      A lightweight running shoe with a breathable mesh upper and responsive foam midsole built for everyday miles.
    </daff-tab-panel>
  </daff-tab>

  <daff-tab>
    <daff-tab-label>
      <fa-icon [icon]="faListUl" daffPrefix></fa-icon>
      Specifications
    </daff-tab-label>
    <daff-tab-panel>
      Weight: 8.2 oz. Drop: 8mm. Upper: recycled mesh. Outsole: carbon rubber.
    </daff-tab-panel>
  </daff-tab>

  <daff-tab>
    <daff-tab-label>
      <fa-icon [icon]="faTruck" daffPrefix></fa-icon>
      Shipping & Returns
    </daff-tab-label>
    <daff-tab-panel>
      Free standard shipping on orders over $50. Return any unworn item within 30 days for a full refund.
    </daff-tab-panel>
  </daff-tab>

  <daff-tab>
    <daff-tab-label>
      <fa-icon [icon]="faStar" daffPrefix></fa-icon>
      Reviews
    </daff-tab-label>
    <daff-tab-panel>
      Rated 4.8 out of 5 from 1,204 verified customer reviews.
    </daff-tab-panel>
  </daff-tab>
</daff-tabs>

Initially selected tab

Set the initiallySelected input to a tab's id to select that tab on load. Without it, the first tab is selected by default.

Rated 4.8 out of 5 from 1,204 verified customer reviews.

<daff-tabs aria-label="Product details" [initiallySelected]="'reviews'">
  <daff-tab>
    <daff-tab-label>
      <fa-icon [icon]="faAlignLeft" daffPrefix></fa-icon>
      Description
    </daff-tab-label>
    <daff-tab-panel>
      A lightweight running shoe with a breathable mesh upper and responsive foam midsole built for everyday miles.
    </daff-tab-panel>
  </daff-tab>

  <daff-tab>
    <daff-tab-label>
      <fa-icon [icon]="faListUl" daffPrefix></fa-icon>
      Specifications
    </daff-tab-label>
    <daff-tab-panel>
      Weight: 8.2 oz. Drop: 8mm. Upper: recycled mesh. Outsole: carbon rubber.
    </daff-tab-panel>
  </daff-tab>

  <daff-tab>
    <daff-tab-label>
      <fa-icon [icon]="faTruck" daffPrefix></fa-icon>
      Shipping & Returns
    </daff-tab-label>
    <daff-tab-panel>
      Free standard shipping on orders over $50. Return any unworn item within 30 days for a full refund.
    </daff-tab-panel>
  </daff-tab>

  <daff-tab id="reviews">
    <daff-tab-label>
      <fa-icon [icon]="faStar" daffPrefix></fa-icon>
      Reviews
    </daff-tab-label>
    <daff-tab-panel>
      Rated 4.8 out of 5 from 1,204 verified customer reviews.
    </daff-tab-panel>
  </daff-tab>
</daff-tabs>

Disabled tab

Set the disabled property on a <daff-tab> to make it non-interactive.

A lightweight running shoe with a breathable mesh upper and responsive foam midsole built for everyday miles.

<daff-tabs aria-label="Product details">
  <daff-tab>
    <daff-tab-label>
      <fa-icon [icon]="faAlignLeft" daffPrefix></fa-icon>
      Description
    </daff-tab-label>
    <daff-tab-panel>
      A lightweight running shoe with a breathable mesh upper and responsive foam midsole built for everyday miles.
    </daff-tab-panel>
  </daff-tab>

  <daff-tab>
    <daff-tab-label>
      <fa-icon [icon]="faListUl" daffPrefix></fa-icon>
      Specifications
    </daff-tab-label>
    <daff-tab-panel>
      Weight: 8.2 oz. Drop: 8mm. Upper: recycled mesh. Outsole: carbon rubber.
    </daff-tab-panel>
  </daff-tab>

  <daff-tab>
    <daff-tab-label>
      <fa-icon [icon]="faTruck" daffPrefix></fa-icon>
      Shipping & Returns
    </daff-tab-label>
    <daff-tab-panel>
      Free standard shipping on orders over $50. Return any unworn item within 30 days for a full refund.
    </daff-tab-panel>
  </daff-tab>

  <daff-tab [disabled]="true">
    <daff-tab-label>
      <fa-icon [icon]="faStar" daffPrefix></fa-icon>
      Reviews
    </daff-tab-label>
    <daff-tab-panel>
      Rated 4.8 out of 5 from 1,204 verified customer reviews.
    </daff-tab-panel>
  </daff-tab>
</daff-tabs>

Programmatic selection

Call the select method with a tab's id to change the active tab from your own code.

A lightweight running shoe with a breathable mesh upper and responsive foam midsole built for everyday miles.

<div class="custom-select-tabs__buttons">
  <button daff-button size="sm" (click)="selectShipping()">
    View shipping info
  </button>

  <button daff-button size="sm" (click)="selectReviews()">
    Read reviews
  </button>
</div>

<daff-tabs aria-label="Product details">
  <daff-tab>
    <daff-tab-label>
      <fa-icon [icon]="faAlignLeft" daffPrefix></fa-icon>
      Description
    </daff-tab-label>
    <daff-tab-panel>
      A lightweight running shoe with a breathable mesh upper and responsive foam midsole built for everyday miles.
    </daff-tab-panel>
  </daff-tab>

  <daff-tab>
    <daff-tab-label>
      <fa-icon [icon]="faListUl" daffPrefix></fa-icon>
      Specifications
    </daff-tab-label>
    <daff-tab-panel>
      Weight: 8.2 oz. Drop: 8mm. Upper: recycled mesh. Outsole: carbon rubber.
    </daff-tab-panel>
  </daff-tab>

  <daff-tab id="shipping">
    <daff-tab-label>
      <fa-icon [icon]="faTruck" daffPrefix></fa-icon>
      Shipping & Returns
    </daff-tab-label>
    <daff-tab-panel>
      Free standard shipping on orders over $50. Return any unworn item within 30 days for a full refund.
    </daff-tab-panel>
  </daff-tab>

  <daff-tab id="reviews">
    <daff-tab-label>
      <fa-icon [icon]="faStar" daffPrefix></fa-icon>
      Reviews
    </daff-tab-label>
    <daff-tab-panel>
      Rated 4.8 out of 5 from 1,204 verified customer reviews.
    </daff-tab-panel>
  </daff-tab>
</daff-tabs>

Accessibility

Tabs follow the Tabs WAI-ARIA design pattern.

Built-in behavior

role="tablist", role="tab", and role="tabpanel" on the appropriate elements
Unique IDs automatically assigned to each tab (customizable via the id attribute)
aria-labelledby linking tab panels to their corresponding tab labels
aria-selected indicating the active tab

Developer responsibilities

Provide a meaningful aria-label on <daff-tabs> to describe the tab group
Keep tab labels concise and descriptive

<daff-tabs aria-label="Product information">
  <daff-tab>
    <daff-tab-label>Description</daff-tab-label>
    <daff-tab-panel>Product description content</daff-tab-panel>
  </daff-tab>
</daff-tabs>

Keyboard interactions

Key	Action
`Left Arrow`	Moves focus and activates the previous tab. If focus is on the first tab, focus moves to the last tab.
`Right Arrow`	Moves focus and activates the next tab. If focus is on the last tab, focus moves to the first tab.
`Home`	Moves focus and activates the first tab.
`End`	Moves focus and activates the last tab.