Vue Academy · Lesson

v-model on All Form Elements

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

v-model on All Form Elements is a free Vue Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

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.

Frequently asked questions

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

Yes — the full text of “v-model on All Form Elements” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

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; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

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