Form Inputs — v-model Across Every Input Type

v-model adapts to each input type. The bound ref naturally takes the type that matches the input — string, boolean, array, or whatever you bind.

4 min read Level 1/5 #vue#forms

What you'll learn

Bind text and textarea inputs
Bind checkboxes (boolean or array)
Bind selects and radios

Every form control in Vue works with v-model. Each input type chooses sensible defaults for what gets stored in the bound ref.

Text and Textarea

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

<template>
  <input v-model="name" placeholder="Name" />
  <textarea v-model="bio" rows="4" />
</template>

Vue listens to the input event by default, so the ref updates on every keystroke.

Checkboxes

A single checkbox is a boolean. Multiple checkboxes that share one v-model write into an array — the array contains the values of the checked boxes.

<script setup lang="ts">
import { ref } from 'vue'
const agree = ref(false)
const toppings = ref<string[]>([])
</script>

<template>
  <input type="checkbox" v-model="agree" />

  <label><input type="checkbox" value="cheese" v-model="toppings" /> Cheese</label>
  <label><input type="checkbox" value="olives" v-model="toppings" /> Olives</label>
  <label><input type="checkbox" value="onions" v-model="toppings" /> Onions</label>

  <p>Selected: {{ toppings.join(', ') }}</p>
</template>

Radios and Selects

Radios store the value of the chosen option:

<script setup lang="ts">
import { ref } from 'vue'
const plan = ref('free')
</script>

<template>
  <label><input type="radio" value="free" v-model="plan" /> Free</label>
  <label><input type="radio" value="pro" v-model="plan" /> Pro</label>
</template>

A select stores the value attribute of the chosen option. Add multiple to get an array.

<script setup lang="ts">
import { ref } from 'vue'
const color = ref('red')
</script>

<template>
  <select v-model="color">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
  </select>
</template>

For non-string values (objects, numbers), bind them with :value on each option — v-model will store the actual reference, not a string.

v-model Modifiers →