1---
2title: Select Element iOS Bug - Always Include Disabled Placeholder Option
3impact: HIGH
4impactDescription: On iOS, users cannot select the first option if v-model initial value doesn't match any option
5type: capability
6tags: [vue3, v-model, forms, select, ios, mobile, accessibility]
7---
8 
9# Select Element iOS Bug - Always Include Disabled Placeholder Option
10 
11**Impact: HIGH** - When a `<select>` element's v-model initial value doesn't match any option, iOS renders it as "unselected" and users CANNOT select the first item. iOS doesn't fire a change event when selecting an already-visually-selected option, leaving users stuck.
12 
13This is a platform-specific bug that only manifests on iOS Safari. Desktop browsers and Android handle this gracefully, making it easy to miss during development. The fix is simple: always include a disabled placeholder option.
14 
15## Task Checklist
16 
17- [ ] Always add a disabled placeholder option with empty value to select elements
18- [ ] Ensure v-model initial value is empty string to match the placeholder
19- [ ] Test select inputs on iOS devices or simulators
20- [ ] Consider this for any user-facing forms, especially on mobile-first apps
21 
22**Problem - iOS users cannot select first option:**
23```html
24<script setup>
25import { ref } from 'vue'
26 
27// Initial value is empty string, doesn't match any option
28const selected = ref('')
29</script>
30 
31<template>
32  <!-- PROBLEM: On iOS, "Apple" appears selected but user cannot actually select it -->
33  <!-- Tapping "Apple" does nothing because iOS doesn't fire change event -->
34  <select v-model="selected">
35    <option value="apple">Apple</option>
36    <option value="banana">Banana</option>
37    <option value="orange">Orange</option>
38  </select>
39 
40  <!-- selected remains '' even though "Apple" appears highlighted -->
41</template>
42```
43 
44**Solution - Add disabled placeholder option:**
45```html
46<script setup>
47import { ref } from 'vue'
48 
49const selected = ref('')  // Matches the placeholder option
50</script>
51 
52<template>
53  <!-- CORRECT: Disabled placeholder ensures user must actively select -->
54  <select v-model="selected">
55    <option disabled value="">Please select a fruit</option>
56    <option value="apple">Apple</option>
57    <option value="banana">Banana</option>
58    <option value="orange">Orange</option>
59  </select>
60</template>
61```
62 
63```html
64<!-- Variant with required attribute for form validation -->
65<select v-model="selected" required>
66  <option disabled value="">-- Select an option --</option>
67  <option value="a">Option A</option>
68  <option value="b">Option B</option>
69</select>
70```
71 
72```html
73<!-- If you MUST have a pre-selected default, set the initial value to match -->
74<script setup>
75import { ref } from 'vue'
76 
77// Set initial value to match an actual option
78const country = ref('us')  // Pre-selects "United States"
79</script>
80 
81<template>
82  <select v-model="country">
83    <option value="us">United States</option>
84    <option value="uk">United Kingdom</option>
85    <option value="ca">Canada</option>
86  </select>
87</template>
88```
89 
90## Reference
91- [Vue.js Form Input Bindings - Select](https://vuejs.org/guide/essentials/forms.html#select)
92