Form Inputs in Vue.js
From the Vue.js cheat sheet · Forms & v-model · verified Jul 2026
Form Inputs
v-model with different input types
vue
<!-- Text inputs -->
<input v-model="message" />
<textarea v-model="text"></textarea>
<!-- Checkboxes -->
<input type="checkbox" v-model="checked" />
<input type="checkbox" v-model="checkedNames" value="John" />
<!-- Radio -->
<input type="radio" v-model="picked" value="One" />
<!-- Select -->
<select v-model="selected">
<option>A</option>
<option>B</option>
</select>💡 v-model creates two-way binding on form inputs
⚡ Use .number modifier for numeric inputs, .trim for strings
📌 Multiple checkboxes bind to array, single to boolean
🔥 File inputs don't support v-model, use @change event