Is there option group on Vuetify?

Question

I'd like to have a option group (like this) on a vuetify select.

Is that possible? And if it is, how do I do it?

Answer 1

OUTDATED : See @DevNik answer below for proper implementation

---

You can do this adding divider in your select's data and using template to have a better control over how your select is displaying data.

Like this :

HTML

<v-select
    v-model="peopleSelected"
    :items="people"
    box
    chips
    color="blue-grey lighten-2"
    label="Select"
    item-text="name"
    item-value="name"
    multiple
  >
    <!-- Template for render selected data -->
    <template
      slot="selection"
      slot-scope="data"
    >
      <v-chip
        :selected="data.selected"
        close
        class="chip--select-multi"
        @input="remove(data.item)"
      >
        {{ data.item.name }}
      </v-chip>
    </template>
    <!-- Template for render data when the select is expanded -->
    <template
      slot="item"
      slot-scope="data"
    >
      <!-- Divider and Header-->
      <template v-if="typeof data.item !== 'object'">
        <v-list-tile-content v-text="data.item"/>
      </template>
      <!-- Normal item -->
      <template v-else>
        <v-list-tile-content>
          <v-list-tile-title v-html="data.item.name"/>
          <v-list-tile-sub-title v-html="data.item.group"/>
        </v-list-tile-content>
      </template>
    </template>
  </v-select>

Data

data: () => ({
    peopleSelected:[],
    people: [
        { header: 'Group 1' },
        { name: 'Sandra Adams', group: 'Group 1' },
        { name: 'Ali Connors', group: 'Group 1' },
        { name: 'Trevor Hansen', group: 'Group 1' },
        { name: 'Tucker Smith', group: 'Group 1'},
        { divider: true },
        { header: 'Group 2' },
        { name: 'Britta Holt', group: 'Group 2'},
        { name: 'Jane Smith ', group: 'Group 2'},
        { name: 'John Smith', group: 'Group 2' },
        { name: 'Sandra Williams', group: 'Group 2' }
      ]
  })

CodePen