(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Vertical Tab

Overview

  • The DynamicVerticalTabComponent displays a vertical tab with a header and a content area.
  • It renders configured components inside the tab when it is shown.
  • It arranges its elements horizontally or vertically based on the selected layout.
  • It can show an optional icon next to the tab name.

Example Vertical tab

Specs

Tokens

Token Description
displayName Display name in structure panel.
id Unique ID for programmatic access.
elements Components in this vertical tab when shown.
layout Layout of elements (“horizontal”/“vertical”).
name Header text for the vertical tab.
nameTranslations Title text in header (localized).
showIcon Shows icon next to tab name.
iconName Icon displayed when showIcon is true.
events Configurable component events.
ON_INIT (Events) Triggered on initialization.
ON_DESTROY (Events) Triggered on removal.
disabled Controls expand/collapse of the vertical tab.
dataTestId Testing hook ID.
enableAsHotspot Enables guided tour hotspot.

Structure

  • Represents a single vertical tab with a header and a content panel.

  • Renders its child components only when the tab is shown.

  • Supports flexible composition of child content (e.g., forms, fields, images, other UI elements).

  • elements – Contains all components to be rendered within this vertical tab when it is shown. This array can include any dynamic components like forms, fields, images, or other UI elements that form the content of the vertical tab.

(Configured in General Properties)

  • displayName – Sets the display name of the component shown in the structure panel. For example, "Settings Panel" allows for easy identification of the tab panel's purpose in the component structure.
  • id – Specifies a unique identifier for the component used for programmatic access. For example, "userSettingsTab" enables targeted manipulation of this specific vertical tab panel through actions or events.

(Configured in Visual Properties)

  • layout – Defines the layout arrangement of elements within the vertical tab. Options include "horizontal" (elements arranged side by side) or "vertical" (elements stacked on top of each other). For example, using "vertical" layout provides a clean presentation for form fields in a vertical tab.

Styling

(Configured in Visual Properties)

  • name – Defines the header text displayed for the vertical tab. It represents the visible label that users click to expand or collapse the item.
  • nameTranslations – Sets the title text displayed in the vertical tab header with support for multiple languages. For example, {"en-US": "Product Specifications", "de-DE": "Produktspezifikationen"} ensures proper localization of the header text.
  • showIcon – Controls whether an icon is displayed next to the tab name. When enabled, shows the icon specified by the iconName property.
  • iconName – Specifies which icon to display when showIcon is true. For example, "user" displays a user icon next to the tab label, providing visual cues about the tab's content.

Choosing icons

Actions & Variants

(Configured in Events)

  • events – Configures the events that the component can trigger and respond to.
  • ON_INIT – Triggered when the vertical tab panel component is initialized. Can be used to perform setup operations like loading initial data.
  • ON_DESTROY – Triggered when the vertical tab panel component is removed from the DOM. Useful for cleanup operations when navigating away from a page.

(Configured in Visual Properties)

  • disabled – Controls whether the vertical tab can be expanded or collapsed. When set to true, the tab appears grayed out and cannot be clicked.

Vertical tab disabled

Tests

(Configured in Testing Hooks)

  • dataTestId – Sets the testing hook ID for automated testing. For example, setting it to "settings-tab" allows test scripts to reliably locate this specific component.
  • enableAsHotspot — Enables the component as a guided tour hotspot. When enabled, the vertical tab can be highlighted during guided tours of your application.
  • Figma: tba
  • Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/other-components/vertical-tab-panel

Guidelines

Usage

  • Prefer concise, action-oriented header labels across locales using nameTranslations.
  • Add an icon only when it aids recognition (not as the sole cue) by enabling showIcon and setting iconName.
  • Prevent interaction when prerequisites aren’t met by setting disabled: true.

Sizing & Layout

  • Arrange internal content using layout:
  • layout: "vertical" for forms/lists or sequential reading.
  • layout: "horizontal" for short, side-by-side atoms.
  • Populate child UI in elements; only the active (shown) tab mounts these children.

Content & Localization

  • Provide concise, localized headers via nameTranslations; keep name in sync during authoring.
  • Icons are supplemental; maintain a text label with name/nameTranslations even when showIcon is on.

Dos & Don’ts

Do Don’t Article setting(s)
Localize the header label for each supported locale. Ship an English-only tab title. nameTranslations, name
Add an icon only when it reinforces meaning. Replace the label with an icon alone. showIcon, iconName, name/nameTranslations
Disable the tab until prerequisites are met. Let users open a tab whose content can’t function yet. disabled
Clean up timers/listeners on removal. Leave background work running after navigating away. events.ON_DESTROY
Stack form fields for readability. Force dense side-by-side layouts that truncate. layout: "vertical"
Keep labels short and scannable across locales. Use long sentences or ambiguous names. name, nameTranslations

Accessibility

  • Localizable header text: nameTranslations, name. Keep header copy brief and plain-language in each locale.
  • Text label always present (icon is supplemental): showIcon, iconName, name/nameTranslations.
  • Prevent unavailable interactions: disabled.
  • Prefer stacked reading order for sequential inputs: layout: "vertical".
  • Use displayName to aid authorship clarity without altering user-facing labels: displayName.
  • No labels