Vue Form Inputs
We have seen a few examples of form inputs earlier in this tutorial, on the Vue Forms and v-model pages.
This page is a collection of more form input examples in Vue, like radio buttons, checkboxes, drop-down list and normal text input field.
Radio Buttons
Radio buttons that belong to the same choice must have the same name so that only one radio button can be chosen.
As with all inputs in Vue, we capture the radio button input value with v-model, but the value attribute must also be set explicitly on the <input type="radio"> tag.
This is how we can use radio buttons in a Vue form:
Example
App.vue:
<template>
<h1>Radio Buttons in Vue</h1>
<form @submit.prevent="registerAnswer">
<p>What is your favorite animal?</p>
<label>
<input type="radio" name="favAnimal" v-model="inpVal" value="Cat"> Cat
</label>
<label>
<input type="radio" name="favAnimal" v-model="inpVal" value="Dog"> Dog
</label>
<label>
<input type="radio" name="favAnimal" v-model="inpVal" value="Turtle"> Turtle
</label>
<label>
<input type="radio" name="favAnimal" v-model="inpVal" value="Moose"> Moose
</label>
<button type="submit">Submit</button>
</form>
<div>
<h3>Submitted choice:</h3>
<p id="pAnswer">{{ inpValSubmitted }}</p>
</div>
</template>
<script>
export default {
data() {
return {
inpVal: '',
inpValSubmitted: 'Not submitted yet'
}
},
methods: {
registerAnswer() {
if(this.inpVal) {
this.inpValSubmitted = this.inpVal;
}
}
}
}
</script>
<style scoped>
div {
border: dashed black 1px;
border-radius: 10px;
padding: 0 20px 20px 20px;
margin-top: 20px;
display: inline-block;
}
button {
margin: 10px;
}
label {
display: block;
width: 80px;
padding: 5px;
}
label:hover {
cursor: pointer;
background-color: rgb(211, 244, 211);
border-radius: 5px;
}
#pAnswer {
background-color: lightgreen;
padding: 5px;
}
</style>
Checkboxes
When checkbox inputs (<input type="checkbox">) are connected to the same array with v-model, the values for the checked checkboxes are gathered in that array:
Example
App.vue:
<template>
<h1>Checkbox Inputs in Vue</h1>
<form @submit.prevent="registerAnswer">
<p>What kinds of food do you like?</p>
<label>
<input type="checkbox" v-model="likeFoods" value="Pizza"> Pizza
</label>
<label>
<input type="checkbox" v-model="likeFoods" value="Rice"> Rice
</label>
<label>
<input type="checkbox" v-model="likeFoods" value="Fish"> Fish
</label>
<label>
<input type="checkbox" v-model="likeFoods" value="Salad"> Salad
</label>
<button type="submit">Submit</button>
</form>
<div>
<h3>Submitted answer:</h3>
<p id="pAnswer">{{ inpValSubmitted }}</p>
</div>
</template>
<script>
export default {
data() {
return {
likeFoods: [],
inpValSubmitted: 'Not submitted yet'
}
},
methods: {
registerAnswer() {
this.inpValSubmitted = this.likeFoods;
}
}
}
</script>
<style scoped>
div {
border: dashed black 1px;
border-radius: 10px;
padding: 0 20px 20px 20px;
margin-top: 20px;
display: inline-block;
}
button {
margin: 10px;
}
label {
display: block;
width: 80px;
padding: 5px;
}
label:hover {
cursor: pointer;
background-color: rgb(211, 244, 211);
border-radius: 5px;
}
#pAnswer {
background-color: lightgreen;
padding: 5px;
}
</style>
Drop-down List
A drop-down list consists of a <select> tag with <option> tags inside.
When using a drop-down list in Vue we need to connect the <select> tag with v-model, and give values to the <option> tags:
Example
App.vue:
<template>
<h1>Drop-down List in Vue</h1>
<form @submit.prevent="registerAnswer">
<label for="cars">Choose a car:</label>
<select v-model="carSelected" id="cars">
<option disabled value="">Please select one</option>
<option>Volvo</option>
<option>Saab</option>
<option>Opel</option>
<option>Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
<div>
<h3>Submitted answer:</h3>
<p id="pAnswer">{{ inpValSubmitted }}</p>
</div>
</template>
<script>
export default {
data() {
return {
carSelected: '',
inpValSubmitted: 'Not submitted yet'
}
},
methods: {
registerAnswer() {
if(this.carSelected) {
this.inpValSubmitted = this.carSelected;
}
}
}
}
</script>
<style scoped>
div {
border: dashed black 1px;
border-radius: 10px;
padding: 0 20px 20px 20px;
margin-top: 20px;
display: inline-block;
}
button {
margin: 10px;
}
label {
width: 80px;
padding: 5px;
}
label:hover {
cursor: pointer;
background-color: rgb(211, 244, 211);
border-radius: 5px;
}
#pAnswer {
background-color: lightgreen;
padding: 5px;
}
</style>
<select multiple>
With the multiple attribute in the <select> tag, the drop-down list becomes expanded, and we can choose more than one option.
To choose more than one option, windows users must press the 'ctrl' key, and macOS users must press the 'command' key.
When using <select multiple> in Vue we need to connect the <select> tag with v-model, and give values to the <option> tags:
Example
App.vue:
<template>
<h1>Select Multiple in Vue</h1>
<p>Depending on your operating system, use the 'ctrl' or the 'command' key to select multiple options.</p>
<form @submit.prevent="registerAnswer">
<label for="cars">Choose one or more cars:</label><br>
<select v-model="carsSelected" id="cars" multiple>
<option>Volvo</option>
<option>Saab</option>
<option>Opel</option>
<option>Audi</option>
<option>Kia</option>
</select>
<button type="submit">Submit</button>
</form>
<div>
<h3>Submitted answer:</h3>
<p id="pAnswer">{{ inpValSubmitted }}</p>
</div>
</template>
<script>
export default {
data() {
return {
carsSelected: [],
inpValSubmitted: 'Not submitted yet'
}
},
methods: {
registerAnswer() {
if(this.carsSelected) {
this.inpValSubmitted = this.carsSelected;
}
}
}
}
</script>
<style scoped>
div {
border: dashed black 1px;
border-radius: 10px;
padding: 0 20px 20px 20px;
margin-top: 20px;
display: inline-block;
}
button, select {
margin: 10px;
display: block;
}
label {
width: 80px;
padding: 5px;
}
label:hover {
cursor: pointer;
background-color: rgb(211, 244, 211);
border-radius: 5px;
}
#pAnswer {
background-color: lightgreen;
padding: 5px;
}
</style>
Read Only Form Inputs
Using v-model on form inputs creates a two-way binding, which means that if the Vue data instance changes, the input value attribute also changes.
For read-only form inputs, like <input type="file">, the value attribute cannot be changed from the Vue data instance, and so we cannot use v-model.
For read-only form inputs, like <input type="file">, we need to use @change to call a method that updates the Vue data instance:
Example
App.vue:
<template>
<h1>Input Type File</h1>
<form @submit.prevent="registerAnswer">
<label>Choose a file:
<input @change="updateVal" type="file">
</label>
<button type="submit">Submit</button>
</form>
<div>
<h3>Submitted answer:</h3>
<p id="pAnswer">{{ inpValSubmitted }}</p>
</div>
</template>
<script>
export default {
data() {
return {
fileInp: null,
inpValSubmitted: 'Not submitted yet'
}
},
methods: {
registerAnswer() {
if(this.fileInp) {
this.inpValSubmitted = this.fileInp;
}
},
updateVal(e) {
this.fileInp = e.target.value;
}
}
}
</script>
<style scoped>
div {
border: dashed black 1px;
border-radius: 10px;
padding: 0 20px 20px 20px;
margin-top: 20px;
display: inline-block;
}
button {
margin: 10px;
display: block;
}
#pAnswer {
background-color: lightgreen;
padding: 5px;
}
</style>
Info: In the example above, the submitted file name gets a file path C:\fakepath\ in front of it. This is to prevent malicious software from guessing the user's file structure.
Other Form Inputs
With the form inputs mentioned above we had to provide a value for the value attribute, but with the form inputs below, the user provides the value:
<input type="color"><input type="date"><input type="datetime-local"><input type="number"><input type="password"><input type="range"><input type="search"><input type="tel"><input type="text"><input type="time"><textarea>
Because the user already gives the value for these kinds of form inputs, all we need to do in Vue is to connect the input to a data property with v-model.
This is how to use <input type="range"> in Vue:
Example
App.vue:
<form @submit.prevent="registerAnswer">
<label>How tall are you?<br>
<input v-model="heightInp" type="range" min="50" max="235"> {{ heightInp }} cm
</label>
<button type="submit">Submit</button>
</form>
And this is how to use <input type="color"> in Vue:
Example
App.vue:
<form @submit.prevent="registerAnswer">
<label>Choose a color:
<input v-model="colorInp" type="color">
</label>
<button type="submit">Submit</button>
</form>
And this is how to use <textarea> in Vue:
Example
App.vue:
<form @submit.prevent="registerAnswer">
<label>
<p>What do you think about our product?</p>
<textarea v-model="txtInp" placeholder="Write something.." rows="4" cols="35"></textarea>
</label>
<button type="submit">Submit</button>
</form>
Learn more about how the different kinds of HTML form inputs work in our HTML Tutorial .
