Here's how to build a conditional form in Vue.js, from the core native pattern up through library-based options for more complex cases.

• The core native mechanism: v-if / v-else-if / v-else

Vue's conditional rendering directives are the foundation regardless of how complex your form gets:

vue

<template>

<form @submit.prevent="submitForm">

<label>Do you have a pet?</label>

<select v-model="hasPet">

<option value="yes">Yes</option>

<option value="no">No</option>

</select>

<!-- Only shows when hasPet === 'yes' -->

<div v-if="hasPet === 'yes'">

<label>Pet type</label>

<input v-model="petType" type="text" />

</div>

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

</form>

</template>

<script setup>

import { ref } from 'vue'

const hasPet = ref('no')

const petType = ref('')

function submitForm() {

• console.log({ hasPet: hasPet.value, petType: petType.value })

}

</script>

v-model gives you two-way binding, so hasPet updates automatically as the user selects an option

• v-if removes the element from the DOM entirely when false (not just hidden via CSS) — use v-show instead if you're toggling visibility very frequently and want to avoid repeated DOM insertion/removal cost @submit.prevent stops the default page-reload behavior so you can handle submission asynchronously

For more than two branches, chain v-else-if:

vue

<h1 v-if="status === 'high'">HIGH</h1>

<h1 v-else-if="status === 'medium'">MEDIUM</h1>

<h1 v-else>LOW</h1>

Casting truthy values for optional config-driven fields

If you're building a form from a config object where a field might not have every property, double-negation (!!) is a simple way to conditionally render only when the value actually exists:

vue

<div v-if="!!field.choices">

<!-- render choices only if the array/value is present -->

</div>

• Scaling up: config-driven dynamic forms For forms with many conditional fields, define the form as a JSON configuration object rather than hardcoding each field's conditional logic in the template:

js

// formConfig.json

{

• "type": "radio",
• "options": { "choices": ["float", "dive", "dip"] }

}

Then render fields dynamically with Vue's <component :is="..."> and spread the field's attributes via v-bind:

vue

<component :is="InputBox" v-bind="{ ...field.options.attrs }" />

• This is the same underlying pattern that dedicated schema-driven form libraries (Formly-equivalent for Vue, JSON Schema-based tools) automate for you — worth reaching for a library once you're hand-rolling this pattern across many fields.

Library options if you want conditional logic built in, rather than hand-rolled

• Vue Formulate — conditional fields are just v-if on a <FormulateInput>, with a "named forms" system for accessing/manipulating forms globally via the $formulate plugin
• Vueform — has first-class conditional support at both the field and multi-step level. For multi-step forms specifically, you can attach :conditions directly to a <FormStep> so an entire step (not just a field) only appears when a prior answer meets a condition:

vue

<FormStep label="Second" :elements="['second']" :conditions="[['checkbox', true]]" />

• Any element inside a conditionally-shown step is automatically excluded from the submitted data if its condition isn't met — useful since you don't have to manually strip out hidden-field values before submitting

Practical recommendation

Simple forms, a handful of conditional fields → plain v-if/v-else-if directly in the template, as shown above

Many fields, form structure changes often → move to a config-driven approach (JSON object + dynamic <component :is>)

Multi-step forms where entire steps (not just fields) depend on prior answers → Vueform, which handles step-level conditions and submission-data filtering natively

Want conditional logic plus built-in validation/state management as one package → Vue Formulate or VeeValidate (covered in more depth in earlier Vue form questions in this conversation)