Expandable Section

The Expandable Section wraps any content in a collapsible accordion-style panel. It renders a header with a title and optional caption, and can expand or collapse on user interaction. Use it to hide secondary information until it's needed, keep long screens manageable, or build a step-by-step reveal experience.

To configure it, click the component on the Flow screen. The Edit Expandable Section Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

Title — the main label displayed in the section header. Users see this whether the section is open or closed.

Caption — optional text displayed above the title in the header.

Content — the rich text body that appears when the section is expanded. Supports text, images, and expression merge fields.

Title and Content can be filled manually or by selecting any available flow resources.

Variant — controls the header background style:

Collapsible — when enabled, a chevron toggle icon appears in the header so users can expand or collapse the section. Without this, the section is always open.

Closed — when enabled, the section starts in a collapsed state. Only relevant when Collapsible is also enabled.

Shown only when Collapsible is enabled. Customize the expand/collapse toggle icon.

Hide — hides the toggle icon entirely (useful when you control expand/collapse programmatically).

Open Icon Name / Close Icon Name — customize the Lightning icons shown when the section is open (default utility:chevrondown) or closed (default utility:chevronright) respectively.

Position — controls whether the toggle icon appears on the Left or Right side of the header.

Display an avatar in the section header alongside the title. Configure the image source, icon fallback, shape, size, and presence indicator.

Add action buttons to the section header. Users can click these to trigger flow interactions.

Visible Actions Buttons — controls how many buttons appear before additional actions overflow into a menu.

Hide Actions — hides all header actions.

Disable Actions — renders the header actions in a disabled (non-clickable) state.

Visually display progress using either a circle or bar format directly in the header. Enter the progress value manually or map it to a flow variable for dynamic updates. Customize the appearance with the progress type, position, size, thickness, and label settings.

Add badge-like tags to the section header to highlight metadata or status. Tags appear next to the title and support different visual styles (variants). Add tags manually or populate them from a flow variable.

Interactions define what happens when users interact with the Expandable Section. Configure them from the Interactions tab of the Edit Expandable Section panel.

Fires when a user clicks an action button in the section header. The name of the clicked action is available as the targetName output variable, so you can branch or act on which specific action was triggered.

The Style tab gives you fine-grained control over the Expandable Section's appearance. The available sections are set per variant (Base, Shaded). Configure it from the Style tab of the Edit Expandable Section panel.

Like all interactive Flow components, the Expandable Section exposes generic output slots (Variable 1–10) that an Open Flow Dialog or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.