# Tab Group

<flow-tab-group>

Stable

The tab group component provides a container for tab buttons and tab panels to create a tabbed UI.

Panel content is added to the tab group using the tab panel component. Tab buttons to select panels are added using the tab component.

To link a tab button to a panel set the panel attribute of the tab button to the name attribute of the corresponding panel.

# Examples

Tab buttons can be placed on all four sides of the tab group container by setting the placement attribute.

Property	Description	Type	Default
`placement`	The placement of the tab navigation buttons.	`"bottom" \| "left" \| "right" \| "top"`	`'top'`

Event	Description	Type
`flowTabHide`	Emitted when a tab is hidden.	`any`
`flowTabShow`	Emitted when a tab is shown.	`any`

Method	Description
`show`	`show(panel: string) => Promise<void>` Show the specified tab panel.

Slot	Description
`(default)`	Place <flow-tab-panel> elements in this slot.
`nav`	Place <flow-tab> elements in this slot.

Name	Description
`--active-color`	The color of the active tab marker.
`--divider-color`	The color of the divider that separates tab navigation buttons from panels.

Name	Description
`active-tab-indicator`	An element that displays the currently selected tab. This is a child of the tabs container.
`body`	The tab group body where tab panels are displayed.
`nav`	The tab group navigation container.
`tabs`	The container that wraps the slotted tabs.