Documentation Index

Fetch the complete documentation index at: https://docs.unqork.io/llms.txt

Use this file to discover all available pages before exploring further.

Panel Component

  • Updated on Aug 29, 2026
  • Published on Jul 6, 2026
  • 9 minute(s) read
Prev Next

The Panel component is a layout container that groups other components together in a module. It supports inline and modal display, accordion collapse, dynamic content loading, imported modules, isolated validation, and accessibility attributes. For simple visual grouping without those advanced capabilities, use the Field Group component instead.

How to read settings tables

The tables below describe each configurable option as it displays in the Unqork IDE. Values are formatted as follows: inline code — a value to type exactly as shown | Bold — a value selected from a drop-down, radio button, tab, or choice chip | ON/OFF — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked

General Settings

Setting Field Type Default Description
Property ID key Text input panel The unique identifier for this component instance.

Display Settings

Field Text

Setting Field Type Default Description
Canvas Label Text title Text input — Displays label text in the panel header.

Contextual Help

Setting Field Type Default Description
Description description Text input — Contextual description of the panel's contents.

Default State Options

Setting Field Type Default Description
Accordion accordion Toggle OFF Renders the Panel component as a collapsible accordion.
Collapse Content accordionCollapsed Toggle OFF Sets the accordion to collapsed on load.
Enable Scrollspy scrollspy Toggle OFF Enables scrollspy tracking.
↳ Vertical Offset scrollspyOffset Number input — Vertical offset in pixels for scrollspy position calculation. Visible when Enable Scrollspy is ON.
Disable Panel disabled Toggle OFF Disables the Panel component and all child inputs.
Hide Panel hidden Toggle OFF Hides the Panel component from view while keeping it in the module.

Formatting

Setting Field Type Default Description
Interaction Type modal Choice chip Panel Sets how the Panel component renders.

Panel — Renders the Panel component inline.


Modal — Renders the Panel component as a modal dialog.

Triggers and Events

Setting Field Type Default Description
Open Modal Event modalOpenEvent Text input — Event name that opens the modal.
Dismiss Modal Event modalDismissEvent Text input — Event name that closes the modal.
Trigger on Manual Modal Dismissal triggerOnDismissal Drop-down — Triggers a component on manual modal dismissal.
Allow Clicking Outside Modal to Dismiss outsideDismiss Toggle ON Allows clicking outside the modal to dismiss it.

Modal Styles

Setting Field Type Default Description
Open Modal CSS Class windowClass Text input — Adds a CSS class to the modal window element.

Imported and Dynamic Content

Import Existing Module

Setting Field Type Default Description
Import Existing Module importForm Toggle OFF Loads an external module inside this Panel component.

Import Type

Setting Field Type Default Description
↳ Reference copyForm Radio button — Links the Panel component to the source module. Updates automatically when the source changes. Visible when Import Existing Module is ON.
↳ Copy copyForm Radio button — Creates a static snapshot of the source module. Does not update when the source changes. Visible when Import Existing Module is ON.
↳ Module form Drop-down — Selects the module to import. Visible when Import Existing Module is ON.

Update Type

Setting Field Type Default Description
↳ Automatic frozen Radio button — Updates automatically when the source module changes. Visible when Reference is selected.
↳ Manual frozen Radio button — Requires the Creator to make manual updates. Visible when Reference is selected.
Note: This feature is currently not supported.

Dynamic Refresh

Dynamic Refresh loads content into the Panel component without reloading the entire page. A logic component sends a new set of component definitions to the Panel component at runtime using the dynamicRefresh output type.

For full details on configuration, use cases, and best practices, see the Dynamic Refresh article.

Setting Field Type Default Description
Enable Dynamic Refresh enableDynamicRefreshing Toggle OFF Enables Dynamic Refresh for this Panel component.

Post Refresh Trigger

Setting Field Type Default Description
↳ Post Refresh Trigger postRefreshTrigger Drop-down — Triggers a component after all incoming components load and render. Visible when Enable Dynamic Refresh is ON.

Show Prior Components While Refreshing

Setting Field Type Default Description
↳ Show Prior Components While Refreshing showPriorComponentsWhileRefreshing Toggle ON Keeps prior components visible during refresh. Visible when Enable Dynamic Refresh is ON.

Overlay Display Options

Visible when Show Prior Components While Refreshing is ON.

Setting Field Type Default Description
None opacityTypeWhileRefreshing Radio button — Prior components display at full opacity.
Partially Transparent opacityTypeWhileRefreshing Radio button Partially Transparent Prior components display at reduced opacity during refresh.
Custom Opacity opacityTypeWhileRefreshing Radio button — Prior components display at a custom opacity during refresh.
↳ Opacity % opacity Text input — Custom opacity percentage. Visible when Custom Opacity is selected.

Show Animation While Refreshing

Setting Field Type Default Description
↳ Show Animation While Refreshing showAnimationWhileRefreshing Toggle ON Shows a loading animation during refresh. Visible when Enable Dynamic Refresh is ON.

Animation Options

Visible when Show Animation While Refreshing is ON.

Setting Field Type Default Description
Loading Spinner loadingAnimationTypeWhileRefreshing Radio button Loading Spinner Displays a circular spinner animation.
Progress Bar loadingAnimationTypeWhileRefreshing Radio button — Displays a horizontal progress bar animation.
Three Dots loadingAnimationTypeWhileRefreshing Radio button — Displays three animated dots.

Customization

Setting Field Type Default Description
↳ Custom Text While Refreshing customTextWhileRefreshing Text input — Displays text inside the Panel component while refreshing. Visible when Enable Dynamic Refresh is ON.
↳ Custom CSS While Refreshing customCssWhileRefreshing Text input — Applies a CSS class to the Panel component only during refresh. Visible when Enable Dynamic Refresh is ON.

Error Handling

Setting Field Type Default Description
↳ Display Error in Panel displayErrorInPanel Toggle OFF Shows Dynamic Refresh error messages inside the Panel component. Visible when Enable Dynamic Refresh is ON.

Runtime

The following settings control how the Panel component renders its child components and manages data when using the Vega runtime.

Setting Field Type Default Description
Render Components with runtime Choice chip Sets the execution runtime for components inside this panel. Centauri (1.0) uses the standard runtime. Vega (2.0) uses the Vega runtime, required for Vega-only components like iFrame, Image, Menu, Search Select, and Simple Select. Overrides the module-level Runtime setting for this panel.
Promote Data to Top Level promoteDataToTopLevel Toggle OFF When set to ON, this setting promotes Vega component data from under this panel's Property ID to the top level of submission data, alongside Centauri component data.
Data to Clear on Refresh dataPersistenceBlacklist Text input — Comma-separated list of Property IDs to clear on each Dynamic Refresh.

Validation Settings

User Input

Setting Field Type Default Description
Allow Validation isolatedFormConfig Toggle OFF Validates the Panel component independently from global navigation-triggered validation. Useful when multiple Panel components are on a page and only some should validate together.

Advanced Settings

Additional Styling

Setting Field Type Default Description
Custom CSS Class customClass Text input — Adds a custom CSS class to the Panel component's root element.

Accessibility Settings

For details on each setting, its options, and when to use it, see Accessibility Settings Reference.

Setting Field Type Default Description
ARIA Label ariaLabelOption Drop-down None Sets how to label this element for screen readers. Options include: None, Custom Label, or Reference Label(s).
ARIA Description ariaDescriptionOption Drop-down None Sets how to provide additional context for screen readers. Options include: None, Custom Description, or Reference Description(s).
ARIA Role ariaRole Drop-down — Defines the semantic role of the element for assistive technologies. See Accessibility Settings Reference for the full list of available roles.
Announce Live Changes ariaLive Drop-down Off Controls how screen readers announce dynamic content updates. Options include: Off, Polite, or Assertive.
Hide From Screen Readers ariaHidden Toggle OFF Hides the element from assistive technologies without removing it from the DOM.

Custom ARIA Attributes

Adds additional custom ARIA attributes to the element as key-value pairs.

Column Field Description
Attribute key The ARIA attribute name (for example, aria-label, aria-describedby, and so on).
Value value The value for the attribute.

Operations Builder

This component supports the Operations Builder in Vega modules. When the module or panel runtime is set to Vega (2.0), an Event Handlers section displays in the settings panel for configuring event-driven operations.

Changelog

Date Change
2026-06-09 Added Vega Runtime section with Render Components with, Promote Data to Top Level, and Data to Clear on Refresh settings.
— Initial publication.
Related articles

Copyright © 2025 Unqork