Tab

Design File

Figma link

Introduction

The tab component organizes content into multiple panels, with only one panel visible at a time. It is useful for presenting grouped content where switching between views is more appropriate than scrolling.

Component Structure

The tab interface is composed of three components: the Tab (parent container), the Tab Trigger (the clickable tab buttons), and the Tab Content (the panels). Triggers and content panels are linked by a shared Tab Value.

Tab (Parent Container)

Props

Field	Data Type	Requirement	Description	Note
Default Tab	String	Optional	The Tab Value of the tab that should be active when the page loads.	If not set, the first tab is active by default.
Unique ID	String	Optional	A unique identifier for this tab group. Useful when multiple tab groups exist on the same page.
Component ID	String	Optional	An ID for the component, useful for in-page anchor linking.

Slots

Field	Data Type	Requirement	Description
Accessible Tab Label	String	Optional	A visually hidden label for the entire tab interface, read by screen readers. Recommended when multiple tab groups are on the same page.
Tab Triggers	UMD Lib Tab Trigger component(s)	Required	Place Tab Trigger components here, one for each tab.
Tab Content	UMD Lib Tab Content component(s)	Required	Place Tab Content components here, one for each tab.

Tab Trigger

One Tab Trigger component is needed for each tab.

Props

Field	Data Type	Requirement	Description	Note
Tab Value	String	Required	A unique identifier that links this trigger to its corresponding Tab Content panel.	Must match the Tab Value set on the corresponding Tab Content component.

Slots

Field	Data Type	Requirement	Description
Tab Label	String	Required	The label displayed on the tab button.

Tab Content

One Tab Content component is needed for each tab.

Props

Field	Data Type	Requirement	Description	Note
Tab Value	String	Required	A unique identifier that links this content panel to its corresponding Tab Trigger.	Must match the Tab Value set on the corresponding Tab Trigger component.

Slots

Field	Data Type	Requirement	Description
Body	UMD Lib Text or Component	Required	The content displayed in this tab panel. Use the Text component or other appropriate components.

Setup Example

To create a two-tab interface:

1. Add a Tab component as the parent.
2. Inside the Tab Triggers slot, add two Tab Trigger components with Tab Values tab-1 and tab-2.
3. Inside the Tab Content slot, add two Tab Content components with matching Tab Values tab-1 and tab-2.
4. Optionally set Default Tab to tab-1 on the parent to open the first tab by default.