Multiple select
Use it on mobile and desktop for listing different options with multiple select. It can be tied to an input, native select or rendered inline. Turn it on by setting selectMultiple to true.
As an alternative to the checkbox list it works great for category filtering... eg. e-commerce solutions.
Looking for single value selection? Check out the previous example →
Demo
<script setup>
const myData = [
{ text: 'Atlanta', value: 'atl' },
{ text: 'Berlin', value: 'ber' },
{ text: 'Boston', value: 'bos' },
{ text: 'Chicago', value: 'chi' },
{ text: 'London', value: 'lon' },
{ text: 'Los Angeles', value: 'la' },
{ text: 'New York', value: 'ny' },
{ text: 'Paris', value: 'par' },
{ text: 'San Francisco', value: 'sf' }
]
</script>
<template>
<MbscSelect
:data="myData"
:selectMultiple="true"
:touchUi=" "
/>
</template>
SFC JSSFC TS
<script setup>
import { MbscSelect, setOptions } from '@mobiscroll/vue'
setOptions({
theme: ' ',
themeVariant: ' '
})
const myData = [
{
value: 1,
text: 'Books'
},
{
value: 2,
text: 'Movies, Music & Games'
},
{
value: 3,
text: 'Electronics & Computers'
},
{
value: 4,
text: 'Home, Garden & Tools'
},
{
value: 5,
text: 'Health & Beauty'
},
{
value: 6,
text: 'Toys, Kids & Baby'
},
{
value: 7,
text: 'Clothing & Jewelry'
},
{
value: 8,
text: 'Sports & Outdoors'
},
{
value: 9,
text: 'Automotive & Industrial'
}
]
</script>
<template>
<MbscSelect
:data="myData"
:selectMultiple="true"
label="Multi-select"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please select..."
/>
</template>
<script setup lang="ts">
import { MbscSelect, setOptions } from '@mobiscroll/vue'
setOptions({
theme: ' ',
themeVariant: ' '
})
const myData = [
{
value: 1,
text: 'Books'
},
{
value: 2,
text: 'Movies, Music & Games'
},
{
value: 3,
text: 'Electronics & Computers'
},
{
value: 4,
text: 'Home, Garden & Tools'
},
{
value: 5,
text: 'Health & Beauty'
},
{
value: 6,
text: 'Toys, Kids & Baby'
},
{
value: 7,
text: 'Clothing & Jewelry'
},
{
value: 8,
text: 'Sports & Outdoors'
},
{
value: 9,
text: 'Automotive & Industrial'
}
]
</script>
<template>
<MbscSelect
:data="myData"
:selectMultiple="true"
label="Multi-select"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please select..."
/>
</template>