How can we organize dropdown values into groups within an AEM dialog?

Hi @mario248,

I don't think so you can use <optgroup> inside an AEM Granite UI dialog the same way you would in plain HTML. The granite/ui/components/coral/foundation/form/select resource type does not support the optgroup element.

Rather do you think these might helpful as an alternateive options?

1. Prefix the options with a "group label"
   Example:

   Theropods - T-Rex

   Theropods - Velociraptor

   Theropods - Allosaurus

   Sauropods - Brachiosaurus

   Sauropods - Diplodocus

   Sauropods - Apatosaurus

   (Simple, but not visually grouped)

2. Use a custom Granite UI widget

   • Extend the Coral Select widget by overlaying or creating a custom rendercondition/datasource that outputs real <optgroup> markup.

   • This requires a clientlib override and isn’t OOTB.

3. Use checkboxes/radio groups inside a fieldset

   • If the UX requires groups, you can switch to a fieldset with multiple checkbox or radio items. That way you get the visual grouping.

Example (what you can do OOTB with checkboxes)

<dinosaurs
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"
    jcr:title="Dinosaurs">
    <theropods
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/checkboxgroup"
        jcr:title="Theropods">
        <trex
            jcr:primaryType="nt:unstructured"
            text="T-Rex"
            value="trex"/>
        <raptor
            jcr:primaryType="nt:unstructured"
            text="Velociraptor"
            value="velociraptor"/>
    </theropods>
    <sauropods
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/checkboxgroup"
        jcr:title="Sauropods">
        <brachiosaurus
            jcr:primaryType="nt:unstructured"
            text="Brachiosaurus"
            value="brachiosaurus"/>
        <diplodocus
            jcr:primaryType="nt:unstructured"
            text="Diplodocus"
            value="diplodocus"/>
    </sauropods>
</dinosaurs><dinosaurs
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"
    jcr:title="Dinosaurs">
    <theropods
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/checkboxgroup"
        jcr:title="Theropods">
        <trex
            jcr:primaryType="nt:unstructured"
            text="T-Rex"
            value="trex"/>
        <raptor
            jcr:primaryType="nt:unstructured"
            text="Velociraptor"
            value="velociraptor"/>
    </theropods>
    <sauropods
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/checkboxgroup"
        jcr:title="Sauropods">
        <brachiosaurus
            jcr:primaryType="nt:unstructured"
            text="Brachiosaurus"
            value="brachiosaurus"/>
        <diplodocus
            jcr:primaryType="nt:unstructured"
            text="Diplodocus"
            value="diplodocus"/>
    </sauropods>
</dinosaurs>