#Tabs

# Design

Tabs allow users to quickly navigate between different views within one page. Tabs are helpful when organizing large amounts of related content. Tabs are designed so that each state is clearly visible in order to let users know where they are within the tabbed experience.

# Example

# Usage

Tabs should be used to section off and organize related content. When using Tabs, it’s important to consider labels. It’s recommended that labels should not exceed 2 words and consideration should be given to how the number of Tabs and length of label will scale on smaller screens.

Additional Guidance:

• to reduce clutter, avoid using multiple word labels
• avoid using more than 5 tabs
• never force users to switch between tabs in order to complete a task
• tabs should not be used as a primary form of navigation

# TabContainer

TabContainer is a container that groups tabs and tab panels. It binds them together so that clicking a specific tab will reveal the requisite container

# Props

# Events

• update:modelValue - emitted when the tab has changed - payload is the new selected tab index

# Slots

• tabs - slot for the Tab elements
• default - slot for the TabPanel elements

# Tab

Tab faciliates Tab interactions in various containers and is re-used for drawer tabs and others. Tabs are hosted in Tab Containers.

# Props

Note that normally, all these props are automatically populated when used inside of a TabContainer. You normally have no need to give these values unless you want to override them.

# Slots

• default - text displayed inside the tab element

# TabPanel

TabPanel is a container for the content of a tab - it is implicitly paired with a tab within a TabContainer element

# Props

Note that normally, all these props are automatically populated when used inside of a TabContainer. You normally have no need to give these values unless you want to override them.

# Slots

• default - the content displayed for a given tab