Vue Academy · Lesson

v-model on All Form Elements

Input, textarea, select, checkbox, radio — how v-model adapts per element type.

Lesson 1 of 413 steps

v-model on All Form Elements is a free Vue Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 4 lessons in total.

Binding Form Inputs

v-model creates two-way binding between form controls and your reactive state. Each kind of control — text, checkbox, radio, select, textarea — uses v-model a little differently. This lesson covers them all.

Text Input

On a text input, v-model binds the value and updates on input. Type in the box and the ref updates live.

<script setup>
import { ref } from 'vue'
const name = ref('')
</script>

<template>
  <input v-model="name" />
  <p>Hello, {{ name }}</p>
</template>

Textarea

A textarea works just like a text input. Use v-model on the element directly — do not put text between the tags.

<template>
  <textarea v-model="message"></textarea>
</template>

Checkbox: Boolean

A single checkbox bound to a boolean ref toggles between true and false.

<script setup>
import { ref } from 'vue'
const agreed = ref(false)
</script>

<template>
  <input type="checkbox" v-model="agreed" />
  <p>Agreed: {{ agreed }}</p>
</template>

Checkbox: Multiple into an Array

Bind several checkboxes to the same array ref. Each checked box adds its value to the array.

<script setup>
import { ref } from 'vue'
const hobbies = ref([])
</script>

<template>
  <input type="checkbox" value="reading" v-model="hobbies" />
  <input type="checkbox" value="coding" v-model="hobbies" />
  <p>{{ hobbies }}</p>
</template>

Radio Buttons

Radio buttons in a group share one ref. The ref holds the value of the selected option.

<script setup>
import { ref } from 'vue'
const picked = ref('')
</script>

<template>
  <input type="radio" value="small" v-model="picked" />
  <input type="radio" value="large" v-model="picked" />
  <p>Picked: {{ picked }}</p>
</template>

Select: Single

A single select binds to a value that matches the chosen option. Provide a placeholder option with an empty value if you like.

<script setup>
import { ref } from 'vue'
const city = ref('')
</script>

<template>
  <select v-model="city">
    <option value="">Choose</option>
    <option value="paris">Paris</option>
    <option value="tokyo">Tokyo</option>
  </select>
</template>

Select: Multiple

Add the multiple attribute and bind to an array. Selected options collect into the array.

<script setup>
import { ref } from 'vue'
const cities = ref([])
</script>

<template>
  <select v-model="cities" multiple>
    <option value="paris">Paris</option>
    <option value="tokyo">Tokyo</option>
  </select>
</template>

Value Modifiers

Modifiers refine v-model: .trim removes whitespace, .number casts to a number, and .lazy syncs on change instead of every keystroke.

<input v-model.number="age" />
<input v-model.trim="username" />
<input v-model.lazy="note" />

One Mental Model

No matter the control, v-model is value-in plus change-out. The control type only decides what shape the value takes: a boolean, a string, or an array.

Custom Input Components

v-model also works on your own components. A custom input declares a modelValue prop and emits update:modelValue, so it behaves like a native control to its parent.

<!-- parent -->
<MyTextInput v-model="name" />

<!-- child declares modelValue + emits update:modelValue -->

Quick Check

Test your form binding knowledge.

Answer it in the interactive lesson

Recap

v-model across form controls:

Text and textarea bind a string.
A single checkbox binds a boolean; multiple checkboxes bind an array.
Radio buttons share one ref holding the selected value.
Select binds a value; with multiple it binds an array.
Modifiers: .trim, .number, .lazy.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 42
Lessons: 156

Start learning free View the full course

Frequently Asked Questions

Is the “v-model on All Form Elements” lesson free?

Yes — any 3 lessons of the Vue Academy learning path, including “v-model on All Form Elements”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 4 lessons in total.

What will I learn in “v-model on All Form Elements”?

Input, textarea, select, checkbox, radio — how v-model adapts per element type. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.

How long does the “v-model on All Form Elements” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy