# Component Properties

The properties attribute can be used to define custom properties on `<Section>`, `<Banner>`, `<Box>`, or `<Element>` tags. It is defined by providing an array of objects. Each object represents a property that will be displayed on the **Properties** tab within the page editor.

Use custom properties to enable additional layouts or functionality for a component.

```jsx
<Section
  dataRef={content.section}
  properties={[
    {
      "name": "layout", 
      "label": "Layout",
      "attribute": "class",
      "type": "select", 
      "options": [
        { "label": "Default", "value": "default" },
        { "label": "Full", "value": "full" },
        { "label": "Grid", "value": "grid" },
        { "label": "Offset", "value": "offset" },
        { "label": "Collage", "value": "collage" },
        { "label": "List", "value": "list" }
      ],
      "default": "center", 
      "placeholder": "...", 
      "required": true
    }
  ]}
>
```

Component properties can be referenced using the `properties` [variable](/docs/features/values.md). This variable is attached to the variable referenced by the `dataRef` of the component. For example, for [Section](/docs/components/section.md) components it's:

```javascript
{ content.section.properties.layout } // Outputs the layout
```

Properties can be used to add many powerful features to your components.

## Arguments

* **type**: string - value for the type of the property. Can be one of text, number, select, multiselect, date, time, datetime, checkbox, checklist, or color.
* **name**: string - value for the name of the property that will be stored in the tag configurations.
* **label**: string (optional) - the label that will be shown to content authors. If not set it will pull the value from the name property and sentence case it (capitalize the first letter).
* **attribute**: string (optional) - value for the rendered element's HTML attribute that will be changed by the property when set.
* **required**: boolean (optional) - value for whether a value is required or not for the property. If set a default must be set.
* **placeholder**: string (optional, text/number types only) - value for the HTML placeholder attribute of the control.
* **prefix**: string (optional, text/number types only) - if set, prepends an uneditable prefix on the inputted value.
* **suffix**: string (optional, text/number types only) - if set, appends an uneditable prefix on the inputted value (e.g. "px" on a number input would yield an input that looks like `[____px]`.
* **options**: Array (required only for select, multiselect, checklist types) - Array for options for the dropdown control (used when type is select or multiselect). The value is what will be set on the attribute.
* **default**: (optional) - The default value for the property.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.unstack.com/docs/features/properties.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.