Single select
Single value selection is the default behavior of the picker. You can explicitly enable it by setting the selectMultiple to false.
You can dynamically switch between single and multiple select.
Looking for multiple select? Check out the next 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"
:touchUi="SFC JSSFC TS
<script setup>
import { MbscSelect, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
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"
label="Single select"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please select..."
/>
</template>
<script setup lang="ts">
import { MbscSelect, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
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"
label="Single select"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please select..."
/>
</template>