> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Element Settings

Element settings are a way of grouping together settings intended to modify one element of a widget, complete with the option to show or hide the element.

The `controls` attribute can contain the following optional objects:

| Attribute    | Description                                                                                                                                         |
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| `visibility` | Displays an eyeball icon similar to the [Visibility](/developer/docs/admin/widgets-and-scripts/input-reference/ui-settings/visibility) setting type |
| `advanced`   | Displays a brush icon that reveals a list of settings when clicked                                                                                  |

---

**Widget Configuration Output**

```json showLineNumbers={false}
"textBox": {
  "visibility": "show",
  "backgroundColor": "#FFFFFF"
}
```

---

**User Interface Output**

![output](/_fern-img/f9c9d0eb44326c267fd1e04873f7d82160c45f0c6008928b2eaf5c40fe521948.webp)

![output](/_fern-img/3d937c6a9bc31d9725bf860e22860412d412d8a62ec5fd584f27f66266b413c3.webp)

---

**JSON Schema**

| Property                                        | Type   | Description                                                                         | Example           |
| ----------------------------------------------- | ------ | ----------------------------------------------------------------------------------- | ----------------- |
| `type`                                          | string | The type of setting component to display.                                           | "element"         |
| `label`                                         | string | The user friendly message to inform the user how this setting will be used.         | "Box"             |
| `id`                                            | string | The variable name where the setting value will be available in the widget template. | "textBox"         |
| `typeMeta`                                      | object | Additional information needed based on the selected setting type.                   |                   |
| `typeMeta.controls`                             | object | Contains the `visibility` and `advanced` attributes.                                |                   |
| `typeMeta.controls.visibility`                  | object | Displays an eyeball icon that toggles widget visibility.                            |                   |
| `typeMeta.controls.visibility.default`          | string | The default value to use when rendering the widget for the first time.              | "show"            |
| `typeMeta.controls.advanced`                    | object | Contains a list of settings that are displayed when the user clicks the brush icon. |                   |
| `typeMeta.controls.advanced.label`              | string | The user friendly message to inform the user how this setting will be used.         | "Box style"       |
| `typeMeta.controls.advanced.settings`           | array  | Include additional settings                                                         |                   |
| `typeMeta.controls.advanced.settings[].type`    | string | The type of setting component to display.                                           | "color"           |
| `typeMeta.controls.advanced.settings[].label`   | string | The user friendly message to inform the user how this setting will be used.         | "Box color"       |
| `typeMeta.controls.advanced.settings[].id`      | string | The variable name where the setting value will be available in the widget template. | "backgroundColor" |
| `typeMeta.controls.advanced.settings[].default` | string | The default value to use when rendering the widget for the first time.              | "#FFFFFF"         |