How do I build a conditional form in Vue.js?

A conditional form in Vue.js is usually built with reactive state and v-if / v-show to display fields based on user input.

Basic idea

If one field determines whether another field appears, you can bind the controlling input to data and conditionally render other inputs.

Example: show extra fields when a checkbox is checked

<template>
  <form @submit.prevent="handleSubmit">
    <label>
      <input type="checkbox" v-model="form.subscribe" />
      Subscribe to newsletter
    </label>

    <div v-if="form.subscribe">
      <label>
        Email:
        <input type="email" v-model="form.email" />
      </label>
    </div>

    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        subscribe: false,
        email: ""
      }
    };
  },
  methods: {
    handleSubmit() {
      console.log(this.form);
    }
  }
};
</script>

v-if vs v-show

• v-if: removes/adds the element from the DOM
  • Good when the field is truly optional and expensive or unnecessary to render.
• v-show: only toggles CSS display
  • Good when you want the element to stay in the DOM but hidden.

Example:

<div v-show="form.subscribe">
  ...
</div>

Common pattern: conditional sections

You can show different sections based on a dropdown:

<template>
  <form>
    <label>
      Account type:
      <select v-model="form.accountType">
        <option value="personal">Personal</option>
        <option value="business">Business</option>
      </select>
    </label>

    <div v-if="form.accountType === 'business'">
      <label>
        Company name:
        <input v-model="form.companyName" />
      </label>

      <label>
        Tax ID:
        <input v-model="form.taxId" />
      </label>
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        accountType: "personal",
        companyName: "",
        taxId: ""
      }
    };
  }
};
</script>

Validation note

If a field is hidden conditionally, you often want to:

• ignore its validation when hidden
• optionally clear its value when the condition changes

Example:

watch: {
  'form.subscribe'(newVal) {
    if (!newVal) {
      this.form.email = "";
    }
  }
}

Vue 3 Composition API version

<template>
  <form @submit.prevent="handleSubmit">
    <label>
      <input type="checkbox" v-model="form.subscribe" />
      Subscribe
    </label>

    <div v-if="form.subscribe">
      <input v-model="form.email" type="email" placeholder="Email" />
    </div>

    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { reactive } from 'vue'

const form = reactive({
  subscribe: false,
  email: ''
})

function handleSubmit() {
  console.log(form)
}
</script>

Best practices

• Keep form state in one object.
• Use v-if for true conditional fields.
• Reset hidden values if they shouldn’t be submitted.
• If using validation libraries, conditionally apply rules based on visibility.

If you want, I can also show:

1. a multi-step conditional form,
2. a dynamic form generated from JSON, or
3. a version using Vue 3 + VeeValidate.