1---
2title: Checkbox true-value/false-value Not Submitted in Forms
3impact: MEDIUM
4impactDescription: true-value and false-value attributes don't affect form submission - unchecked boxes send nothing
5type: capability
6tags: [vue3, v-model, forms, checkbox, form-submission]
7---
8 
9# Checkbox true-value/false-value Not Submitted in Forms
10 
11**Impact: MEDIUM** - Vue's `true-value` and `false-value` attributes only affect the JavaScript binding, NOT the actual form submission. Unchecked checkboxes are never included in form submissions by browsers, regardless of `false-value`.
12 
13This is a browser limitation, not a Vue issue. If you need to submit one of two values (like "yes"/"no" or "active"/"inactive"), use radio buttons instead of a checkbox.
14 
15## Task Checklist
16 
17- [ ] Don't rely on `false-value` for form submissions - it won't be sent
18- [ ] Use radio buttons when you need to submit one of exactly two values
19- [ ] Remember `true-value`/`false-value` are for JavaScript state only
20- [ ] For form submissions with custom values, handle the transformation server-side or in submit handler
21 
22**Problem - false-value not submitted:**
23```html
24<script setup>
25import { ref } from 'vue'
26 
27const status = ref('no')  // JavaScript value works correctly
28</script>
29 
30<template>
31  <form action="/api/update" method="POST">
32    <!-- PROBLEM: When unchecked, nothing is submitted for this field -->
33    <!-- Server receives no "status" field at all, not "no" -->
34    <input
35      type="checkbox"
36      v-model="status"
37      true-value="yes"
38      false-value="no"
39      name="status"
40    >
41    <label>Active</label>
42 
43    <!-- status.value correctly shows "yes" or "no" in Vue -->
44    <!-- But form submission only sends "status=yes" when checked -->
45    <!-- When unchecked, "status" field is completely missing -->
46  </form>
47</template>
48```
49 
50**Solution 1 - Use radio buttons for two-value submission:**
51```html
52<script setup>
53import { ref } from 'vue'
54 
55const status = ref('no')
56</script>
57 
58<template>
59  <form action="/api/update" method="POST">
60    <!-- CORRECT: Radio buttons always submit a value -->
61    <label>
62      <input type="radio" v-model="status" value="yes" name="status">
63      Active
64    </label>
65    <label>
66      <input type="radio" v-model="status" value="no" name="status">
67      Inactive
68    </label>
69 
70    <!-- Form always submits "status=yes" or "status=no" -->
71  </form>
72</template>
73```
74 
75**Solution 2 - Handle in submit handler (for SPA/AJAX):**
76```html
77<script setup>
78import { ref } from 'vue'
79 
80const isActive = ref(false)
81 
82async function submitForm() {
83  // Transform checkbox state to desired value before sending
84  const payload = {
85    status: isActive.value ? 'yes' : 'no'
86  }
87 
88  await fetch('/api/update', {
89    method: 'POST',
90    body: JSON.stringify(payload)
91  })
92}
93</script>
94 
95<template>
96  <!-- For AJAX submission, checkbox is fine - transform in handler -->
97  <input type="checkbox" v-model="isActive">
98  <label>Active</label>
99 
100  <button @click="submitForm">Save</button>
101</template>
102```
103 
104**Solution 3 - Hidden input fallback:**
105```html
106<template>
107  <form action="/api/update" method="POST">
108    <!-- Hidden input provides fallback value -->
109    <input type="hidden" name="status" value="no">
110    <!-- Checkbox overrides with "yes" when checked -->
111    <input type="checkbox" name="status" value="yes" v-model="isActive">
112    <label>Active</label>
113  </form>
114</template>
115```
116 
117## Reference
118- [Vue.js Form Input Bindings - Checkbox](https://vuejs.org/guide/essentials/forms.html#checkbox)
119