Expandable Section
The Avonni Expandable Section component displays a section of content with a header that can optionally be expanded or collapsed. Use it to organize related components — forms, lists, data displays — into clearly delimited, toggleable panels.
Overview
The Expandable Section supports a title and caption in the header, a rich text body, optional collapsible behavior with customizable icons, and additional enhancements such as an avatar, actions, a progress indicator, and badge-like tags.
Key features
Expandable Design: Toggle content visibility for better UX in dense interfaces.
Customization: Variants for styling, avatars for visual cues, and icons for collapsibility.
Interactivity: Support for actions, progress indicators, and tags.
Slot Integration: Embed other components (e.g., Text Areas, Sliders) within the section's content area.
Tip
For creating accordion-like structures with multiple expandable panels, use the dedicated Avonni Accordion component
Use Cases
Group form fields in expandable panels (e.g., "Contact Details" section).
Organize dashboard widgets, collapsing less-used ones.
Display collapsible help content or FAQs.
Structure reports with tagged, progress-tracked sections.
Build nested UIs, like a section containing a Data Table for filtered views.
Configuration
To configure the Expandable Section, select it on the canvas. The Edit Expandable Section panel opens on the right. The sections below mirror the Properties tab from top to bottom.
Properties
Title sets the main heading displayed in the section header. Caption adds a short line of text above the title for additional context.
Content is a rich text field for the section body. You can include static text, dynamic expressions, and references to other component values.
Variant controls the overall visual style of the section. Choose Base (default) for a clean, borderless look, or Shaded to apply a background fill that visually separates the section from the page.
Collapsible enables the toggle behavior that lets users expand and collapse the section. When this setting is off, the section is always open and the toggle icon is hidden.
Closed sets the initial state of the section to collapsed. Requires: Collapsible = enabled.
Collapsible Icon
This group is only visible when Collapsible is enabled.
Hide removes the toggle icon entirely — useful when you want to control the open/closed state programmatically.
Open Icon Name sets the Lightning Design System icon shown when the section is expanded (default: utility:chevrondown). Requires: Hide = disabled.
Close Icon Name sets the Lightning Design System icon shown when the section is collapsed (default: utility:chevronright). Requires: Hide = disabled.
Position controls where the icon appears relative to the title. Choose Left (default) or Right. Requires: Hide = disabled.
Avatar
Add a visual element to the left of the title to help users identify the section at a glance.
Variant — Shape of the avatar: Circle or Square (default).
Initials — Text overlay shown when no image is provided (e.g., user initials).
Icon Name — A Lightning Design System icon used as a fallback when no image is set.
Icon Size — Size of the avatar: X-Small, Small, Medium (default), Large, X Large, Xx Large.
Image — URL of an image to display inside the avatar.
Alternative Text — Accessible text describing the avatar image.
Actions
Add clickable buttons to the section header. Each action is configured with:
Label — Text displayed on the action button.
Name — Unique identifier used to route the click to the correct interaction.
Icon Name — Optional Lightning Design System icon for the button.
Disabled — Prevents the action from being clicked.
Hidden — Hides the action from view.
Alternative Text — Accessible description of the action button icon (advanced).
Visible Actions Buttons sets how many action buttons are shown inline before remaining actions are collapsed into an overflow menu.
Hide Actions hides all actions at once — useful for conditionally showing them via a variable.
Disable Actions disables all actions at once.
Best Practice
Limit to 2–3 actions to avoid clutter. Use Visible Actions Buttons to control overflow.
Progress
Display a progress indicator in or around the section header to communicate completion status.
Value sets the numeric progress value (0–100). Requires: Value to be set before the sub-properties below appear.
Type — Style of the indicator: Bar (default) or Circle.
Position — Where the indicator appears relative to the header. Bar type supports Top and Bottom; Circle type supports Left and Right.
Label — Optional text displayed alongside the indicator.
Size — Indicator size, with no default. Bar: X-Small, Small, Medium, Large, Full. Circle: XX-Small through X-Large.
Thickness — Stroke/bar thickness: X-Small, Small, Medium, Large, X-Large.
Rounded — Applies rounded end caps to the bar style. Requires: Type = Bar.
Show Value — Displays the numeric value inside or next to the indicator.
Alternative Text — Accessible description of the progress indicator (advanced).
Tip
For Progress, binding to a variable enables real-time changes — for example, updating based on form completion or query results.
Tags
Add badge-like tags to the header to surface metadata or status at a glance. Each tag has:
Label — Text displayed in the badge.
Variant — Color style: Base (default), Brand, Inverse, Alt-Inverse, Success, Info, Warning, Error, Offline.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
Use Cases
Collapsible Contact Form Section
Slot Content
To populate the section with form fields linked to your Contact record, base it on the Record Variable created earlier (e.g., for the Contact object).
Steps:
Select the Section component on the canvas.
In the Elements Panel (typically left or right side), switch to the Fields tab—this displays available fields from the bound Record Variable.
Drag relevant fields (e.g., Name, Email) directly into the section's slot on the canvas.
Result: A shaded, collapsible section with avatar, progress bar, tags, and actions—expands to reveal form fields.
Interactions
Interactions define what happens when users interact with the Expandable Section. Configure them from the Interactions tab of the Edit Expandable Section panel.
Action Click
Fires when a user clicks one of the header action buttons. Use the targetName output to identify which action was clicked and branch your flow logic accordingly — for example, opening a record edit form or triggering a different action per button.
Styling
Configure the Expandable Section's appearance from the Style tab of the Edit Expandable Section panel.
Controls the outer spacing around the section.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the section's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Adjusts the block spacing around the section.
Block Start / Block End: Set the vertical spacing.
Styles the section container.
Background Color: Set the container background.
Border Color / Border Size / Border Style / Border Radius: Customize the container border.
Styles the section title.
Color / Font Size / Font Style / Font Weight: Set the title color and typography.
Styles the section caption.
Color / Font Size / Font Style / Font Weight: Set the caption color and typography.
Styles the collapse/expand icon.
Icon: Background Color / Color / Color Hover.
Border: Color / Size / Style / Radius.
Styles the progress indicator (when one is shown).
Bar: Color / Completed Color; Label Font Color / Font Size / Font Style / Font Weight; Value Color / Value Font Size / Font Style / Font Weight.
Circle: Background Color / Color / Completed Color; Value Color / Value Font Style / Font Weight; Label Font Color / Font Style / Font Weight.
Last updated
Was this helpful?