---
title: "Vue Select Mobile & Desktop usage Example | Mobiscroll"
component: "Select"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/select/mobile-desktop-usage"
---

# Mobile & Desktop usage - Vue Select demo

Vue Select for desktop and mobile. Use a dropdown layout for desktop and native look on mobile. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/select/mobile-desktop-usage)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/pickers/select/mobile-desktop-usage)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/pickers/select/mobile-desktop-usage)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/select/mobile-desktop-usage.md), [jQuery](https://demo.mobiscroll.com/jquery/select/mobile-desktop-usage.md), [Angular](https://demo.mobiscroll.com/angular/select/mobile-desktop-usage.md), [React](https://demo.mobiscroll.com/react/select/mobile-desktop-usage.md)

## Description

Use the select/combobox for both mobile and desktop or set it up responsively.

The main difference between the two rendering modes is how the picker is laid out. Set the `touchUi` option to `false` and the component shows up suitable for larger screens and pointer interaction while setting it to `true` renders it suitable for touch screens.

Use it on an existing form field, custom input, native select or use it on Mobiscroll form fields. You can also embed it directly into your page. When linked to an input, the component will be shown on focus or when someone clicks on the field. Alternatively, you can leave the input editable and show the component only on a button click.

**Handle different screen sizes by setting it up responsively** [Check out the responsive demo →](https://demo.mobiscroll.com/vue/select/responsive)

## What this demo shows

- Shows four single-value select examples in touch and desktop layouts.
- **Select inputs** The first example opens the picker when the user focuses or clicks a standard input. The second opens it only from the `Show picker` button next to the input. The third uses a Mobiscroll input as the trigger.
- **Input behavior** In the three input-based examples, the picker opens below the input and closes when the user clicks outside it.
- **Inline select** The fourth example embeds the picker directly in the page without an input by using inline display mode.
- **Picker content** The input-based examples show a predefined list of options in a dropdown-style popup. Inline mode displays the options directly on the page.
- **Hover state** Hovering over an option highlights it in the picker.
- **Selection** Selecting an option marks it with a checkmark to indicate the current value.
- **Input value** In the input-based examples, selecting an option updates the associated input with that value.

## Best for

- **Responsive forms** Use the touch or desktop layout to match the input method and available screen space.
- **Profile and account forms** Let users choose a single predefined value, such as a country, language, or notification preference.
- **Filters and settings** Provide a compact list for selecting one status, category, display mode, or configuration value.
- **Editable text fields** Keep an input editable while opening the predefined options from a separate button.
- **Always-visible choices** Use inline mode when the option list should remain visible without opening a popup.

## Tutorial

```vue
<script setup>
const myData = [
  { text: 'Atlanta', value: 'atl' },
  { text: 'Berlin', value: 'ber'},
  { text: 'Chicago', value: 'chi'},
  { text: 'London', value: 'lon'}
]
</script>

<template>
  <MbscSelect :data="myData" inputComponent="input" :touchUi="false" />
</template>
```

```vue
<script setup>
const myData = [
  { text: 'Atlanta', value: 'atl' },
  { text: 'Berlin', value: 'ber'},
  { text: 'Chicago', value: 'chi'},
  { text: 'London', value: 'lon'}
]
const isPickerOpen = ref(false)
</script>

<template>
  <MbscSelect
    inputComponent="input"
    :data="myData"
    :showOnClick="false"
    :showOnFocus="false"
    :touchUi="false"
    :isOpen="isPickerOpen"
    @close="isPickerOpen = false"
  />
  <MbscButton @click="isPickerOpen = true">Show picker</MbscButton>
</template>
```

```vue
<script setup>
const myData = [
  { text: 'Atlanta', value: 'atl' },
  { text: 'Berlin', value: 'ber'},
  { text: 'Chicago', value: 'chi'},
  { text: 'London', value: 'lon'}
]
</script>

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

```vue
<script setup>
const myData = [
  { text: 'Atlanta', value: 'atl' },
  { text: 'Berlin', value: 'ber'},
  { text: 'Chicago', value: 'chi'},
  { text: 'London', value: 'lon'}
]
</script>

<template>
  <MbscSelect :data="myData" display="inline" :touchUi="false" />
</template>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/vue/select/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/select/api#opt-themeVariant) - option
- [`data`](https://mobiscroll.com/docs/vue/select/api#opt-data) - option
- [`inputComponent`](https://mobiscroll.com/docs/vue/select/api#opt-inputComponent) - option
- [`inputProps`](https://mobiscroll.com/docs/vue/select/api#opt-inputProps) - option
- [`showOnClick`](https://mobiscroll.com/docs/vue/select/api#opt-showOnClick) - option
- [`showOnFocus`](https://mobiscroll.com/docs/vue/select/api#opt-showOnFocus) - option
- [`isOpen`](https://mobiscroll.com/docs/vue/select/api#opt-isOpen) - option
- [`close`](https://mobiscroll.com/docs/vue/select/api#event-onClose) - event
- [`inputStyle`](https://mobiscroll.com/docs/vue/select/api#opt-inputStyle) - option
- [`display`](https://mobiscroll.com/docs/vue/select/api#opt-display) - option

## Code

### SFC JS

```vue
<script setup>
import { MbscButton, MbscPage, MbscSelect, setOptions } from '@mobiscroll/vue'
import { ref } from 'vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const isPickerOpen = ref(false)
const mySelectValue = ref('atl')

const myData = [
  {
    text: 'Atlanta',
    value: 'atl'
  },
  {
    text: 'Berlin',
    value: 'ber'
  },
  {
    text: 'Chicago',
    value: 'chi'
  },
  {
    text: 'London',
    value: 'lon'
  }
]

const inputProps = {
  class: 'md-mobile-picker-input',
  placeholder: 'Please Select...'
}

function openPicker() {
  isPickerOpen.value = true
}

function handleClose() {
  isPickerOpen.value = false
}
</script>

<template>
  <MbscPage>
    <div class="mbsc-grid">
      <div class="mbsc-form-group">
        <div class="mbsc-row">
          <div class="mbsc-col-12">
            <div class="mbsc-txt-muted md-mobile-picker-header">
              Use the picker with any inputs & show on focus/click
            </div>
            <MbscSelect :data="myData" inputComponent="input" :inputProps="inputProps" />
          </div>
        </div>
      </div>
      <div class="mbsc-form-group">
        <div class="mbsc-row">
          <div class="mbsc-col-12 mbsc-txt-muted md-mobile-picker-header">
            Disable <code>onClick/onFocus</code> and only show on button
          </div>
          <div class="mbsc-col-8">
            <MbscSelect
              inputComponent="input"
              v-model="mySelectValue"
              :data="myData"
              :inputProps="inputProps"
              :showOnClick="false"
              :showOnFocus="false"
              :isOpen="isPickerOpen"
              @close="handleClose"
            />
          </div>
          <div class="mbsc-col-4">
            <MbscButton
              variant="outline"
              color="primary"
              className="md-mobile-picker-button"
              @click="openPicker"
              >Show picker
            </MbscButton>
          </div>
        </div>
      </div>
      <div class="mbsc-form-group">
        <div class="mbsc-row">
          <div class="mbsc-col-12">
            <div class="mbsc-txt-muted md-mobile-picker-header">
              Use the picker with a Mobiscroll input
            </div>
            <MbscSelect
              :data="myData"
              className="md-mobile-picker-box-label"
              inputStyle="box"
              placeholder="Please Select..."
            />
          </div>
        </div>
      </div>
      <div class="mbsc-txt-muted md-mobile-picker-header">Use the picker inline in any page</div>
    </div>
    <div class="md-mobile-picker-inline">
      <MbscSelect :data="myData" display="inline" />
    </div>
  </MbscPage>
</template>

<style>
.md-mobile-picker-header {
  font-size: 14px;
}

.md-mobile-picker-input {
  color: initial;
  width: 100%;
  padding: 10px;
  margin: 6px 0 12px 0;
  border: 1px solid #ccc;
  border-radius: 0;
  font-family: arial, verdana, sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  -webkit-appearance: none;
}

.md-mobile-picker-button.mbsc-button {
  font-size: 13px;
  padding: 0 15px;
  line-height: 36px;
  float: right;
  margin: 6px 0;
  width: 100%;
}

.mbsc-col-no-padding {
  padding-left: 0;
}

.md-mobile-picker-box-label.mbsc-textfield-wrapper-box,
.md-mobile-picker-box-label .mbsc-textfield-wrapper-box,
.md-mobile-picker-inline {
  margin: 6px 0 12px 0;
}
</style>
```

### SFC TS

```vue
<script setup lang="ts">
import { MbscButton, MbscPage, MbscSelect, setOptions } from '@mobiscroll/vue'
import { ref } from 'vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const isPickerOpen = ref<boolean>(false)
const mySelectValue = ref<string>('atl')

const myData = [
  {
    text: 'Atlanta',
    value: 'atl'
  },
  {
    text: 'Berlin',
    value: 'ber'
  },
  {
    text: 'Chicago',
    value: 'chi'
  },
  {
    text: 'London',
    value: 'lon'
  }
]

const inputProps = {
  class: 'md-mobile-picker-input',
  placeholder: 'Please Select...'
}

function openPicker() {
  isPickerOpen.value = true
}

function handleClose() {
  isPickerOpen.value = false
}
</script>

<template>
  <MbscPage>
    <div class="mbsc-grid">
      <div class="mbsc-form-group">
        <div class="mbsc-row">
          <div class="mbsc-col-12">
            <div class="mbsc-txt-muted md-mobile-picker-header">
              Use the picker with any inputs & show on focus/click
            </div>
            <MbscSelect :data="myData" inputComponent="input" :inputProps="inputProps" />
          </div>
        </div>
      </div>
      <div class="mbsc-form-group">
        <div class="mbsc-row">
          <div class="mbsc-col-12 mbsc-txt-muted md-mobile-picker-header">
            Disable <code>onClick/onFocus</code> and only show on button
          </div>
          <div class="mbsc-col-8">
            <MbscSelect
              inputComponent="input"
              v-model="mySelectValue"
              :data="myData"
              :inputProps="inputProps"
              :showOnClick="false"
              :showOnFocus="false"
              :isOpen="isPickerOpen"
              @close="handleClose"
            />
          </div>
          <div class="mbsc-col-4">
            <MbscButton
              variant="outline"
              color="primary"
              className="md-mobile-picker-button"
              @click="openPicker"
              >Show picker
            </MbscButton>
          </div>
        </div>
      </div>
      <div class="mbsc-form-group">
        <div class="mbsc-row">
          <div class="mbsc-col-12">
            <div class="mbsc-txt-muted md-mobile-picker-header">
              Use the picker with a Mobiscroll input
            </div>
            <MbscSelect
              :data="myData"
              className="md-mobile-picker-box-label"
              inputStyle="box"
              placeholder="Please Select..."
            />
          </div>
        </div>
      </div>
      <div class="mbsc-txt-muted md-mobile-picker-header">Use the picker inline in any page</div>
    </div>
    <div class="md-mobile-picker-inline">
      <MbscSelect :data="myData" display="inline" />
    </div>
  </MbscPage>
</template>

<style>
.md-mobile-picker-header {
  font-size: 14px;
}

.md-mobile-picker-input {
  color: initial;
  width: 100%;
  padding: 10px;
  margin: 6px 0 12px 0;
  border: 1px solid #ccc;
  border-radius: 0;
  font-family: arial, verdana, sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  -webkit-appearance: none;
}

.md-mobile-picker-button.mbsc-button {
  font-size: 13px;
  padding: 0 15px;
  line-height: 36px;
  float: right;
  margin: 6px 0;
  width: 100%;
}

.mbsc-col-no-padding {
  padding-left: 0;
}

.md-mobile-picker-box-label.mbsc-textfield-wrapper-box,
.md-mobile-picker-box-label .mbsc-textfield-wrapper-box,
.md-mobile-picker-inline {
  margin: 6px 0 12px 0;
}
</style>
```

## Implementation notes

- `touchUi` (boolean) is the option that switches all four examples between touch-optimized mobile layout (`true`) and pointer-optimized desktop layout (`false`); it does not change which display mode is used, only how the picker is rendered/positioned within it.
- `data` is an array of `{ text, value }` objects (e.g. `{ text: 'Atlanta', value: 'atl' }`); JS/jQuery and Angular instead source the same options from a native `<select>`'s `<option value="...">Text</option>` children (Angular can alternatively use `<mbsc-select-option value="...">`).
- The first example binds the picker to a plain input: React/Vue pass `inputComponent="input"` on `<Select>`/`<MbscSelect>` so the component renders its own bound `<input>`; Angular passes `[inputElement]="myinput"` pointing at a template-referenced `<input #myinput>`; JS/jQuery pass `inputElement: document.getElementById('my-input')`. Focusing or clicking that input opens the picker by default.
- The second example disables the default open triggers with `showOnClick={false}` / `:showOnClick="false"` / `[showOnClick]="false"` / `showOnClick: false` and `showOnFocus` (same pattern) so the picker only opens from a separate `Show picker` button.
- Opening on the button click is declarative in React/Vue: a boolean state (`openPicker`/`isPickerOpen`) drives the `isOpen`/`:isOpen` prop, the button's click handler sets it `true`, and the `onClose`/`@close` handler resets it to `false`. It is imperative in Angular and JS/jQuery: Angular keeps a `@ViewChild('picker', { static: false })` reference to the select and calls `pickerInst.open()`; JS/jQuery call `.mobiscroll('getInst')` (jQuery) or capture the return value of `mobiscroll.select(...)` (JS) once to get the instance, then call `.open()` from the button's click handler.
- The third example binds the picker to a Mobiscroll-styled input instead of a plain one: the trigger input carries the `mbsc-input` attribute/directive (JS/jQuery/Angular) so it renders with Mobiscroll's label/box styling; React/Vue use the same `data`/`touchUi` props without `inputComponent`, since `<Select>`/`<MbscSelect>` renders a Mobiscroll input by default.
- The fourth example sets `display="inline"` (React/Vue prop, Angular attribute) or `display: 'inline'` (JS/jQuery option) to embed the option list directly on the page with no input and no modal.
- `.setVal(value, fireChange)` (JS/jQuery instance method) programmatically preselects a value on the picker instance after creation, e.g. `buttonSelect.setVal('atl', true)` on the button-triggered example; the second argument controls whether the picker's `onChange` handling fires for that programmatic update.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-vue.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config vue
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config vue --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/vue/getting-started/installation

## Related demos

- Next: [Responsive behavior](https://demo.mobiscroll.com/vue/select/responsive.md) - Responsive setup of the Vue select. Change the rendering and positioning dynamically, based on screen size.