Vue Select Group options Example

Enable group headers through the group property of the options or the optgroup of the native select.

Grouping works for both single and multiple select pickers.

Group headers with single select

                        <script setup>
const myData = [
  { text: 'Atlanta', group: 'US', value: 'atl' },
  { text: 'Boston', group: 'US', value: 'bos' },
  { text: 'Bath', group: 'UK', value: 'bat' },
  { text: 'Bristol', group: 'UK', value: 'bri' }
]
</script>

<template>
  <MbscSelect :data="myData" :touchUi="" />
</template>
                    

Single select

Render a group wheel

Javascript jQuery Angular React Vue

                        <script setup>
const myData = [
  { text: 'Atlanta', group: 'US', value: 'atl' },
  { text: 'Boston', group: 'US', value: 'bos' },
  { text: 'Bath', group: 'UK', value: 'bat' },
  { text: 'Bristol', group: 'UK', value: 'bri' },
  { text: 'Berlin', group: 'DE', value: 'ber' },
  { text: 'Duisburg', group: 'DE', value: 'dus' },
  { text: 'Cologne', group: 'DE', value: 'col' },
  { text: 'Paris', group: 'FR', value: 'par' },
  { text: 'Lyon', group: 'FR', value: 'lyo' }
]
</script>

<template>
  <MbscSelect
    :showGroupWheel="true"
    :data="myData"
    :touchUi=""
  />
</template>
                    

Group wheel

Group headers with multiple select

Javascript jQuery Angular React Vue

                        <script setup>
const myData = [
  { text: 'Camera & Photo', group: 'Electronics', value: 1 },
  { text: 'Cell Phones & Accessories', group: 'Electronics', value: 2 },
  { text: 'GPS & Navigation', group: 'Electronics', value: 3 },
  { text: 'Plugs and Outlets', group: 'Smart Home', value: 4 },
  { text: 'Heating and Cooling', group: 'Smart Home', value: 5 },
  { text: 'Detectors and Sensors', group: 'Smart Home', value: 6 }
]
</script>

<template>
  <MbscSelect
    :data="myData"
    :touchUi=""
  />
</template>
                    

Multi-select

Preview in fullscreen