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.

<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. This variable is attached to the variable referenced by the dataRef of the component. For example, for Section components it's:

{ 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.