# typedInput with optgroup

**URL:** <https://discourse.nodered.org/t/typedinput-with-optgroup/101743>\
**Category:** Feature Requests\
**Tags:** typedinput, optgroup\
**Created:** [5 September 2026 14:31 UTC](https://discourse.nodered.org/t/typedinput-with-optgroup/101743 "2026-09-05T14:31:31Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [5 September 2026 14:31 UTC](https://discourse.nodered.org/t/typedinput-with-optgroup/101743/1 "2026-09-05T14:31:31Z")

</div>

I am working on some updates on one of my Nodes.

I have created a list of options for my type.

```auto

Nodes.push({
    value: `ZWJS-LOC:${location}`,
    label: `${location.toUpperCase()}`,
});

const input = $('#node-input-filteredNodeId');
input.typedInput({
    type: 'nodes',
    types: [{
        value: 'nodes',
        multiple: true,
        options: Nodes,
    }]
});

```

I have a need to create separators.

 ![Screenshot 2026-09-05 at 15.29.46](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/6/76158c306c03580d0307a52034cef66d7ae0eb6e.png)

Now, I am managing this with some very hacky methods (I am not happy with my self)  
so, I'll ask:

is there a native way to do this with `typedInput` using a custom list of options.

- I,e using some type of `optgroup` support?

I couldn't see anything in docs, but understand this can sometimes be outdated

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [5 September 2026 14:48 UTC](https://discourse.nodered.org/t/typedinput-with-optgroup/101743/2 "2026-09-05T14:48:13Z")

</div>

You can use the `icon` property to inject HTML content, just like the `conf-types` type does. But I don't know if you'll be able to get the desired final result.

> <https://github.com/node-red/node-red/blob/main/packages/node_modules/%40node-red/editor-client/src/js/ui/common/typedInput.js#L661-L684>

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [5 September 2026 14:50 UTC](https://discourse.nodered.org/t/typedinput-with-optgroup/101743/3 "2026-09-05T14:50:37Z")

</div>

Thanks - but not sure that is what I am after..  
I just need a way to create groups of options (at least a separator) - where that separator is not selectable and that it is not used in the final serialised value that is stored.

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [5 September 2026 15:06 UTC](https://discourse.nodered.org/t/typedinput-with-optgroup/101743/4 "2026-09-05T15:06:28Z")

</div>

Indeed 😕 I'll look into a way to integrate it.

Something like:

```ts
// options =
Array<{ value: string; label: string; group?: string }>
// or
Array<{ value?: string; label: string; group?: Array<{ value: string; label: string }> }>

```

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [5 September 2026 15:20 UTC](https://discourse.nodered.org/t/typedinput-with-optgroup/101743/5 "2026-09-05T15:20:40Z")

</div>

Its based on this...

> **[default - TypedInput Widget : Node-RED](https://nodered.org/docs/api/ui/typedInput/#options-default)**
>
> Type: String

```auto
$("#node-input-example5").typedInput({type:"fruit", types:[{
    value: "fruit",
    multiple: true,
    options: [
        { value: "apple", label: "Apple"},
        { value: "banana", label: "Banana"},
        { value: "cherry", label: "Cherry"},
    ]
}]})

```

I have used it for a while.  
Problem is, this doesn't seem to support `optgroup`, so something like

```auto
$("#node-input-example5").typedInput({type:"foods", types:[{
    value: "foods",
    multiple: true,
    options: [

        { value: "apple", label: "Apple", group: "Fruit"},
        { value: "banana", label: "Banana", group: "Fruit"},
        { value: "cherry", label: "Cherry", group: "Fruit"},

        { value: "twix", label: "Apple", group: "Chocolate"},
        { value: "chomp", label: "Banana", group: "Chocolate"},
        { value: "Curley-wirly", label: "Cherry", group: "Chocolate"},
    ]
}]})

```

 ![Screenshot 2026-09-05 at 16.19.58](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/e/6e4e26c3e6f1c2fc501a1d9297799a12eefd823a.png)

I think will be a great upgrade?

Note: Im going to move this to an FR.

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [5 September 2026 15:24 UTC](https://discourse.nodered.org/t/typedinput-with-optgroup/101743/6 "2026-09-05T15:24:45Z")

</div>

> [@marcus-j-davies](#):
>
> I think will be a great upgrade?

Yep 😜

The question is: can the appearance of the separator be customized? The data format will depend on this. Using custom optgroup.

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [5 September 2026 15:31 UTC](https://discourse.nodered.org/t/typedinput-with-optgroup/101743/7 "2026-09-05T15:31:22Z")

</div>

I think if this is seen as an accepted feature.  
one should denote that the options are grouped?

```auto
$("#node-input-example5").typedInput({type:"foods", types:[{
    value: "foods",
    multiple: true,
    grouped: true, /* <-- Here */
    options: [

        { value: "apple", label: "Apple", group: "Fruit"},
        { value: "banana", label: "Banana", group: "Fruit"},
        { value: "cherry", label: "Cherry", group: "Fruit"},

        { value: "twix", label: "Apple", group: "Chocolate"},
        { value: "chomp", label: "Banana", group: "Chocolate"},
        { value: "Curley-wirly", label: "Cherry", group: "Chocolate"},
    ]
}]})

```

Example...

Devs might group certain options - but not all.

`grouped:true`

- Options are only visible if they have a `group`

`grouped:false | undefined`

- `group` is ignored - A flat list

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [5 September 2026 17:47 UTC](https://discourse.nodered.org/t/typedinput-with-optgroup/101743/8 "2026-09-05T17:47:28Z")

</div>

+1 for groups!

When working on version 3 of CronPlus, I went hunting in the source code for group support after finding that separators were not a thing.

If anyone does pick this up, I would hope that on top of group support, it would add simple line separator support too.

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [6 September 2026 09:16 UTC](https://discourse.nodered.org/t/typedinput-with-optgroup/101743/9 "2026-09-06T09:16:38Z")

</div>

In the mean time,  
I have a clean way of doing this...

 ![Screenshot 2026-09-06 at 10.14.21](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/6/c6adced2af6d30d177d68c750d192ee1ae96faa1.png)

When I know something in my list is a separator.  
I ensure its `value` has a maker : `ZWJS-LOC:XXXX`

Then css it out

```auto
a[value^="ZWJS-LOC:"] {
	font-weight: bold;
	pointer-events: none;
	background-color: var(--red-ui-form-button-background);
}

a[value^="ZWJS-LOC:"] input[type="checkbox"] {
	display: none;
}

```

Seems to work well for the interim.

using this...  
adding something like `isSeparator` to an `option` as apart of the native support, I think will allow great control of this..

```auto
$("#node-input-example5").typedInput({type:"foods", types:[{
    value: "foods",
    multiple: true,
    options: [

        { label: "Fuit", isSeparator: true},
        { value: "apple", label: "Apple"},
        { value: "banana", label: "Banana"},
        { value: "cherry", label: "Cherry"},

        { label: "Chocolate", isSeparator: true},
        { value: "twix", label: "twix"},
        { value: "chomp", label: "chomp"},
        { value: "Curley-wirly", label: "Curley-wirly"},
    ]
}]})

```