---
title: "Vue Select Disabled values Example | Mobiscroll"
component: "Select"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/select/disabled-invalid-values"
---

# Disabled values - Vue Select demo

Vue select example for setting invalid options. For Vue and Nuxt.

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

## Description

Enforcing validation is essential to a great UX. It supports the following:

Having invalids set up correctly not just enhances the UX, but improves performance.

## What this demo shows

- A single-value Select with specific options disabled.
- **Inline select** Embeds the picker directly in the page without an input by using the inline display mode.
- **Picker options** Displays enabled and disabled options together, with disabled values shown in gray.
- **Hover state** Highlights an option on hover and shows an icon for disabled values to indicate that they cannot be selected.
- **Selection** Marks the current value with a checkmark and allows selection only from enabled options.

## Best for

- **Temporary unavailability** Keeping unavailable products, services, locations, or time slots visible while preventing users from selecting them.
- **Eligibility rules** Showing choices that are unavailable because of permissions, account settings, or other requirements.
- **Dependent selections** Disabling choices that conflict with a value selected in another field.
- **Inventory or capacity limits** Indicating sold-out, fully booked, or out-of-stock choices without removing them from the list.
- **Fixed option lists** Preserving the full list and its order while clearly distinguishing valid choices from disabled ones.

## Tutorial

```vue
<script setup>
const myData = [
  { text: 'Atlanta', value: 'atl' },
  { text: 'Berlin', value: 'ber' },
  { text: 'Boston', value: 'bos' },
  { text: 'Chicago', value: 'chi', disabled: true },
  { text: 'London', value: 'lon', disabled: true },
  { 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="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
- [`disabled`](https://mobiscroll.com/docs/vue/select/api#opt-disabled) - option
- [`data`](https://mobiscroll.com/docs/vue/select/api#opt-data) - option
- [`display`](https://mobiscroll.com/docs/vue/select/api#opt-display) - option

## Code

### SFC JS

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

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

const myData = [
  {
    text: 'Atlanta',
    value: 'atl'
  },
  {
    text: 'Berlin',
    value: 'ber'
  },
  {
    text: 'Boston',
    value: 'bos'
  },
  {
    text: 'Chicago',
    value: 'chi',
    disabled: true
  },
  {
    text: 'London',
    value: 'lon',
    disabled: true
  },
  {
    text: 'Los Angeles',
    value: 'la'
  },
  {
    text: 'New York',
    value: 'ny'
  },
  {
    text: 'Paris',
    value: 'par'
  },
  {
    text: 'San Francisco',
    value: 'sf'
  }
]
</script>

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

### SFC TS

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

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

const myData = [
  {
    text: 'Atlanta',
    value: 'atl'
  },
  {
    text: 'Berlin',
    value: 'ber'
  },
  {
    text: 'Boston',
    value: 'bos'
  },
  {
    text: 'Chicago',
    value: 'chi',
    disabled: true
  },
  {
    text: 'London',
    value: 'lon',
    disabled: true
  },
  {
    text: 'Los Angeles',
    value: 'la'
  },
  {
    text: 'New York',
    value: 'ny'
  },
  {
    text: 'Paris',
    value: 'par'
  },
  {
    text: 'San Francisco',
    value: 'sf'
  }
]
</script>

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

## Implementation notes

- Two equivalent ways to mark an option unselectable, matching the two data-population paths from data-sources:
  - **Markup-based (JS/jQuery only)**: add the `disabled` attribute to the `<option>` element, e.g. `<option value="chi" disabled>Chicago</option>`.
  - **`data`-option based (all frameworks)**: add `disabled: true` to that item's object, e.g. `{ text: 'Chicago', value: 'chi', disabled: true }`. This is the only path available to React, Angular, and Vue - they always populate via `data`/`[data]`/`:data`, never inline markup.
- `display: 'inline'` renders the picker directly in the page as a static list (no separate input, no popup/dropdown chrome) - this is what the demo uses so both enabled and disabled options are visible side by side at once.
- Disabled entries stay in the list (order and full option set are preserved) but render in a muted/gray style, show a disabled indicator on hover, and cannot be clicked/selected; enabled entries remain fully interactive and the current value is marked with a checkmark as usual.
- There is no separate `invalid`/`valid` option on Select for this - unlike Datepicker's `invalid`/`valid` options, Select disabling is per-item (`disabled` on the option/data entry), not a picker-level exclusion list.

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