Github

Tab

Tabs are used to organize content by grouping similar information on the same page.

Component variations

Type

Contains default and boxed tab styles

Boxed

Boxed tab style with a filled background on the active tab

Vertical

Vertical layout of the tabs with left-aligned underline indicator

Without Icons

Tabs can be used with labels only

Disabled Tab

Individual tabs can be disabled to prevent selection

With Tab Content

Use the active value to conditionally render content for each tab panel

This is the Overview panel content.

Usage Guidelines

Import

Import the tab group component and configuration interface:

import-tab.ts

Copy code

Basic Implementation

Here is a basic example of using the tab group component:

1. Define tabs in TypeScript

my.component.ts

Copy code

2. Use in template

my.component.html

Copy code

Boxed Style

Use the boxed type for a filled background style:

boxed-example.html

Copy code

Vertical Layout

Use vertical direction for sidebar-style tab navigation:

vertical-example.html

Copy code

Listening to Events

Handle tab changes with value binding and event callbacks:

tab-events.html

Copy code

tab-events.ts

Copy code

Rendering Tab Content

Use the two-way bound value to conditionally render content for each tab panel in your own template:

1. Define tabs in TypeScript

my.component.ts

Copy code

2. Render content conditionally in template

my.component.html

Copy code

Disabled Tabs

Disable individual tabs in the config:

disabled-tabs.ts

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
tabs
VdTabConfig[]
[]
Yes
Array of tab configuration objects
value
string
''
No
The value of the currently active tab. Defaults to the first tab if not set.
type
'default' | 'boxed'
'default'
No
Visual style — 'default' shows an underline indicator, 'boxed' shows a filled background.
direction
'horizontal' | 'vertical'
'horizontal'
No
Layout direction of the tabs

VdTabConfig Interface

Properties for each tab configuration object:

Property
Type
Required
Description
label
string
Yes
Display text for the tab
value
string
Yes
Unique value identifier for the tab
icon
string
No
Icon name displayed before the label (e.g., vd-icon-home)
disabled
boolean
No
Whether the tab is disabled

Outputs

Event
Type
Description
valueChange
EventEmitter<string>
Emitted when the active tab value changes
tabChange
EventEmitter<VdTabConfig>
Emitted when a tab is selected, with the full tab config object

Best Practices

When to Use

  • Use Tab when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Tab when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Use tabs to organize related content that users need to switch between
  • Keep the number of tabs between 2–6 for optimal usability
  • Use concise, descriptive labels for each tab
  • Use the 'default' type for primary page-level navigation
  • Use the 'boxed' type for secondary or embedded tab navigation
  • Use icons alongside labels to improve scanability
  • Disable tabs that are temporarily unavailable rather than hiding them
  • Use vertical tabs for sidebar-style navigation with many items
  • Always set one tab as the default active tab
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Customize the tab features in this section

example.html

Copy code