---
title: "Vue Select Setting values Example | Mobiscroll"
component: "Select"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/select/setting-values-defaults"
---

# Setting values - Vue Select demo

Vue Select scroller demo with examples for programmatically setting values and defaults for single/multiple select. For Vue and Nuxt.

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

## Description

Values can change in a couple of different ways: through defaults, interacting with the UI or programmatically. The select defaults to `null` (nothing is selected), which can be easily overridden with the [`defaultSelection`](https://mobiscroll.com/docs/vue/select/api#opt-defaultSelection) option. The values are set by interacting with the component and making a selection or it can be done programmatically. Use the [`buttons`](https://mobiscroll.com/docs/vue/select/api#opt-buttons) option for showing/hiding `set`, `cancel` or add custom buttons.

## What this demo shows

- Three groups of Select examples demonstrate how to initialize, change, and confirm selected values.
- **Controlling the default value** The first example starts with no selected value. The second uses the `defaultSelection` option to highlight an initial value when the picker opens; the user must confirm it before it becomes the selected value.
- **Setting values at runtime** An inline Select displays the picker directly on the page without an input. The Boston and London buttons above it use the `setVal` method to change the value programmatically, while the value can still be changed through the Select UI.
- **Setting values with buttons** The first example adds a custom button between the Cancel and Set buttons in the picker header. The second shows only a Cancel button in the footer and applies a value automatically when the user selects it, closing the dialog without requiring a separate Set action.
- **Select inputs** Focusing or clicking an input opens its picker below the input. Clicking outside the picker closes it.
- **Picker content** Input-based examples display a predefined list of options in a dropdown-style popup, while the inline example displays the options directly on the page.
- **Hover state** Hovering over an option highlights it.
- **Selection** Selecting an option marks it with a checkmark to indicate the current value.
- **Input value** In the input-based examples, confirming a selection updates the associated input with that value.

## Best for

- **Optional form fields** Start with no selected value when users should make an explicit choice.
- **Suggested defaults** Present a preselected option while requiring users to confirm it before applying the value.
- **External controls** Update a Select programmatically from preset buttons or other controls outside the component.
- **Inline selection** Keep a small set of options visible on the page when opening a separate popup would interrupt the workflow.
- **Explicit confirmation** Use Cancel and Set actions when users should review a choice before applying it.
- **Immediate selection** Remove the Set action when choosing an option should apply the value and close the dialog immediately.
- **Custom picker actions** Add a custom button when the selection flow needs a dedicated shortcut alongside the standard actions.

## Tutorial

### Controlling the default value

The select has no selected value by default. You can however manually set a default value through the [`defaultSelection`](https://mobiscroll.com/docs/vue/select/api#opt-defaultSelection) option. This value will show as selected when opening the control, but it needs to be submitted to be accepted as a selected value.

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

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

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

<template>
  <MbscSelect
    :data="myData"
    defaultSelection="myDefaultSelection"
  />
</template>
```

### Setting values runtime

While the selected value can be changed by interacting with the select, you can set the model value to change it programmatically.

```vue
<script setup>
const myCustom = ref()
function setBoston() {
  myCustom.value = 'bos'
}
function setLondon() {
  myCustom.value = 'lon'
}
</script>
<template>
  <MbscButton @click="setBoston">Boston</MbscButton>
  <MbscButton @click="setLondon">London</MbscButton>
  <MbscSelect :data="myData" v-model="myCustom" />
</template>
```

### Setting values with buttons

The button API provides shortcuts to value selection and confirmation. Add a custom button and/or remove the 'Set' button to activate auto-set, which automatically closes the dialog if a value is selected.

```vue
<script setup>
const custom = ref()
const customRef = ref()
const customButtons = [{
  text: 'Custom',
  handler: () => {
    customRef.value.instance.setTempVal('chi')
  }
}, 'set', 'cancel']
</script>

<template>
  <MbscSelect
    v-model="custom"
    ref="customRef"
    :data="myData"
    :buttons="customButtons"
  />
</template>
```

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

<template>
  <MbscSelect
    :data="myData"
    :buttons="autoButtons"
  />
</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
- [`setTempVal`](https://mobiscroll.com/docs/vue/select/api#method-setTempVal) - method
- [`label`](https://mobiscroll.com/docs/vue/select/api#opt-label) - option
- [`inputStyle`](https://mobiscroll.com/docs/vue/select/api#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/vue/select/api#opt-labelStyle) - option
- [`data`](https://mobiscroll.com/docs/vue/select/api#opt-data) - option
- [`defaultSelection`](https://mobiscroll.com/docs/vue/select/api#opt-defaultSelection) - option
- [`display`](https://mobiscroll.com/docs/vue/select/api#opt-display) - option
- [`buttons`](https://mobiscroll.com/docs/vue/select/api#opt-buttons) - 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 myData = [
  {
    text: 'Atlanta',
    value: 'atl'
  },
  {
    text: 'Berlin',
    value: 'ber'
  },
  {
    text: 'Boston',
    value: 'bos'
  },
  {
    text: 'Chicago',
    value: 'chi'
  },
  {
    text: 'London',
    value: 'lon'
  }
]

const myDefaultSelection = 'ber'
const myCustom = ref()

const custom = ref()
const customRef = ref()

const customButtons = [
  {
    text: 'Custom',
    handler: () => {
      customRef.value.instance.setTempVal('chi')
    }
  },
  'set',
  'cancel'
]

const autoButtons = ['close']

function setBoston() {
  myCustom.value = 'bos'
}

function setLondon() {
  myCustom.value = 'lon'
}
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Controlling the default value</div>
      <MbscSelect
        label="Default"
        inputStyle="outline"
        labelStyle="stacked"
        placeholder="Please select..."
        :data="myData"
      />
      <MbscSelect
        label="Custom default"
        inputStyle="outline"
        labelStyle="stacked"
        placeholder="Please select..."
        :data="myData"
        :defaultSelection="myDefaultSelection"
      />
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Setting a custom value</div>
      <div class="mbsc-button-group-block">
        <MbscButton @click="setBoston">Boston</MbscButton>
        <MbscButton @click="setLondon">London</MbscButton>
      </div>
      <MbscSelect :data="myData" v-model="myCustom" display="inline" />
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Buttons API</div>
      <MbscSelect
        ref="customRef"
        label="Custom"
        inputStyle="outline"
        labelStyle="stacked"
        placeholder="Please select..."
        v-model="custom"
        :data="myData"
        :buttons="customButtons"
      />
      <MbscSelect
        label="Auto set"
        inputStyle="outline"
        labelStyle="stacked"
        placeholder="Please select..."
        :data="myData"
        :buttons="autoButtons"
      />
    </div>
  </MbscPage>
</template>
```

### 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 myData = [
  {
    text: 'Atlanta',
    value: 'atl'
  },
  {
    text: 'Berlin',
    value: 'ber'
  },
  {
    text: 'Boston',
    value: 'bos'
  },
  {
    text: 'Chicago',
    value: 'chi'
  },
  {
    text: 'London',
    value: 'lon'
  }
]

const myDefaultSelection = 'ber'
const myCustom = ref()

const custom = ref()
const customRef = ref()

const customButtons = [
  {
    text: 'Custom',
    handler: () => {
      customRef.value.instance.setTempVal('chi')
    }
  },
  'set',
  'cancel'
]

const autoButtons = ['close']

function setBoston() {
  myCustom.value = 'bos'
}

function setLondon() {
  myCustom.value = 'lon'
}
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Controlling the default value</div>
      <MbscSelect
        label="Default"
        inputStyle="outline"
        labelStyle="stacked"
        placeholder="Please select..."
        :data="myData"
      />
      <MbscSelect
        label="Custom default"
        inputStyle="outline"
        labelStyle="stacked"
        placeholder="Please select..."
        :data="myData"
        :defaultSelection="myDefaultSelection"
      />
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Setting a custom value</div>
      <div class="mbsc-button-group-block">
        <MbscButton @click="setBoston">Boston</MbscButton>
        <MbscButton @click="setLondon">London</MbscButton>
      </div>
      <MbscSelect :data="myData" v-model="myCustom" display="inline" />
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Buttons API</div>
      <MbscSelect
        ref="customRef"
        label="Custom"
        inputStyle="outline"
        labelStyle="stacked"
        placeholder="Please select..."
        v-model="custom"
        :data="myData"
        :buttons="customButtons"
      />
      <MbscSelect
        label="Auto set"
        inputStyle="outline"
        labelStyle="stacked"
        placeholder="Please select..."
        :data="myData"
        :buttons="autoButtons"
      />
    </div>
  </MbscPage>
</template>
```

## Implementation notes

- `data` is an array of `{ text, value }` objects (e.g. `{ text: 'Atlanta', value: 'atl' }`) that defines the option list; it is the same shape whether the select is input-based or `display: 'inline'`.
- With no `defaultSelection` set, the select's value starts as `null`/unselected and the input shows the `placeholder` text.
- `defaultSelection` takes a `value` from `data` (e.g. `'ber'`) and pre-highlights that option when the picker opens; it does not set the committed value until the user confirms it (via the `set`/default confirm action).
- `display: 'inline'` renders the option list directly on the page instead of behind an input-triggered popup; it is combined with a `height` (e.g. `300`) to make the list scrollable within a fixed area.
- The `.setVal(value)` instance method sets the selected value programmatically at runtime, independent of `defaultSelection` - the demo calls it from external button click handlers (e.g. `.setVal('bos')`, `.setVal('lon')`).
- The `.setTempVal(value)` instance method stages a value into the (not-yet-confirmed) temporary selection without committing it - used from a custom `buttons` handler so the value still requires the `set`/confirm action (or auto-set) to apply.
- `buttons` is an array mixing predefined action strings (`'set'`, `'cancel'`) and custom button objects `{ text, handler }`; a custom entry is inserted between the predefined ones to add a dedicated action (e.g. `{ text: 'Custom', handler: () => instance.setTempVal('chi') }`).
- Omitting `'set'` from `buttons` (e.g. `buttons: ['cancel']`) switches the picker to auto-set behavior: selecting an option applies the value and closes the popup immediately, without a separate confirm step.
- Per framework, programmatic value control differs: JS/jQuery call `.setVal(value)` / `.setTempVal(value)` on the instance (JS: captured directly from the return value of `mobiscroll.select(...)`; jQuery: obtained via `.mobiscroll('getInst')`); React drives value via a `value` prop bound to component state (`useState`) updated from button `onClick` handlers, and reads/sets a `ref` (`selectRef.current!.setTempVal(...)`) for the buttons-API case; Vue binds `v-model` to a `ref()` for the runtime-value case, and accesses `customRef.value.instance.setTempVal(...)` for the buttons-API case; Angular binds `[(ngModel)]` to a component property for the runtime-value case, and calls `.setTempVal(...)` through a `@ViewChild` reference to the `<mbsc-select>` for the buttons-API case.

## 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

- Previous: [Multi level hierarchy](https://demo.mobiscroll.com/vue/select/linked-hierarchical-pickers.md) - Vue hierarchical select example. Dynamically populate linked lists based on previous selection.