# 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](https://developer.unstack.com/docs/features/values). This variable is attached to the variable referenced by the `dataRef` of the component. For example, for [Section](https://developer.unstack.com/docs/components/section) 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.