How about optgroup?

[SoldierCorp]

No description provided.

[sagalbot]

Optgroup Support

[kramer65]

@sagalbot - We would really like to use optgroup in vue-select. Would you be willing to accept a donation to add support for optgroup to this library? We could maybe spare say $250?

[joaquinwojcik]

Any updates on this?

[Sjoerd82]

+1 for optgroups!

[Kyii]

+1 for optgroups!

[arggasasao]

+1 for optgroups

[hmshafeeq]

+1 for optgroups

[niqitosiq]

+1 for optgroups

[arggasasao]

Hi! Here my soluction using Vue slots.

<select @change="onChange($event, index)">
  <option selected>seleccionar</option>
  <slot v-for="(item, i) in topItems">
    <optgroup :key="i" v-if="item.sections" :label="item.name">
      <option v-for="(subItem, i) in item.sections.section" :key="i" :value="subItem.url">{{ sub.name }}</option>
    </optgroup>
    <option :key="i" v-if="!item.sections" :value="item.url"> {{ item.name }} </option>
  </slot>
</select>

[ezekielchow]

+1 for optgroups

[SimonFricker]

+1

[Fozar]

+1

[komenixx]

+1

[subtronic]

+1

[smholsen]

+1 Would be awesome

[subtronic]

+1

[jiagbrody]

+1 please...

[sciracioglu]

+1

[Lug-As]

+1 for optgroup, please

[mewlabs]

please, we all need optgroups

[kovalevadim]

very much needed optgroup

[DanielTQI]

please optgroup 😢

[dev-santosh]

+1

[ShetlandJ]

+1

[al-hz]

+1

[YajanaRao]

+1

[cami-espinozaq]

+1

[kudinov-1]

+1

[willimaese]

+1

[hfelipeoliveira]

+1

[mkEmperor]

+1

[theneonwhale]

+1

[yasser-jam]

+1

[Dirk-Kokx]

+1

[Rolaxxx3]

+1

[effetmonstre]

+1

[mau4gdp]

+1

[phimaur]

`

<script> function selectableOption( option ) { return option.heading != true; } </script>

           <VueSelect
                multiple
              :options="menuTags"
              :selectable="selectableOption"
              placeholder="Choose multiple values.."
          >
              <template #option="{ label, tag, heading }">
                  <h5 v-if="heading" class="mb-0">{{ label }}</h5>
                  <span v-else class="ms-3">{{ label }}</span>
              </template>
          </VueSelect>

`

Here is a possible solution which looks similar as the optgroup.
I set the options array with objects. The group is identified by a heading boolean.

• when heading is set, selectable prop makes it unselectable
• the option slot set a different rendering with a small margin when the heading is not set.

[rlidev]

+1

[warmfire540]

another "workaround" until implemented, however v-select and v-overflow-btn can take an item w/ property header - and it shows semi grouped... or at least what I want..

here's a lone site which hinted at the property (which I missed in the v-select docs) but also works for overflow (not mentioned in docs): https://ourcodeworld.com/articles/read/1561/whats-the-equivalent-to-optgroup-selects-in-vuetify

[iwasherefirst2]

`

<script> function selectableOption( option ) { return option.heading != true; } </script>

           <VueSelect
                multiple
              :options="menuTags"
              :selectable="selectableOption"
              placeholder="Choose multiple values.."
          >
              <template #option="{ label, tag, heading }">
                  <h5 v-if="heading" class="mb-0">{{ label }}</h5>
                  <span v-else class="ms-3">{{ label }}</span>
              </template>
          </VueSelect>

`

Here is a possible solution which looks similar as the optgroup. I set the options array with objects. The group is identified by a heading boolean.

* when heading is set, selectable prop makes it unselectable

* the option slot set a different rendering with a small margin when the heading is not set.

Thank you! Works with Vue3.

So for everyone who doesn't understand, you have to add the headings flat within your options (no grouping inside your options array), so its like this:

options = [
   { label: "Heading 1 ", heading: true} , 
   { label:  "Option A", id: 4, heading: false},  
   { label:  "Option B", id: 2, heading: false},
   { label: "Heading 2 ", heading: true} , 
   { label:  "Option C", id: 8, heading: false},  
   { label:  "Option D", id: 9, heading: false},
]

[jackmcdade]

@warmfire540 thank you so much for this, you saved my bacon today! I'd like to share it with you as my token of gratitude 🥓