# How to create groups in the custom component properties

**URL:** <https://forums.realmacsoftware.com/t/how-to-create-groups-in-the-custom-component-properties/44041>\
**Category:** Elements API\
**Created:** [August 1, 2024, 2:12pm UTC](https://forums.realmacsoftware.com/t/how-to-create-groups-in-the-custom-component-properties/44041 "2024-08-01T14:12:58Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 1, 2024, 2:12pm UTC](https://forums.realmacsoftware.com/t/how-to-create-groups-in-the-custom-component-properties/44041/1 "2024-08-01T14:12:58Z")

</div>

must be doing something wrong, copied from manual but doesn’t divide the areas as I expect

see example lots of custom stuff , went a bit over the top

also with the slider is there a way of changing the increments of 1 to another number

update link forgot to turn main container background on

```auto
https://www.dropbox.com/scl/fo/9t3kykn53r9m8x0lnrgvp/AFI5ft1DUWbXfvlnIWSCxe4?rlkey=d4hd7rwy6rs340b380rqwuwij&st=r969pfev&dl=0

```

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [August 1, 2024, 7:09pm UTC](https://forums.realmacsoftware.com/t/how-to-create-groups-in-the-custom-component-properties/44041/2 "2024-08-01T19:09:56Z")

</div>

> [@upssjw](#):
>
> also with the slider is there a way of changing the increments of 1 to another number

I don’t think so, and I’m not sure of the use case for this…

> [@upssjw](#):
>
> must be doing something wrong, copied from manual but doesn’t divide the areas as I expect

Here’s a code sample that displays two groups in the properties file:

```auto
{
    "groups": [{
        "title" : "Group 1",
        "properties" : [{
            "title": "Title",
            "property": "title",
            "text": {}
        }]
    },

    {
        "title" : "Group 2",
        "properties" : [
              {
            "title": "Image",
            "property": "image",
            "image": {}
            },

        ]
    }
    ]

}

```

And it looks like this in Elements…

 ![CleanShot 2024-08-01 at 8 .08.49@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/8/a/8a879d6b75fd71fbb489bab65f8e2a623332eeb3.jpeg)

Hope that helps!

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 1, 2024, 8:48pm UTC](https://forums.realmacsoftware.com/t/how-to-create-groups-in-the-custom-component-properties/44041/3 "2024-08-01T20:48:09Z")

</div>

Dan that’s what I tried before not sure it works with all the properties I have, trying to group into sections, still might not be understanding  
I was able to group multiple images that was about it

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 1, 2024, 8:55pm UTC](https://forums.realmacsoftware.com/t/how-to-create-groups-in-the-custom-component-properties/44041/4 "2024-08-01T20:55:38Z")

</div>

creating my own pixel control area in Elements, brilliant program / app, added a couple more, except image bug in preview

```auto
https://www.dropbox.com/scl/fo/9t3kykn53r9m8x0lnrgvp/AFI5ft1DUWbXfvlnIWSCxe4?rlkey=d4hd7rwy6rs340b380rqwuwij&st=nntsod7b&dl=0

```

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 1, 2024, 9:16pm UTC](https://forums.realmacsoftware.com/t/how-to-create-groups-in-the-custom-component-properties/44041/5 "2024-08-01T21:16:20Z")

</div>

Reason for larger increments, example z index in tailwind is in 10s or their website shows this

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [August 2, 2024, 12:18pm UTC](https://forums.realmacsoftware.com/t/how-to-create-groups-in-the-custom-component-properties/44041/6 "2024-08-02T12:18:38Z")

</div>

We support an `items` array in sliders so you could do this:

```auto
{
  "title": "Z Index",
  "id": "zIndex",
  "format": "z-{{value}}",
  "slider": {
    "default": "0",
    "items": [
      {
        "value": "0",
        "title": "0"
      },
      {
        "value": "10",
        "title": "10"
      },
      {
        "value": "20",
        "title": "20"
      },
      {
        "value": "30",
        "title": "30"
      },
      {
        "value": "40",
        "title": "40"
      },
      {
        "value": "50",
        "title": "50"
      }
    ]
  }
},

```

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 2, 2024, 1:56pm UTC](https://forums.realmacsoftware.com/t/how-to-create-groups-in-the-custom-component-properties/44041/7 "2024-08-02T13:56:16Z")

</div>

works a treat excellent

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [August 2, 2024, 6:37pm UTC](https://forums.realmacsoftware.com/t/how-to-create-groups-in-the-custom-component-properties/44041/8 "2024-08-02T18:37:16Z")

</div>

> [@ben](#):
>
> `items` array in sliders so you could do this:

Ah, forgot about this 🤪 Have added it to the dev docs 🤓

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 3, 2024, 9:15am UTC](https://forums.realmacsoftware.com/t/how-to-create-groups-in-the-custom-component-properties/44041/9 "2024-08-03T09:15:05Z")

</div>

Dan finally worked out groups in custom HTML, using your example

Also played a bit more with sections containers etc, get the layered approach, kind of just understanding where you want to target, might be the built in drop in sections you could be able to see the layout but only edit as is, might help when you first use Elements

 ![Screenshot 2024-08-03 at 10.09.36](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/3/2/329a8b3c846e79de076cc9f1c42bb0a56ec6a50a.jpeg)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [August 3, 2024, 10:19am UTC](https://forums.realmacsoftware.com/t/how-to-create-groups-in-the-custom-component-properties/44041/10 "2024-08-03T10:19:37Z")

</div>

Looking good, it gets very addictive building custom components ☺

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 3, 2024, 6:48pm UTC](https://forums.realmacsoftware.com/t/how-to-create-groups-in-the-custom-component-properties/44041/11 "2024-08-03T18:48:48Z")

</div>

updated with groups and the z-index increments of ten,

```auto
https://www.dropbox.com/scl/fo/9t3kykn53r9m8x0lnrgvp/AFI5ft1DUWbXfvlnIWSCxe4?rlkey=d4hd7rwy6rs340b380rqwuwij&st=wl3ul1lt&dl=0

```