Customization on Content Fragment Add multifield contain 3 text field in CF [AEM6.5]

[Marcos_aem]

Hi Team,
I need reference where I want to add a custom multifield which contain [3 text field] in content fragment.
I came across some good documentation

• https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/ext...
• https://aem4beginner.blogspot.com/adding-custom-field-to-aem-content 
• https://blogs.perficient.com/2021/05/27/how-to-extend-content-fragment-model-data-types/ 

But I am not able to add multifield which contain [3 text fields] in Content Fragment :

Like I want to include multifield

{
    "jcr:primaryType": "nt:unstructured",
    "colors": {
        "jcr:primaryType": "nt:unstructured",
        "composite": true,
        "fieldLabel": "Colors",
        "sling:resourceType": "granite/ui/components/coral/foundation/form/multifield",
        "fieldDescription": "Click 'Add field' to add a new color",
        "granite:data": {
            "jcr:primaryType": "nt:unstructured",
            "item-limit": "2"
        },
        "field": {
            "jcr:primaryType": "nt:unstructured",
            "name": "./colors",
            "sling:resourceType": "granite/ui/components/coral/foundation/container",
            "items": {
                "jcr:primaryType": "nt:unstructured",
                "color": {
                    "jcr:primaryType": "nt:unstructured",
                    "name": "color",
                    "fieldLabel": "Color",
                    "sling:resourceType": "granite/ui/components/coral/foundation/form/textfield",
                    "fieldDescription": "Fill in a hex value: # and 6 characters"
                },
                "color2": {
                    "jcr:primaryType": "nt:unstructured",
                    "name": "color2",
                    "fieldLabel": "Color2",
                    "sling:resourceType": "granite/ui/components/coral/foundation/form/textfield",
                    "fieldDescription": "Fill in a hex value: # and 6 characters"
                },
                "color3": {
                    "jcr:primaryType": "nt:unstructured",
                    "name": "color3",
                    "fieldLabel": "Color3",
                    "sling:resourceType": "granite/ui/components/coral/foundation/form/textfield",
                    "fieldDescription": "Fill in a hex value: # and 6 characters"
                }
            }
        }
    }
}

Please let me know the way to achieve this.

Thank you !

@kautuk_sahni  @arunpatidar  @lukasz-m  @EstebanBustamante 

[priyak]

@Marcos_aem Can you provide more info regarding how do you want to expose the above mentioned multifield ?

If its at component level - there is a way we can achieve it

[arunpatidar · Accepted solution]

Hi,
Please check this https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/custom-multifield-in-conte... 

[kautuk_sahni]

@Marcos_aem Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!