---
title: "Panel Component"
slug: "panel-component"
tags: ["module-builder"]
updated: 2026-09-15T18:16:01Z
published: 2026-09-15T18:16:01Z
canonical: "docs.unqork.io/panel-component"
---

> ## 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

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](/unqorkai/docs/field-group-component) instead.

> **How to read settings tables**
> 
> The tables below describe each configurable option as it displays in the UnqorkAI platform. 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](/unqorkai/docs/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](/unqorkai/docs/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](/unqorkai/docs/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](/unqorkai/docs/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. |

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the .

An accordion is a type of menu that displays a list of headers stacked on top of one another.

The Number data type accepts integer or floating point values. The number data type does not use quotes around numerical values.

Rendering is the process of loading components and displaying the final result on the front-end screen.

A modal is a window that appears on top of the content you are currently viewing.

Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.

Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform.

A functionality of a software. For example, Copy and Paste is a feature of a computer's operating system.

Rendering is the process of loading components and displaying the final result on the front-end screen.

The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience.

The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience.

A runtime engine is software that runs on a computer to allow applications to execute.

The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience.

The Centauri (v 1.0.0) runtime is the first-generation foundation of the Unqork Designer Platform. Centauri provides Creators a codeless experience for developing applications.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Cumulative Layout Shift (CLS) measures how much elements in a webpage shift while using it. Some search engines use the CLS metric to rate a website's accessibility in their search rankings.

ARIA (Accessible Rich Internet Applications) is a set of attributes used in HTML to enhance the accessibility of web content, particularly dynamic or interactive web pages, for users who rely on assistive technologies like screen readers.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

Assistive technology that reads digital text aloud for users with visual impairments or reading disabilities.

Semantic HTML uses HTML elements to clearly describe their meaning, rather than just their appearance, to structure web content for better readability and accessibility for both humans and machines.

The Document Object Model (DOM) is the data representation of objects that form the structure and content of a document on the web. The DOM represents the page.

A key-value pair is a fundamental data structure where a unique "key" is associated with a specific "value," used for organizing and retrieving data efficiently, like in dictionaries or databases.