Optgroup support for select boxes?

[lchartier]

I have a bunch of units of measure that can be toggled on/off in the twill crud (cm, m, in, ft, lb, ton, kg, tonne, etc...) and i want to populate a select box by grouping them by type using html optgroup such as:

length <-- optgroup, unselectable
cm
m
in
ft
mass <-- optgroup, unselectable
kg
tonne
lb
ton
etc...

see an example here: https://www.w3schools.com/tags/tag_optgroup.asp

Optgroup(s) do not seem to be supported by @formfield in templates so is there a possible workaround? Can I create the @formfield object and inject it at runtime (or are they precompiled). Anything else I can do?

[pboivin]

Hi @lchartier, I don't think this is currently possible with the built-in fields but, if you're comfortable with Vue.js and want to explore this a bit more, I would recommend looking at the Select.vue component.

This corresponds to the native mode of the select field:

@formField('select', [
    'name' => 'choice',
    'label' => 'Choice',
    'native' => true,
    'options' => [ ... ],
])

I believe this can be quickly adapted to support optgroup.

Hope this can help!