> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Connect Panel Elements to Props
## Article: Low Code Panels
## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/connect-panel-elements-to-props.md
## Article Content:
# Connect Panel Elements to Widget Properties With No Code
**Editor compatibility**
Wix Blocks apps aren't supported in the Wix Harmony editor. Existing Blocks apps remain available for purchase on the Wix App Market for Wix Editor and Wix Studio sites. To learn more, see [About Wix Harmony and Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/about-wix-harmony-and-blocks.md).
Custom panels are often used to get input from users and set the [widget API properties](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/widget-api/blocks-widget-properties.md) accordingly. For example, in a shopping widget, users could turn a "special sale" property on and off, through a toggle element in the widget's panel. Note that you could also [do this with code](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/add-code-to-custom-panels-in-blocks.md).
Note:
You cannot test panels in the Blocks preview. To see your panel in action, [test it on a site](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/deploy-and-manage-blocks-apps/test-your-app-on-a-site.md).
## Connect a panel element to a widget property:
1. Click the panel element you want to connect to a property. In our example, we use a slider.
1. Click **Connect Slider to** in the Inspector panel (the name of the element changes according to what you selected).
1. Select the property you want to connect to this element. Note that you'll only see properties that match that element's type (see [element and property types](#element-and-property-types)).
1. At this point, you can also create a new property if you need to.
Warning:
Deleting the property you connected to an element will cause the element to lose its functionality.
## Element and property types
You can only connect panel elements to properties whose type matches the element's input behavior. For example, a toggle element can connect to a boolean property, because they both represent a choice between two options.
Here is a list of panel elements and the property types they can connect to:
| Panel Element | Property Type |
| -------- | ------- |
| Checkbox Group | List of strings |
| Dropdown | String |
| Radio Button Group | String |
| RichText | String |
| Slider | Number |
| Text Input | String |
| Thumbnails | String |
| Toggle Switch | Boolean |
## Syncing property and element settings
When you connect a panel element to a property, the property's settings, which you have set in the **New Property** panel, will automatically apply to the matching element settings. For example, when connecting this `TextProp` property to a text input element, the title, tooltip and default text were automatically taken from what we defined for the property. After you complete the process of connecting the element to the property, you will be able to change the Display Name and Tooltip from the element's settings.
**Property Settings:**
**Element settings automatically taken from prop settings:**
Note:
Any values that you might have set in the element's settings panel **prior** to connecting it to a property, will be overridden by the property's settings.