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

Content Switch

Overview

• A Content Switch lets users toggle between views in the same area.
• It groups related content under simple, labeled buttons.
• Only one view shows at a time; switching keeps the page in place.
• The active choice is clearly marked to guide the user.
• It can trigger actions when the user switches views.

Specs

Tokens

Structure

(Configured in General Properties)

• displayName – Sets the display name of the component shown in the structure panel. For example, "Warehouse Layout" allows for easy identification of the component's purpose in the component structure, making it easier for developers to work with this specific raster component.

(Configured in Visual Properties)

• elements - Defines all columns in the table with their individual configurations.
  • id - Specifies a unique identifier for a element used for programmatic access.
  • disabled - Disables the button/element and prevents interaction
  • ON_CONTENT_SWITCH_CLICK - This event is emitted when the content switch button is selected and made active. Additional returns all information about selected content switch button.
• activeButtonIndicator - This field set contentSwitchButton active by id.

(Configured in Visibility)

• displayConditions – Defines conditions for displaying the component. This allows showing or hiding the label based on complex rules involving other form values, user roles, or application state. For example, the label might only be shown for orders with specific statuses.

Tooltip

(not jet implemented)

• showTooltip – Controls whether a tooltip should be displayed when hovering over the label. When set to true, the tooltip will show the text specified in the tooltipText property.
• tooltipText – Sets the text to display in the tooltip when hovering over the label. This is useful for providing additional information about what the label represents.
• tooltipPlacement – Determines the position of the tooltip relative to the label. Options include "top", "bottom", "left", and "right". For example, "top" places the tooltip above the label.
• tooltipDelay – Sets the delay in milliseconds before the tooltip appears when hovering over the label. For example, setting to "500" will delay the tooltip appearance by half a second.

Styling

(Configured in Visual Properties)

• type – Sets the visual appearance of the date picker between "DEFAULT" (highlighting the active tab via background color) and "GHOST" (not highlighting the active tab).

Actions & Variants

(Configured in Events)

• events – Configures the events that the component can trigger and respond to:
  • ON_INIT – Triggered when the video player component is initialized. Can be used to perform setup operations or record analytics about video availability.
  • ON_DESTROY – Triggered when the video player component is removed from the DOM. Useful for cleanup operations and releasing resources.

Authorization

(Configured in Authorization)

• visibilityPolicySetId – Determines the visibility of the component based on specified policy sets. For example, setting to "premiumContentAccess" restricts the video player visibility to users with premium content access privileges according to the specified policy.

Tests

(Configured in Testing Hooks)

• id – Specifies a unique identifier for the component used for programmatic access. For example, "productDemoVideo" enables targeted manipulation of this specific video player component through scripts or automated testing.
• dataTestId – Sets the testing hook ID for automated testing. For example, setting it to "product-demo-video" allows test scripts to reliably locate this component during automated testing.
• enableAsHotspot – Enables the component as a guided tour hotspot. When enabled, the video player can be highlighted during onboarding or tutorial flows to draw user attention to important video content.
  • guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Product Demo Video", "de-DE": "Produktdemo-Video"} provides clear identification during guided tours.
  • guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "Watch this video to learn how to use the product", "de-DE": "Sehen Sie sich dieses Video an, um zu erfahren, wie Sie das Produkt verwenden"} provides detailed instructions during guided tours.

Links

• Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11524-14777&t=ExcQFUXKvr1QdxTm-1
• Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id2/3-content-switch

Guidelines

Usage

• Use Content Switch to toggle between related views in the same area; define each choice in elements[] and ensure only one is active via activeButtonIndicator (value = an elements.id).
• Choose visual emphasis with type: DEFAULT (visible active highlight) when clarity is critical; GHOST for low-emphasis contexts.
• Prevent unavailable choices with elements.disabled: true.
• Use displayName to keep the component recognizable in the structure panel during authoring.

Sizing & Layout

• Order switches intentionally by arranging items in elements[]; keep the order stable.
• Map activeButtonIndicator to an ID that exists in elements[] to avoid ambiguous states.

States & Feedback

• Represent the current view with activeButtonIndicator; update it on elements.ON_CONTENT_SWITCH_CLICK.
• Disable nonfunctional choices with elements.disabled.
• Select type="DEFAULT" when the active state must be highly visible; type="GHOST" only when reduced emphasis won’t harm clarity.

Visibility & Authorization

• Show or hide the component using displayConditions based on app state.
• Gate visibility by policy with visibilityPolicySetId when access must be restricted.

Content & Localization

• For onboarding, enable hotspots with enableAsHotspot and provide localized text via guidedTourHotSpotTitle and guidedTourHotSpotDescription.
• Tooltips are not yet implemented; avoid relying on showTooltip, tooltipText, tooltipPlacement, or tooltipDelay.

Dos & Don’ts

Accessibility

• Maintain a single, unambiguous active state using activeButtonIndicator; update it on selection via elements.ON_CONTENT_SWITCH_CLICK.
• Prevent interaction with unavailable choices using elements.disabled.
• Provide stable hooks for accessibility testing via dataTestId and/or tests.id.
• Avoid relying on tooltip tokens, which are NYI (showTooltip, tooltipText, tooltipPlacement, tooltipDelay).
• Prefer type="DEFAULT" when the active state must be visually evident; pair it with activeButtonIndicator.
• Keep the order predictable by maintaining elements[] deterministically.
• Use hotspots to supplement (not replace) visible labels, with localized guidedTourHotSpotTitle and guidedTourHotSpotDescription.