> 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: Panel Elements in Blocks
## Article: Panel Elements
## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/panel-elements-in-blocks.md
## Article Content:
# Panel Elements in Blocks
**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).
Blocks [custom panels](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/design-custom-panels-in-blocks.md) are made of unique panel elements.
To reference the panel elements in your widget's code, go to the [code section of the Panels tab](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/add-code-to-custom-panels-in-blocks.md).
Use the [$w()](https://www.wix.com/velo/reference/$w/$w) [function](https://www.wix.com/velo/reference/$w/$w) to select elements by ID, for example:
```javascript
let label = $w("#myPanelElement").label;
```
## Panel element APIs
The following panel elements are available to use in your panels. Click each element to see how to reference it in your panel code:
* [Panel Slider](https://www.wix.com/velo/reference/$w/panelslider)
* [Panel Thumbnails](https://www.wix.com/velo/reference/$w/panelthumbnails)
* [Panel Button](https://www.wix.com/velo/reference/$w/panelbutton)
* [Panel Checkbox Group](https://www.wix.com/velo/reference/$w/panelcheckboxgroup)
* [Panel Dropdown](https://www.wix.com/velo/reference/$w/paneldropdown)
* [Panel Radio Button Group](https://www.wix.com/velo/reference/$w/panelradiobuttongroup)
* [Panel Rich Text](https://www.wix.com/velo/reference/$w/panelrichtext)
* [Panel Text Input](https://www.wix.com/velo/reference/$w/paneltextinput)
* [Panel Toggle Switch](https://dev.wix.com/docs/velo/velo-only-apis/$w/panel-toggle-switch/introduction.md)
* [Panel Section Divider](https://www.wix.com/velo/reference/$w/panelsectiondivider)
* [Panel Color Picker](https://www.wix.com/velo/reference/$w/panelcolorpicker)
* [Panel Font and ColorPicker](https://www.wix.com/velo/reference/$w/panelfontandcolorpicker)
## Helpful SDK and Velo modules
Import the following modules to interact with the panel elements in your panel code:
* The [widget SDK module](https://dev.wix.com/docs/sdk/host-modules/editor/widget/introduction.md) lets you interact with your widget's properties and design presets from a panel.
* The [wix-editor Velo module](https://dev.wix.com/docs/velo/velo-only-apis/wix-editor/introduction.md) lets you open Dashboard pages from a panel, and remove or restore elements.
## Know the panel elements
Here is a short description of each element and anything special you should know about it.
### Panel Slider
Panel sliders allow users to select a number from a given range.
### Panel Thumbnails
Thumbnails allow users to select an item from a set of thumbnail images.
### Panel Button
A button on your panel. Add the button logic through code or [button rules](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/panel-button-rules-to-open-pages.md).
### Panel Checkbox Group
Checkbox groups are used for selecting any number of the given options.
### Panel Dropdown
Drop-downs are used for selecting one of a number of options.
### Panel Radio Button Group
Radio button groups are used for selecting one of a number of options.
### Panel Text
A text element (also called "rich text") is used to display text followed by a link.
### Panel Text Input
An input element that lets users enter small amounts of text.
### Panel Toggle Switch
Toggle switches are used for a single binary choice.
### Panel Section Divider
Section dividers display a section heading in the panel.
### Panel Color Input
Color pickers allow a site builder to select a color for one or multiple elements.
Notes:
* You cannot test the color in the Blocks **Preview**  mode. To test the color, install the app on a site.
* You must add at least one line of code to see how the element works in the editor. For example: `$w('#panelColorPicker1');`
* A color picker can be a good way to give site builders a possibility to customize a [custom element](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/about-custom-elements-in-blocks.md).
* We recommend not to connect a custom panel to the **Design**  action button, since it will not work well in the Wix Studio editor. Instead, you can create a main action named **Change Design** (learn more about [connecting action bars](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-configuration/configure-action-bars-in-blocks.md)).
### Panel Font and Color Input
Font and color pickers allow site builders to select a font and its color.
> **Note:** You must add at least one line of code to see how the element works in the editor. For example: `$w(panelFontAndColorPicker1);`
