From bad2e49de92d33f656517c2f7b1dfb86f0f6443e Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Mon, 1 Jul 2024 20:37:57 +0200
Subject: [PATCH] refactor(Form): input events (#99)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 playground/app/pages/form.vue           |  41 ++-
 src/runtime/components/Checkbox.vue     |  14 +-
 src/runtime/components/Input.vue        |   3 +-
 src/runtime/components/InputMenu.vue    |  38 ++-
 src/runtime/components/RadioGroup.vue   |  17 +-
 src/runtime/components/Select.vue       |  26 +-
 src/runtime/components/SelectMenu.vue   |  31 ++-
 src/runtime/components/Slider.vue       |  15 +-
 src/runtime/components/Switch.vue       |  14 +-
 src/runtime/components/Textarea.vue     |   3 +-
 src/runtime/composables/useFormField.ts |   4 +-
 test/components/Checkbox.spec.ts        |  71 ++++-
 test/components/Form.spec.ts            | 352 +-----------------------
 test/components/Input.spec.ts           |  81 ++++++
 test/components/InputMenu.spec.ts       |  85 +++++-
 test/components/RadioGroup.spec.ts      |  77 +++++-
 test/components/Select.spec.ts          |  94 ++++++-
 test/components/SelectMenu.spec.ts      |  84 +++++-
 test/components/Slider.spec.ts          |  76 ++++-
 test/components/Switch.spec.ts          |  70 ++++-
 test/components/Textarea.spec.ts        |  86 +++++-
 test/utils/form.ts                      |  53 ++++
 22 files changed, 947 insertions(+), 388 deletions(-)
 create mode 100644 test/utils/form.ts

diff --git a/playground/app/pages/form.vue b/playground/app/pages/form.vue
index 4cf0987c..e4e20c04 100644
--- a/playground/app/pages/form.vue
+++ b/playground/app/pages/form.vue
@@ -72,14 +72,43 @@ function onSubmit(event: FormSubmitEvent<Schema>) {
           </UButton>
         </div>
       </UForm>
-    </div>
-
-    <div class="flex gap-4">
       <FormNestedExample />
       <FormNestedListExample />
-      <FormElementsExample />
-      <FormElementsExample disabled />
     </div>
-    <div class="flex gap-4" />
+
+    <USeparator class="my-8" />
+
+    <div class="flex gap-4 flex-wrap">
+      <div>
+        <p class="text-lg font-bold underline mb-4">
+          Validate on input
+        </p>
+        <FormElementsExample :validate-on="['input']" />
+      </div>
+      <div>
+        <p class="text-lg font-bold underline mb-4">
+          Validate on change
+        </p>
+        <FormElementsExample :validate-on="['change']" />
+      </div>
+      <div>
+        <p class="text-lg font-bold underline mb-4">
+          Validate on blur
+        </p>
+        <FormElementsExample :validate-on="['blur']" />
+      </div>
+      <div>
+        <p class="text-lg font-bold underline mb-4">
+          Default
+        </p>
+        <FormElementsExample />
+      </div>
+      <div>
+        <p class="text-lg font-bold underline mb-4">
+          Disabled
+        </p>
+        <FormElementsExample disabled />
+      </div>
+    </div>
   </div>
 </template>
diff --git a/src/runtime/components/Checkbox.vue b/src/runtime/components/Checkbox.vue
index 717fef75..597ae4e4 100644
--- a/src/runtime/components/Checkbox.vue
+++ b/src/runtime/components/Checkbox.vue
@@ -41,6 +41,7 @@ export interface CheckboxSlots {
 
 export interface CheckboxEmits {
   (e: 'update:modelValue', payload: boolean): void
+  (e: 'change', payload: Event): void
 }
 </script>
 
@@ -52,14 +53,14 @@ import { useId, useAppConfig, useFormField } from '#imports'
 
 const props = defineProps<CheckboxProps>()
 const slots = defineSlots<CheckboxSlots>()
-defineEmits<CheckboxEmits>()
+const emits = defineEmits<CheckboxEmits>()
 
 const modelValue = defineModel<boolean | undefined>({ default: undefined })
 
 const rootProps = useForwardProps(reactivePick(props, 'required', 'value'))
 
 const appConfig = useAppConfig()
-const { id: _id, emitFormChange, size, color, name, disabled } = useFormField<CheckboxProps>(props)
+const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<CheckboxProps>(props)
 const id = _id.value ?? useId()
 
 const indeterminate = computed(() => (modelValue.value === undefined && props.indeterminate))
@@ -80,6 +81,13 @@ const ui = computed(() => tv({ extend: checkbox, slots: props.ui })({
   disabled: disabled.value,
   checked: (modelValue.value ?? props.defaultValue) || indeterminate.value
 }))
+
+function onUpdate(value: any) {
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+  emitFormInput()
+}
 </script>
 
 <template>
@@ -93,7 +101,7 @@ const ui = computed(() => tv({ extend: checkbox, slots: props.ui })({
         :name="name"
         :disabled="disabled"
         :class="ui.base()"
-        @update:checked="emitFormChange()"
+        @update:checked="onUpdate"
       >
         <CheckboxIndicator as-child>
           <UIcon v-if="indeterminate" :name="indeterminateIcon || appConfig.ui.icons.minus" :class="ui.icon()" />
diff --git a/src/runtime/components/Input.vue b/src/runtime/components/Input.vue
index 408fc6c9..f8fdfdad 100644
--- a/src/runtime/components/Input.vue
+++ b/src/runtime/components/Input.vue
@@ -59,7 +59,7 @@ const slots = defineSlots<InputSlots>()
 
 const [modelValue, modelModifiers] = defineModel<string | number>()
 
-const { emitFormBlur, emitFormInput, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
+const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
 
@@ -116,6 +116,7 @@ function onChange(event: Event) {
     (event.target as HTMLInputElement).value = value.trim()
   }
 
+  emitFormChange()
   emits('change', event)
 }
 
diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index 55206a80..4b204985 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -85,7 +85,11 @@ export interface InputMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelValu
   ui?: Partial<typeof inputMenu.slots>
 }
 
-export type InputMenuEmits<T> = ComboboxRootEmits<T>
+export type InputMenuEmits<T> = ComboboxRootEmits<T> & {
+  change: [payload: Event]
+  blur: [payload: FocusEvent]
+  focus: [payload: FocusEvent]
+}
 
 type SlotProps<T> = (props: { item: T, index: number }) => any
 
@@ -127,7 +131,7 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
 const appConfig = useAppConfig()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps)
-const { emitFormBlur, emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
+const { emitFormBlur, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
 
@@ -187,6 +191,29 @@ onMounted(() => {
     autoFocus()
   }, props.autofocusDelay)
 })
+
+function onUpdate(value: any) {
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+  emitFormInput()
+}
+
+function onBlur(event: FocusEvent) {
+  emits('blur', event)
+  emitFormBlur()
+}
+
+function onUpdateOpen(value: boolean) {
+  if (!value) {
+    const event = new FocusEvent('blur')
+    emits('blur', event)
+    emitFormBlur()
+  } else {
+    const event = new FocusEvent('focus')
+    emits('focus', event)
+  }
+}
 </script>
 
 <template>
@@ -201,7 +228,8 @@ onMounted(() => {
     :filter-function="filterFunction"
     :class="ui.root({ class: props.class })"
     :as-child="!!multiple"
-    @update:model-value="emitFormChange()"
+    @update:model-value="onUpdate"
+    @update:open="onUpdateOpen"
     @keydown.enter="$event.preventDefault()"
   >
     <ComboboxAnchor :as-child="!multiple" :class="ui.base()">
@@ -212,7 +240,7 @@ onMounted(() => {
         :disabled="disabled"
         delimiter=""
         as-child
-        @blur="emitFormBlur()"
+        @blur="onBlur"
       >
         <TagsInputItem v-for="(item, index) in tags" :key="index" :value="(item as string)" :class="ui.tagsItem()">
           <TagsInputItemText :class="ui.tagsItemText()">
@@ -248,7 +276,7 @@ onMounted(() => {
         :placeholder="placeholder"
         :required="required"
         :class="ui.base()"
-        @blur="emitFormBlur()"
+        @blur="onBlur"
       />
 
       <span v-if="isLeading || !!slots.leading" :class="ui.leading()">
diff --git a/src/runtime/components/RadioGroup.vue b/src/runtime/components/RadioGroup.vue
index d1d40833..aa4b8cff 100644
--- a/src/runtime/components/RadioGroup.vue
+++ b/src/runtime/components/RadioGroup.vue
@@ -36,7 +36,9 @@ export interface RadioGroupProps<T> extends Pick<RadioGroupRootProps, 'defaultVa
   ui?: Partial<typeof radioGroup.slots>
 }
 
-export interface RadioGroupEmits extends RadioGroupRootEmits {}
+export type RadioGroupEmits = RadioGroupRootEmits & {
+  change: [payload: Event]
+}
 
 type SlotProps<T> = (props: { item: T, modelValue?: string }) => any
 
@@ -48,7 +50,7 @@ export interface RadioGroupSlots<T> {
 </script>
 
 <script setup lang="ts" generic="T extends RadioGroupItem | AcceptableValue">
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
 import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, Label, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useId, useFormField } from '#imports'
@@ -61,7 +63,7 @@ const slots = defineSlots<RadioGroupSlots<T>>()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'loop', 'required'), emits)
 
-const { emitFormChange, color, name, size, id: _id, disabled } = useFormField<RadioGroupProps<T>>(props)
+const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled } = useFormField<RadioGroupProps<T>>(props)
 const id = _id.value ?? useId()
 
 const ui = computed(() => tv({ extend: radioGroup, slots: props.ui })({
@@ -91,6 +93,13 @@ const normalizedItems = computed(() => {
   if (!props.items) return []
   return props.items.map(normalizeItem)
 })
+
+function onUpdate(value: any) {
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+  emitFormInput()
+}
 </script>
 
 <template>
@@ -101,7 +110,7 @@ const normalizedItems = computed(() => {
     :name="name"
     :disabled="disabled"
     :class="ui.root({ class: props.class })"
-    @update:model-value="emitFormChange()"
+    @update:model-value="onUpdate"
   >
     <fieldset :class="ui.fieldset()">
       <legend v-if="legend || !!slots.legend" :class="ui.legend()">
diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue
index 57ab9128..0790e0f9 100644
--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -63,7 +63,11 @@ export interface SelectProps<T> extends Omit<SelectRootProps, 'dir'>, UseCompone
   ui?: Partial<typeof select.slots>
 }
 
-export interface SelectEmits extends SelectRootEmits {}
+export type SelectEmits = SelectRootEmits & {
+  change: [payload: Event]
+  blur: [payload: FocusEvent]
+  focus: [payload: FocusEvent]
+}
 
 type SlotProps<T> = (props: { item: T, index: number }) => any
 
@@ -95,7 +99,7 @@ const appConfig = useAppConfig()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'disabled', 'autocomplete', 'required'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as SelectContentProps)
 
-const { emitFormChange, emitFormBlur, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
+const { emitFormChange, emitFormInput, emitFormBlur, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
 
@@ -113,8 +117,22 @@ const ui = computed(() => tv({ extend: select, slots: props.ui })({
 
 const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0]) ? props.items : [props.items]) as SelectItem[][] : [])
 
+function onUpdate(value: any) {
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+
+  emitFormChange()
+  emitFormInput()
+}
 function onUpdateOpen(value: boolean) {
-  if (!value) emitFormBlur()
+  if (!value) {
+    const event = new FocusEvent('blur')
+    emits('blur', event)
+    emitFormBlur()
+  } else {
+    const event = new FocusEvent('focus')
+    emits('focus', event)
+  }
 }
 </script>
 
@@ -125,7 +143,7 @@ function onUpdateOpen(value: boolean) {
     v-bind="rootProps"
     :name="name"
     :disabled="disabled"
-    @update:model-value="emitFormChange()"
+    @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
   >
     <SelectTrigger :class="ui.base({ class: props.class })">
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index 5d1db21f..ebba713b 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -72,7 +72,11 @@ export interface SelectMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelVal
   ui?: Partial<typeof selectMenu.slots>
 }
 
-export type SelectMenuEmits<T> = ComboboxRootEmits<T>
+export type SelectMenuEmits<T> = ComboboxRootEmits<T> & {
+  change: [payload: Event]
+  blur: [payload: FocusEvent]
+  focus: [payload: FocusEvent]
+}
 
 type SlotProps<T> = (props: { item: T, index: number }) => any
 
@@ -111,7 +115,7 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
 const appConfig = useAppConfig()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps)
-const { emitFormBlur, emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
+const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
 
@@ -160,6 +164,24 @@ function filterFunction(items: ArrayOrWrapped<AcceptableValue>, searchTerm: stri
 }
 
 const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0]) ? props.items : [props.items]) as SelectMenuItem[][] : [])
+
+function onUpdate(value: any) {
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+  emitFormInput()
+}
+
+function onUpdateOpen(value: boolean) {
+  if (!value) {
+    const event = new FocusEvent('blur')
+    emits('blur', event)
+    emitFormBlur()
+  } else {
+    const event = new FocusEvent('focus')
+    emits('focus', event)
+  }
+}
 </script>
 
 <template>
@@ -173,7 +195,8 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
     :disabled="disabled"
     :display-value="() => searchTerm"
     :filter-function="filterFunction"
-    @update:model-value="emitFormChange()"
+    @update:model-value="onUpdate"
+    @update:open="onUpdateOpen"
   >
     <ComboboxAnchor as-child>
       <ComboboxTrigger :class="ui.base({ class: props.class })" tabindex="0">
@@ -202,7 +225,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
 
     <ComboboxPortal :disabled="!portal">
       <ComboboxContent :class="ui.content()" v-bind="contentProps">
-        <ComboboxInput :placeholder="searchPlaceholder" :class="ui.input()" autofocus autocomplete="off" @blur="emitFormBlur()" />
+        <ComboboxInput :placeholder="searchPlaceholder" :class="ui.input()" autofocus autocomplete="off" />
 
         <ComboboxEmpty :class="ui.empty()">
           <slot name="empty" :search-term="searchTerm">
diff --git a/src/runtime/components/Slider.vue b/src/runtime/components/Slider.vue
index 16c3e605..aa8ebb9d 100644
--- a/src/runtime/components/Slider.vue
+++ b/src/runtime/components/Slider.vue
@@ -30,7 +30,9 @@ export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' |
   ui?: Partial<typeof slider.slots>
 }
 
-export interface SliderEmits extends SliderRootEmits {}
+export type SliderEmits = Omit<SliderRootEmits, 'valueCommit'> & {
+  change: [payload: Event]
+}
 </script>
 
 <script setup lang="ts">
@@ -51,7 +53,7 @@ const modelValue = defineModel<number | number[]>()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'orientation', 'min', 'max', 'step', 'minStepsBetweenThumbs', 'inverted'), emits)
 
-const { id, emitFormChange, size, color, name, disabled } = useFormField<SliderProps>(props)
+const { id, emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<SliderProps>(props)
 
 const defaultSliderValue = computed(() => {
   if (typeof props.defaultValue === 'number') {
@@ -80,6 +82,12 @@ const ui = computed(() => tv({ extend: slider, slots: props.ui })({
   color: color.value,
   orientation: props.orientation
 }))
+
+function onChange(value: any) {
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+}
 </script>
 
 <template>
@@ -91,7 +99,8 @@ const ui = computed(() => tv({ extend: slider, slots: props.ui })({
     :disabled="disabled"
     :class="ui.root({ class: props.class })"
     :default-value="defaultSliderValue"
-    @update:model-value="emitFormChange()"
+    @update:model-value="emitFormInput()"
+    @value-commit="onChange"
   >
     <SliderTrack :class="ui.track()">
       <SliderRange :class="ui.range()" />
diff --git a/src/runtime/components/Switch.vue b/src/runtime/components/Switch.vue
index 97348bec..53516e19 100644
--- a/src/runtime/components/Switch.vue
+++ b/src/runtime/components/Switch.vue
@@ -45,6 +45,7 @@ export interface SwitchSlots {
 
 export interface SwitchEmits {
   (e: 'update:modelValue', payload: boolean): void
+  (e: 'change', payload: Event): void
 }
 </script>
 
@@ -56,14 +57,14 @@ import { useId, useAppConfig, useFormField } from '#imports'
 
 const props = defineProps<SwitchProps>()
 const slots = defineSlots<SwitchSlots>()
-defineEmits<SwitchEmits>()
+const emits = defineEmits<SwitchEmits>()
 
 const modelValue = defineModel<boolean | undefined>({ default: undefined })
 
 const appConfig = useAppConfig()
 const rootProps = useForwardProps(reactivePick(props, 'as', 'required', 'value'))
 
-const { id: _id, emitFormChange, size, color, name, disabled } = useFormField<SwitchProps>(props)
+const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<SwitchProps>(props)
 const id = _id.value ?? useId()
 
 const ui = computed(() => tv({ extend: switchTv, slots: props.ui })({
@@ -73,6 +74,13 @@ const ui = computed(() => tv({ extend: switchTv, slots: props.ui })({
   loading: props.loading,
   disabled: disabled.value || props.loading
 }))
+
+function onUpdate(value: any) {
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+  emitFormInput()
+}
 </script>
 
 <template>
@@ -86,7 +94,7 @@ const ui = computed(() => tv({ extend: switchTv, slots: props.ui })({
         :name="name"
         :disabled="disabled || loading"
         :class="ui.base()"
-        @update:checked="emitFormChange()"
+        @update:checked="onUpdate"
       >
         <SwitchThumb :class="ui.thumb()">
           <UIcon v-if="loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.icon({ checked: true, unchecked: true })" />
diff --git a/src/runtime/components/Textarea.vue b/src/runtime/components/Textarea.vue
index b76f0b3d..64badcfa 100644
--- a/src/runtime/components/Textarea.vue
+++ b/src/runtime/components/Textarea.vue
@@ -57,7 +57,7 @@ const emits = defineEmits<TextareaEmits>()
 
 const [modelValue, modelModifiers] = defineModel<string | number>()
 
-const { emitFormBlur, emitFormInput, size, color, id, name, disabled } = useFormField<TextareaProps>(props)
+const { emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, disabled } = useFormField<TextareaProps>(props)
 
 const ui = computed(() => tv({ extend: textarea, slots: props.ui })({
   color: color.value,
@@ -107,6 +107,7 @@ function onChange(event: Event) {
     (event.target as HTMLInputElement).value = value.trim()
   }
 
+  emitFormChange()
   emits('change', event)
 }
 
diff --git a/src/runtime/composables/useFormField.ts b/src/runtime/composables/useFormField.ts
index 8cf56397..f8b917be 100644
--- a/src/runtime/composables/useFormField.ts
+++ b/src/runtime/composables/useFormField.ts
@@ -55,9 +55,7 @@ export function useFormField<T>(props?: Props<T>) {
 
   const emitFormInput = useDebounceFn(
     () => {
-      if (blurred.value || formField?.value.eagerValidation) {
-        emitFormEvent('input', formField?.value.name)
-      }
+      emitFormEvent('input', formField?.value.name)
     },
     formField?.value.validateOnInputDelay ?? formOptions?.value.validateOnInputDelay ?? 0
   )
diff --git a/test/components/Checkbox.spec.ts b/test/components/Checkbox.spec.ts
index 4249f033..c24752c6 100644
--- a/test/components/Checkbox.spec.ts
+++ b/test/components/Checkbox.spec.ts
@@ -1,7 +1,10 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, test } from 'vitest'
 import Checkbox, { type CheckboxProps, type CheckboxSlots } from '../../src/runtime/components/Checkbox.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/checkbox'
+import { renderForm } from '../utils/form'
+import { mount, flushPromises } from '@vue/test-utils'
+import type { FormInputEvents } from '~/src/module'
 
 describe('Checkbox', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -31,4 +34,70 @@ describe('Checkbox', () => {
     const html = await ComponentRender(nameOrHtml, options, Checkbox)
     expect(html).toMatchSnapshot()
   })
+
+  describe('emits', () => {
+    test('update:modelValue event', async () => {
+      const wrapper = mount(Checkbox)
+      const input = wrapper.findComponent({ name: 'CheckboxRoot' })
+      await input.vm.$emit('update:checked', true)
+      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [[true]] })
+    })
+
+    test('change event', async () => {
+      const wrapper = mount(Checkbox)
+      const input = wrapper.findComponent({ name: 'CheckboxRoot' })
+      await input.vm.$emit('update:checked', false)
+      expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
+    })
+  })
+
+  describe('form integration', async () => {
+    async function createForm(validateOn?: FormInputEvents[]) {
+      const wrapper = await renderForm({
+        props: {
+          validateOn,
+          validateOnInputDelay: 0,
+          async validate(state: any) {
+            if (!state.value)
+              return [{ name: 'value', message: 'Error message' }]
+            return []
+          }
+        },
+        slotTemplate: `
+        <UFormField name="value">
+          <UCheckbox v-model="state.value" />
+        </UFormField>
+        `
+      })
+      const input = wrapper.findComponent({ name: 'CheckboxRoot' })
+      return {
+        wrapper,
+        input
+      }
+    }
+
+    test('validate on change works', async () => {
+      const { input, wrapper } = await createForm(['change'])
+      await input.vm.$emit('update:checked', false)
+      await flushPromises()
+
+      expect(wrapper.text()).toContain('Error message')
+
+      await input.vm.$emit('update:checked', true)
+      await flushPromises()
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+
+    test('validate on input works', async () => {
+      const { input, wrapper } = await createForm(['input'])
+      await input.vm.$emit('update:checked', false)
+      await flushPromises()
+
+      expect(wrapper.text()).toContain('Error message')
+
+      await input.vm.$emit('update:checked', true)
+      await flushPromises()
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+  })
 })
diff --git a/test/components/Form.spec.ts b/test/components/Form.spec.ts
index 77368213..8a2f0c31 100644
--- a/test/components/Form.spec.ts
+++ b/test/components/Form.spec.ts
@@ -1,7 +1,5 @@
 import { reactive, ref, nextTick } from 'vue'
 import { describe, it, expect, test, beforeEach, vi } from 'vitest'
-import type { DOMWrapper, VueWrapper } from '@vue/test-utils'
-import { flushPromises } from '@vue/test-utils'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 import { z } from 'zod'
 import * as yup from 'yup'
@@ -9,66 +7,14 @@ import Joi from 'joi'
 import * as valibot from 'valibot'
 import ComponentRender from '../component-render'
 import type { FormProps, FormSlots } from '../../src/runtime/components/Form.vue'
+import { renderForm } from '../utils/form'
+
 import {
   UForm,
   UInput,
   UFormField
-  // URadioGroup,
-  // UTextarea,
-  // UCheckbox,
-  // USelect,
-  // URadio,
-  // USelectMenu,
-  // UInputMenu,
-  // UToggle,
-  // URange
 } from '#components'
-
-async function triggerEvent(
-  el: DOMWrapper<Element> | VueWrapper<any, any>,
-  event: string
-) {
-  el.trigger(event)
-  return flushPromises()
-}
-
-async function setValue(
-  el: DOMWrapper<Element> | VueWrapper<any, any>,
-  value: any
-) {
-  el.setValue(value)
-  return flushPromises()
-}
-
-async function renderForm(options: {
-  props: Partial<FormProps<any>>
-  slotVars?: object
-  slotComponents?: any
-  slotTemplate: string
-}) {
-  const state = reactive({})
-
-  return await mountSuspended(UForm, {
-    props: {
-      id: 42,
-      state,
-      ...options.props
-    },
-    slots: {
-      default: {
-        // @ts-expect-error setup does not exist on type
-        setup() {
-          return { state, ...options.slotVars }
-        },
-        components: {
-          UFormField,
-          ...options.slotComponents
-        },
-        template: options.slotTemplate
-      }
-    }
-  })
-}
+import { flushPromises } from '@vue/test-utils'
 
 describe('Form', () => {
   it.each([
@@ -137,10 +83,6 @@ describe('Form', () => {
   ])('%s validation works', async (_nameOrHtml: string, options: Partial<FormProps<any>>) => {
     const wrapper = await renderForm({
       props: options,
-      slotComponents: {
-        UFormField,
-        UInput
-      },
       slotTemplate: `
           <UFormField name="email">
             <UInput id="email" v-model="state.email" />
@@ -155,11 +97,11 @@ describe('Form', () => {
     const emailInput = wrapper.find('#email')
     const passwordInput = wrapper.find('#password')
 
-    await setValue(emailInput, 'bob@dylan.com')
-    await setValue(passwordInput, 'short')
-
-    await triggerEvent(form, 'submit.prevent')
+    await emailInput.setValue('bob@dylan.com')
+    await passwordInput.setValue('short')
 
+    await form.trigger('submit.prevent')
+    await flushPromises()
     // @ts-expect-error object is possibly undefined
     expect(wrapper.emitted('error')[0][0].errors).toMatchObject([
       {
@@ -171,8 +113,9 @@ describe('Form', () => {
 
     expect(wrapper.html()).toMatchSnapshot('with error')
 
-    await setValue(passwordInput, 'validpassword')
-    await triggerEvent(form, 'submit.prevent')
+    await passwordInput.setValue('validpassword')
+    await form.trigger('submit.prevent')
+    await flushPromises()
 
     expect(wrapper.emitted()).toHaveProperty('submit')
     expect(wrapper.emitted('submit')![0][0]).toMatchObject({
@@ -182,281 +125,6 @@ describe('Form', () => {
     expect(wrapper.html()).toMatchSnapshot('without error')
   })
 
-  it.each([
-    ['input', UInput, {}, 'foo']
-    // ['textarea', UTextarea, {}, 'foo']
-  ])('%s validate on blur works', async (_name, InputComponent, inputProps, validInputValue) => {
-    const wrapper = await renderForm({
-      props: {
-        validateOn: ['blur'],
-        async validate(state: any) {
-          if (!state.value)
-            return [{ name: 'value', message: 'Error message' }]
-          return []
-        }
-      },
-
-      slotVars: {
-        inputProps
-      },
-      slotComponents: { InputComponent },
-      slotTemplate: `
-          <UFormField name="value">
-            <InputComponent id="input" v-model="state.value" v-bind="inputProps" />
-          </UFormField>
-        `
-    })
-
-    const input = wrapper.find('#input')
-    await triggerEvent(input, 'blur')
-    expect(wrapper.text()).toContain('Error message')
-
-    await setValue(input, validInputValue)
-    await triggerEvent(input, 'blur')
-    expect(wrapper.text()).not.toContain('Error message')
-  })
-
-  it.each([
-    // ['checkbox', UCheckbox, {}, true],
-    // ['range', URange, {}, 2],
-    // ['select', USelect, { options: ['Option 1', 'Option 2'] }, 'Option 2']
-  ])('%s validate on change works', async (_name, InputComponent, inputProps, validInputValue) => {
-    const wrapper = await renderForm({
-      props: {
-        validateOn: ['change'],
-        async validate(state: any) {
-          if (!state.value)
-            return [{ name: 'value', message: 'Error message' }]
-          return []
-        }
-      },
-
-      slotVars: {
-        inputProps
-      },
-      slotComponents: {
-        InputComponent
-      },
-      slotTemplate: `
-          <UFormField name="value">
-            <InputComponent id="input" v-model="state.value" v-bind="inputProps" />
-          </UFormField>
-        `
-    })
-
-    const input = wrapper.find('#input')
-
-    await triggerEvent(input, 'change')
-    expect(wrapper.text()).toContain('Error message')
-
-    await setValue(input, validInputValue)
-    await triggerEvent(input, 'change')
-    expect(wrapper.text()).not.toContain('Error message')
-  })
-
-  // test('radio group validate on change works', async () => {
-  //   const wrapper = await renderForm({
-  //     props: {
-  //       validateOn: ['change'],
-  //       validate (state: any) {
-  //         if (state.value !== 'Option 2')
-  //           return [{ name: 'value', message: 'Error message' }]
-  //         return []
-  //       }
-  //     },
-  //     slotVars: {
-  //       inputProps: {
-  //         options: ['Option 1', 'Option 2', 'Option 3']
-  //       }
-  //     },
-  //     slotComponents: {
-  //       UFormField,
-  //       URadioGroup
-  //     },
-  //     slotTemplate: `
-  //         <UFormField name="value">
-  //           <URadioGroup id="input" v-model="state.value" v-bind="inputProps" />
-  //         </UFormField>
-  //       `
-  //   })
-  //
-  //   const option1 = wrapper.find('[value="Option 1"]')
-  //   await setValue(option1, true)
-  //   expect(wrapper.text()).toContain('Error message')
-  //
-  //   const option2 = wrapper.find('[value="Option 2"]')
-  //   await setValue(option2, true)
-  //   expect(wrapper.text()).not.toContain('Error message')
-  // })
-  //
-  // test('radio validate on change works', async () => {
-  //   const wrapper = await renderForm({
-  //     props: {
-  //       validateOn: ['change'],
-  //       validate (state: any) {
-  //         if (state.value !== 'Option 2')
-  //           return [{ name: 'value', message: 'Error message' }]
-  //         return []
-  //       }
-  //     },
-  //     slotComponents: {
-  //       UFormField,
-  //       URadio
-  //     },
-  //     slotTemplate: `
-  //         <UFormField name="value">
-  //           <URadio id="option-1" v-model="state.value" value="Option 1" />
-  //           <URadio id="option-2" v-model="state.value" value="Option 2" />
-  //         </UFormField>
-  //       `
-  //   })
-  //
-  //   const option1 = wrapper.find('#option-1')
-  //   await setValue(option1, true)
-  //   expect(wrapper.text()).toContain('Error message')
-  //
-  //   const option2 = wrapper.find('#option-2')
-  //   await setValue(option2, true)
-  //   expect(wrapper.text()).not.toContain('Error message')
-  // })
-  //
-  // test('toggle validate on change', async () => {
-  //   const wrapper = await renderForm({
-  //     props: {
-  //       validateOn: ['change'],
-  //       validate (state: any) {
-  //         if (state.value) return [{ name: 'value', message: 'Error message' }]
-  //         return []
-  //       }
-  //     },
-  //     slotComponents: {
-  //       UFormField,
-  //       UToggle
-  //     },
-  //     slotTemplate: `
-  //         <UFormField name="value">
-  //           <UToggle id="input" v-model="state.value" />
-  //         </UFormField>
-  //       `
-  //   })
-  //
-  //   const input = wrapper.findComponent({ name: 'Switch' })
-  //   await setValue(input, true)
-  //   expect(wrapper.text()).toContain('Error message')
-  //
-  //   await setValue(input, false)
-  //   expect(wrapper.text()).not.toContain('Error message')
-  // })
-  //
-  // test('select menu validate on change', async () => {
-  //   const wrapper = await renderForm({
-  //     props: {
-  //       validateOn: ['change'],
-  //       validate (state: any) {
-  //         if (state.value !== 'Option 2')
-  //           return [{ name: 'value', message: 'Error message' }]
-  //         return []
-  //       }
-  //     },
-  //     slotVars: {
-  //       inputProps: {
-  //         options: ['Option 1', 'Option 2', 'Option 3']
-  //       }
-  //     },
-  //     slotComponents: {
-  //       UFormField,
-  //       USelectMenu
-  //     },
-  //     slotTemplate: `
-  //         <UFormField name="value">
-  //           <USelectMenu id="input" v-model="state.value" v-bind="inputProps" />
-  //         </UFormField>
-  //       `
-  //   })
-  //
-  //   const input = wrapper.findComponent({ name: 'Listbox' })
-  //   await setValue(input, 'Option 1')
-  //   expect(wrapper.text()).toContain('Error message')
-  //
-  //   await setValue(input, 'Option 2')
-  //   expect(wrapper.text()).not.toContain('Error message')
-  // })
-  //
-  // test('input menu validate on change', async () => {
-  //   const wrapper = await renderForm({
-  //     props: {
-  //       validateOn: ['change'],
-  //       validate (state: any) {
-  //         if (state.value !== 'Option 2')
-  //           return [{ name: 'value', message: 'Error message' }]
-  //         return []
-  //       }
-  //     },
-  //     slotVars: {
-  //       inputProps: {
-  //         options: ['Option 1', 'Option 2', 'Option 3']
-  //       }
-  //     },
-  //     slotComponents: {
-  //       UFormField,
-  //       UInputMenu
-  //     },
-  //     slotTemplate: `
-  //         <UFormField name="value">
-  //           <UInputMenu id="input" v-model="state.value" v-bind="inputProps" />
-  //         </UFormField>
-  //       `
-  //   })
-  //
-  //   const input = wrapper.findComponent({ name: 'Combobox' })
-  //   await setValue(input, 'Option 1')
-  //   expect(wrapper.text()).toContain('Error message')
-  //
-  //   await setValue(input, 'Option 2')
-  //   expect(wrapper.text()).not.toContain('Error message')
-  // })
-  //
-
-  it.each([
-    ['input', UInput, {}, 'foo']
-    // ['textarea', UTextarea, {}, 'foo']
-  ])('%s validate on input works', async (_name, InputComponent, inputProps, validInputValue) => {
-    const wrapper = await renderForm({
-      props: {
-        validateOn: ['input', 'blur'],
-        async validate(state: any) {
-          if (!state.value)
-            return [{ name: 'value', message: 'Error message' }]
-          return []
-        }
-      },
-      slotVars: {
-        inputProps
-      },
-      slotComponents: {
-        UFormField,
-        InputComponent
-      },
-      slotTemplate: `
-          <UFormField name="value" :validate-on-input-delay="50">
-            <InputComponent id="input" v-model="state.value" v-bind="inputProps" />
-          </UFormField>
-        `
-    })
-
-    const input = wrapper.find('#input')
-
-    // Validation @input is enabled only after a blur event
-    await triggerEvent(input, 'blur')
-
-    expect(wrapper.text()).toContain('Error message')
-
-    await setValue(input, validInputValue)
-    // Waiting because of the debounced validation on input event.
-    await new Promise(r => setTimeout(r, 50))
-    expect(wrapper.text()).not.toContain('Error message')
-  })
-
   describe('api', async () => {
     let wrapper: any
     let form: any
diff --git a/test/components/Input.spec.ts b/test/components/Input.spec.ts
index 2a6b53da..b64aad2a 100644
--- a/test/components/Input.spec.ts
+++ b/test/components/Input.spec.ts
@@ -4,6 +4,9 @@ import Input, { type InputProps, type InputSlots } from '../../src/runtime/compo
 import ComponentRender from '../component-render'
 import theme from '#build/ui/input'
 
+import { renderForm } from '../utils/form'
+import type { FormInputEvents } from '~/src/module'
+
 describe('Input', () => {
   const sizes = Object.keys(theme.variants.size) as any
   const colors = Object.keys(theme.variants.color) as any
@@ -67,4 +70,82 @@ describe('Input', () => {
     await input.trigger('change')
     expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [['']] })
   })
+
+  describe('emits', () => {
+    test('update:modelValue event', async () => {
+      const wrapper = mount(Input)
+      const input = wrapper.find('input')
+      await input.setValue('bob@dylan.com')
+      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [['bob@dylan.com']] })
+    })
+
+    test('change event', async () => {
+      const wrapper = mount(Input)
+      const input = wrapper.find('input')
+      await input.setValue('bob@dylan.com')
+      expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
+    })
+
+    test('blur event', async () => {
+      const wrapper = mount(Input)
+      const input = wrapper.find('input')
+      await input.trigger('blur')
+      expect(wrapper.emitted()).toMatchObject({ blur: [[{ type: 'blur' }]] })
+    })
+  })
+
+  describe('form integration', async () => {
+    async function createForm(validateOn?: FormInputEvents[]) {
+      const wrapper = await renderForm({
+        props: {
+          validateOn,
+          validateOnInputDelay: 0,
+          async validate(state: any) {
+            if (state.value !== 'valid')
+              return [{ name: 'value', message: 'Error message' }]
+            return []
+          }
+        },
+        slotTemplate: `
+        <UFormField name="value">
+          <UInput id="input" v-model="state.value" />
+        </UFormField>
+        `
+      })
+      const input = wrapper.find('#input')
+      return {
+        wrapper,
+        input
+      }
+    }
+
+    test('validate on blur works', async () => {
+      const { input, wrapper } = await createForm(['blur'])
+      await input.trigger('blur')
+      expect(wrapper.text()).toContain('Error message')
+
+      await input.setValue('valid')
+      await input.trigger('blur')
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+
+    test('validate on change works', async () => {
+      const { input, wrapper } = await createForm(['change'])
+      await input.trigger('change')
+      expect(wrapper.text()).toContain('Error message')
+
+      input.setValue('valid')
+      await input.trigger('change')
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+
+    test('validate on input works', async () => {
+      const { input, wrapper } = await createForm(['input'])
+      await input.setValue('value')
+      expect(wrapper.text()).toContain('Error message')
+
+      await input.setValue('valid')
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+  })
 })
diff --git a/test/components/InputMenu.spec.ts b/test/components/InputMenu.spec.ts
index 380bcd0a..90d0a2f9 100644
--- a/test/components/InputMenu.spec.ts
+++ b/test/components/InputMenu.spec.ts
@@ -1,7 +1,10 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, test } from 'vitest'
 import InputMenu, { type InputMenuProps, type InputMenuSlots } from '../../src/runtime/components/InputMenu.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/input'
+import { renderForm } from '../utils/form'
+import { flushPromises, mount } from '@vue/test-utils'
+import type { FormInputEvents } from '~/src/module'
 
 describe('InputMenu', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -34,7 +37,7 @@ describe('InputMenu', () => {
     ['with defaultValue', { props: { ...props, defaultValue: items[0] } }],
     ['with id', { props: { ...props, id: 'id' } }],
     ['with name', { props: { ...props, name: 'name' } }],
-    ['with placeholder', { props: { ...props, placeholder: 'Select a status' } }],
+    ['with placeholder', { props: { ...props, placeholder: 'InputMenu a status' } }],
     ['with disabled', { props: { ...props, disabled: true } }],
     ['with required', { props: { ...props, required: true } }],
     ['with icon', { props: { ...props, icon: 'i-heroicons-magnifying-glass' } }],
@@ -65,4 +68,82 @@ describe('InputMenu', () => {
     const html = await ComponentRender(nameOrHtml, options, InputMenu)
     expect(html).toMatchSnapshot()
   })
+
+  describe('emits', () => {
+    test('update:modelValue event', async () => {
+      const wrapper = mount(InputMenu, { props: { items: ['Option 1', 'Option 2'] } })
+      const input = wrapper.findComponent({ name: 'ComboboxRoot' })
+      await input.setValue('Option 1')
+      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [['Option 1']] })
+    })
+
+    test('change event', async () => {
+      const wrapper = mount(InputMenu, { props: { items: ['Option 1', 'Option 2'] } })
+      const input = wrapper.findComponent({ name: 'ComboboxRoot' })
+      await input.setValue('Option 1')
+      expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
+    })
+
+    test('blur event', async () => {
+      const wrapper = mount(InputMenu, { props: { items: ['Option 1', 'Option 2'] } })
+      const input = wrapper.findComponent({ name: 'ComboboxRoot' })
+      await input.vm.$emit('update:open', false)
+      expect(wrapper.emitted()).toMatchObject({ blur: [[{ type: 'blur' }]] })
+    })
+  })
+
+  describe('form integration', async () => {
+    async function createForm(validateOn?: FormInputEvents[]) {
+      const wrapper = await renderForm({
+        props: {
+          validateOn,
+          validateOnInputDelay: 0,
+          async validate(state: any) {
+            if (state.value !== 'Option 2')
+              return [{ name: 'value', message: 'Error message' }]
+            return []
+          }
+        },
+        slotVars: {
+          items: ['Option 1', 'Option 2']
+        },
+        slotTemplate: `
+        <UFormField name="value">
+          <UInputMenu id="input" v-model="state.value" :items="items" />
+        </UFormField>
+        `
+      })
+      const input = wrapper.findComponent({ name: 'ComboboxRoot' })
+      return {
+        wrapper,
+        input
+      }
+    }
+
+    test('validate on blur works', async () => {
+      const { wrapper, input } = await createForm(['blur'])
+      await input.vm.$emit('update:open', false)
+      await flushPromises()
+
+      expect(wrapper.text()).toContain('Error message')
+
+      await input.setValue('Option 2')
+      await input.vm.$emit('update:open', false)
+      await flushPromises()
+
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+
+    test('validate on change works', async () => {
+      const { input, wrapper } = await createForm(['change'])
+
+      input.setValue('Option 1')
+      await flushPromises()
+      expect(wrapper.text()).toContain('Error message')
+
+      input.setValue('Option 2')
+      await flushPromises()
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+  })
 })
diff --git a/test/components/RadioGroup.spec.ts b/test/components/RadioGroup.spec.ts
index 08aeb186..72e69265 100644
--- a/test/components/RadioGroup.spec.ts
+++ b/test/components/RadioGroup.spec.ts
@@ -1,7 +1,10 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, test } from 'vitest'
 import RadioGroup, { type RadioGroupProps, type RadioGroupSlots } from '../../src/runtime/components/RadioGroup.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/radio-group'
+import { flushPromises, mount } from '@vue/test-utils'
+import { renderForm } from '../utils/form'
+import type { FormInputEvents } from '~/src/module'
 
 describe('RadioGroup', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -34,4 +37,76 @@ describe('RadioGroup', () => {
     const html = await ComponentRender(nameOrHtml, options, RadioGroup)
     expect(html).toMatchSnapshot()
   })
+
+  describe('emits', () => {
+    test('update:modelValue event', async () => {
+      const wrapper = mount(RadioGroup, { props: { items: ['Option 1', 'Option 2'] } })
+      const input = wrapper.findComponent({ name: 'RadioGroupRoot' })
+      await input.setValue('Option 1')
+
+      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [['Option 1']] })
+    })
+
+    test('change event', async () => {
+      const wrapper = mount(RadioGroup, { props: { items: ['Option 1', 'Option 2'] } })
+
+      const input = wrapper.findComponent({ name: 'RadioGroupRoot' })
+      await input.setValue('Option 1')
+
+      expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
+    })
+  })
+
+  describe('form integration', async () => {
+    async function createForm(validateOn?: FormInputEvents[]) {
+      const wrapper = await renderForm({
+        props: {
+          validateOn,
+          validateOnInputDelay: 0,
+          async validate(state: any) {
+            if (state.value !== 'Option 2')
+              return [{ name: 'value', message: 'Error message' }]
+            return []
+          }
+        },
+        slotVars: {
+          items: ['Option 1', 'Option 2']
+        },
+        slotTemplate: `
+        <UFormField name="value">
+          <URadioGroup id="input" v-model="state.value" :items="items" />
+        </UFormField>
+        `
+      })
+      const input = wrapper.findComponent({ name: 'RadioGroupRoot' })
+      return {
+        wrapper,
+        input
+      }
+    }
+
+    test('validate on change works', async () => {
+      const { input, wrapper } = await createForm(['change'])
+
+      input.setValue('Option 1')
+      await flushPromises()
+      expect(wrapper.text()).toContain('Error message')
+
+      input.setValue('Option 2')
+      await flushPromises()
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+
+    test('validate on input works', async () => {
+      const { input, wrapper } = await createForm(['input'])
+
+      input.setValue('Option 1')
+      await flushPromises()
+      expect(wrapper.text()).toContain('Error message')
+
+      input.setValue('Option 2')
+      await flushPromises()
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+  })
 })
diff --git a/test/components/Select.spec.ts b/test/components/Select.spec.ts
index ffd79640..260b0b5b 100644
--- a/test/components/Select.spec.ts
+++ b/test/components/Select.spec.ts
@@ -1,7 +1,10 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, test } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
 import Select, { type SelectProps, type SelectSlots } from '../../src/runtime/components/Select.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/input'
+import { renderForm } from '../utils/form'
+import type { FormInputEvents } from '~/src/module'
 
 describe('Select', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -66,4 +69,93 @@ describe('Select', () => {
     const html = await ComponentRender(nameOrHtml, options, Select)
     expect(html).toMatchSnapshot()
   })
+
+  describe('emits', () => {
+    test('update:modelValue event', async () => {
+      const wrapper = mount(Select, { props: { items: ['Option 1', 'Option 2'] } })
+      const input = wrapper.findComponent({ name: 'SelectRoot' })
+      await input.setValue('Option 1')
+      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [['Option 1']] })
+    })
+
+    test('change event', async () => {
+      const wrapper = mount(Select, { props: { items: ['Option 1', 'Option 2'] } })
+      const input = wrapper.findComponent({ name: 'SelectRoot' })
+      await input.setValue('Option 1')
+      expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
+    })
+
+    test('blur event', async () => {
+      const wrapper = mount(Select, { props: { items: ['Option 1', 'Option 2'] } })
+      const input = wrapper.findComponent({ name: 'SelectRoot' })
+      await input.vm.$emit('update:open', false)
+      expect(wrapper.emitted()).toMatchObject({ blur: [[{ type: 'blur' }]] })
+    })
+  })
+
+  describe('form integration', async () => {
+    async function createForm(validateOn?: FormInputEvents[]) {
+      const wrapper = await renderForm({
+        props: {
+          validateOn,
+          validateOnInputDelay: 0,
+          async validate(state: any) {
+            if (state.value !== 'Option 2')
+              return [{ name: 'value', message: 'Error message' }]
+            return []
+          }
+        },
+        slotVars: {
+          items: ['Option 1', 'Option 2']
+        },
+        slotTemplate: `
+        <UFormField name="value">
+          <USelect id="input" v-model="state.value" :items="items" />
+        </UFormField>
+        `
+      })
+      const input = wrapper.findComponent({ name: 'SelectRoot' })
+      return {
+        wrapper,
+        input
+      }
+    }
+
+    test('validate on blur works', async () => {
+      const { input, wrapper } = await createForm(['blur'])
+      await input.vm.$emit('update:open', false)
+      await flushPromises()
+      expect(wrapper.text()).toContain('Error message')
+
+      await input.setValue('Option 2')
+      await input.vm.$emit('update:open', false)
+      await flushPromises()
+
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+
+    test('validate on change works', async () => {
+      const { input, wrapper } = await createForm(['change'])
+
+      input.setValue('Option 1')
+      await flushPromises()
+      expect(wrapper.text()).toContain('Error message')
+
+      input.setValue('Option 2')
+      await flushPromises()
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+
+    test('validate on input works', async () => {
+      const { input, wrapper } = await createForm(['input'])
+
+      input.setValue('Option 1')
+      await flushPromises()
+      expect(wrapper.text()).toContain('Error message')
+
+      input.setValue('Option 2')
+      await flushPromises()
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+  })
 })
diff --git a/test/components/SelectMenu.spec.ts b/test/components/SelectMenu.spec.ts
index 605c178c..9f0b610b 100644
--- a/test/components/SelectMenu.spec.ts
+++ b/test/components/SelectMenu.spec.ts
@@ -1,7 +1,10 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, test } from 'vitest'
 import SelectMenu, { type SelectMenuProps, type SelectMenuSlots } from '../../src/runtime/components/SelectMenu.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/input'
+import { renderForm } from '../utils/form'
+import { flushPromises, mount } from '@vue/test-utils'
+import type { FormInputEvents } from '~/src/module'
 
 describe('SelectMenu', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -70,4 +73,83 @@ describe('SelectMenu', () => {
     const html = await ComponentRender(nameOrHtml, options, SelectMenu)
     expect(html).toMatchSnapshot()
   })
+
+  describe('emits', () => {
+    test('update:modelValue event', async () => {
+      const wrapper = mount(SelectMenu, { props: { items: ['Option 1', 'Option 2'] } })
+      const input = wrapper.findComponent({ name: 'ComboboxRoot' })
+      await input.setValue('Option 1')
+
+      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [['Option 1']] })
+    })
+
+    test('change event', async () => {
+      const wrapper = mount(SelectMenu, { props: { items: ['Option 1', 'Option 2'] } })
+      const input = wrapper.findComponent({ name: 'ComboboxRoot' })
+      await input.setValue('Option 1')
+      expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
+    })
+
+    test('blur event', async () => {
+      const wrapper = mount(SelectMenu, { props: { items: ['Option 1', 'Option 2'] } })
+      const input = wrapper.findComponent({ name: 'ComboboxRoot' })
+      input.vm.$emit('update:open', false)
+      expect(wrapper.emitted()).toMatchObject({ blur: [[{ type: 'blur' }]] })
+    })
+  })
+
+  describe('form integration', async () => {
+    async function createForm(validateOn?: FormInputEvents[]) {
+      const wrapper = await renderForm({
+        props: {
+          validateOn,
+          validateOnInputDelay: 0,
+          async validate(state: any) {
+            if (state.value !== 'Option 2')
+              return [{ name: 'value', message: 'Error message' }]
+            return []
+          }
+        },
+        slotVars: {
+          items: ['Option 1', 'Option 2']
+        },
+        slotTemplate: `
+        <UFormField name="value">
+          <USelectMenu id="input" v-model="state.value" :items="items" />
+        </UFormField>
+        `
+      })
+      const input = wrapper.findComponent({ name: 'ComboboxRoot' })
+      return {
+        wrapper,
+        input
+      }
+    }
+
+    test('validate on blur works', async () => {
+      const { input, wrapper } = await createForm(['blur'])
+      input.vm.$emit('update:open', false)
+      await flushPromises()
+
+      expect(wrapper.text()).toContain('Error message')
+
+      await input.setValue('Option 2')
+      input.vm.$emit('update:open', false)
+      await flushPromises()
+
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+
+    test('validate on change works', async () => {
+      const { input, wrapper } = await createForm(['change'])
+
+      input.setValue('Option 1')
+      await flushPromises()
+      expect(wrapper.text()).toContain('Error message')
+
+      input.setValue('Option 2')
+      await flushPromises()
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+  })
 })
diff --git a/test/components/Slider.spec.ts b/test/components/Slider.spec.ts
index 87f18d0b..140ee132 100644
--- a/test/components/Slider.spec.ts
+++ b/test/components/Slider.spec.ts
@@ -1,7 +1,10 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, test } from 'vitest'
 import Slider, { type SliderProps } from '../../src/runtime/components/Slider.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/slider'
+import { flushPromises, mount } from '@vue/test-utils'
+import { renderForm } from '../utils/form'
+import type { FormInputEvents } from '~/src/module'
 
 describe('Slider', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -25,4 +28,75 @@ describe('Slider', () => {
     const html = await ComponentRender(nameOrHtml, options, Slider)
     expect(html).toMatchSnapshot()
   })
+
+  describe('emits', () => {
+    test('update:modelValue event', async () => {
+      const wrapper = mount(Slider)
+
+      const input = wrapper.findComponent({ name: 'SliderRoot' })
+      input.vm.$emit('update:modelValue', 1)
+
+      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [[1], [1]] })
+    })
+
+    test('change event', async () => {
+      const wrapper = mount(Slider)
+
+      const input = wrapper.findComponent({ name: 'SliderRoot' })
+      input.vm.$emit('valueCommit')
+
+      expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
+    })
+  })
+
+  describe('form integration', async () => {
+    async function createForm(validateOn?: FormInputEvents[]) {
+      const wrapper = await renderForm({
+        props: {
+          validateOn,
+          validateOnInputDelay: 0,
+          async validate(state: any) {
+            if (state.value < 20)
+              return [{ name: 'value', message: 'Error message' }]
+            return []
+          }
+        },
+        slotTemplate: `
+        <UFormField name="value">
+          <USlider v-model="state.value" />
+        </UFormField>
+        `
+      })
+      const input = wrapper.findComponent({ name: 'SliderRoot' })
+      return {
+        wrapper,
+        input
+      }
+    }
+
+    test('validate on change works', async () => {
+      const { input, wrapper } = await createForm(['change'])
+
+      await input.setValue(10)
+      input.vm.$emit('valueCommit')
+      await flushPromises()
+      expect(wrapper.text()).toContain('Error message')
+
+      await input.setValue(40)
+      input.vm.$emit('valueCommit')
+      await flushPromises()
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+
+    test('validate on input works', async () => {
+      const { input, wrapper } = await createForm(['input'])
+      await input.setValue(10)
+      await flushPromises()
+      expect(wrapper.text()).toContain('Error message')
+
+      await input.setValue(40)
+      await flushPromises()
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+  })
 })
diff --git a/test/components/Switch.spec.ts b/test/components/Switch.spec.ts
index d67e1027..bee6779c 100644
--- a/test/components/Switch.spec.ts
+++ b/test/components/Switch.spec.ts
@@ -1,7 +1,10 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, test } from 'vitest'
 import Switch, { type SwitchProps, type SwitchSlots } from '../../src/runtime/components/Switch.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/switch'
+import { flushPromises, mount } from '@vue/test-utils'
+import { renderForm } from '../utils/form'
+import type { FormInputEvents } from '~/src/module'
 
 describe('Switch', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -33,4 +36,69 @@ describe('Switch', () => {
     const html = await ComponentRender(nameOrHtml, options, Switch)
     expect(html).toMatchSnapshot()
   })
+
+  describe('emits', () => {
+    test('update:modelValue event', async () => {
+      const wrapper = mount(Switch)
+      const input = wrapper.findComponent({ name: 'SwitchRoot' })
+      await input.vm.$emit('update:checked', true)
+      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [[true]] })
+    })
+
+    test('change event', async () => {
+      const wrapper = mount(Switch)
+      const input = wrapper.findComponent({ name: 'SwitchRoot' })
+      await input.vm.$emit('update:checked', true)
+      expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
+    })
+  })
+
+  describe('form integration', async () => {
+    async function createForm(validateOn?: FormInputEvents[]) {
+      const wrapper = await renderForm({
+        props: {
+          validateOn,
+          validateOnInputDelay: 0,
+          async validate(state: any) {
+            if (!state.value)
+              return [{ name: 'value', message: 'Error message' }]
+            return []
+          }
+        },
+        slotTemplate: `
+        <UFormField name="value">
+          <USwitch v-model="state.value" />
+        </UFormField>
+        `
+      })
+      const input = wrapper.findComponent({ name: 'SwitchRoot' })
+      return {
+        wrapper,
+        input
+      }
+    }
+
+    test('validate on change works', async () => {
+      const { input, wrapper } = await createForm(['change'])
+      await input.setValue(false)
+      await input.vm.$emit('update:checked', false)
+      await flushPromises()
+      expect(wrapper.text()).toContain('Error message')
+
+      await input.vm.$emit('update:checked', true)
+      await flushPromises()
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+
+    test('validate on input works', async () => {
+      const { input, wrapper } = await createForm(['input'])
+      await input.vm.$emit('update:checked', false)
+      await flushPromises()
+      expect(wrapper.text()).toContain('Error message')
+
+      await input.vm.$emit('update:checked', true)
+      await flushPromises()
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+  })
 })
diff --git a/test/components/Textarea.spec.ts b/test/components/Textarea.spec.ts
index c352caa7..754862f9 100644
--- a/test/components/Textarea.spec.ts
+++ b/test/components/Textarea.spec.ts
@@ -3,6 +3,8 @@ import { mount } from '@vue/test-utils'
 import Textarea, { type TextareaProps, type TextareaSlots } from '../../src/runtime/components/Textarea.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/textarea'
+import { renderForm } from '../utils/form'
+import type { FormInputEvents } from '~/src/module'
 
 describe('Textarea', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -34,7 +36,7 @@ describe('Textarea', () => {
     ['with .number modifier', { props: { modelModifiers: { number: true } } }, { input: '42', expected: 42 }],
     ['with .lazy modifier', { props: { modelModifiers: { lazy: true } } }, { input: 'input', expected: 'input' }]
   ])('%s works', async (_nameOrHtml: string, options: { props?: any, slots?: any }, spec: { input: any, expected: any }) => {
-    const wrapper = await mount(Textarea, {
+    const wrapper = mount(Textarea, {
       ...options
     })
 
@@ -58,4 +60,86 @@ describe('Textarea', () => {
     await input.trigger('change')
     expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [['']] })
   })
+
+  describe('emits', () => {
+    test('update:modelValue event', async () => {
+      const wrapper = mount(Textarea)
+
+      const input = wrapper.find('textarea')
+      await input.setValue('bob@dylan.com')
+
+      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [['bob@dylan.com']] })
+    })
+
+    test('change event', async () => {
+      const wrapper = mount(Textarea)
+
+      const input = wrapper.find('textarea')
+      await input.setValue('bob@dylan.com')
+
+      expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
+    })
+
+    test('blur event', async () => {
+      const wrapper = mount(Textarea)
+      const input = wrapper.find('textarea')
+      await input.trigger('blur')
+      expect(wrapper.emitted()).toMatchObject({ blur: [[{ type: 'blur' }]] })
+    })
+  })
+
+  describe('form integration', async () => {
+    async function createForm(validateOn?: FormInputEvents[]) {
+      const wrapper = await renderForm({
+        props: {
+          validateOn,
+          validateOnInputDelay: 0,
+          async validate(state: any) {
+            if (state.value !== 'valid')
+              return [{ name: 'value', message: 'Error message' }]
+            return []
+          }
+        },
+        slotTemplate: `
+        <UFormField name="value">
+          <UTextarea id="input" v-model="state.value" />
+        </UFormField>
+        `
+      })
+      const input = wrapper.find('#input')
+      return {
+        wrapper,
+        input
+      }
+    }
+
+    test('validate on blur works', async () => {
+      const { input, wrapper } = await createForm(['blur'])
+      await input.trigger('blur')
+      expect(wrapper.text()).toContain('Error message')
+
+      await input.setValue('valid')
+      await input.trigger('blur')
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+
+    test('validate on change works', async () => {
+      const { input, wrapper } = await createForm(['change'])
+      await input.trigger('change')
+      expect(wrapper.text()).toContain('Error message')
+
+      input.setValue('valid')
+      await input.trigger('change')
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+
+    test('validate on input works', async () => {
+      const { input, wrapper } = await createForm(['input'])
+      await input.setValue('value')
+      expect(wrapper.text()).toContain('Error message')
+
+      await input.setValue('valid')
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+  })
 })
diff --git a/test/utils/form.ts b/test/utils/form.ts
new file mode 100644
index 00000000..598e203d
--- /dev/null
+++ b/test/utils/form.ts
@@ -0,0 +1,53 @@
+import { reactive } from 'vue'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import type { FormProps } from '../../src/runtime/components/Form.vue'
+import {
+  UForm,
+  UInput,
+  UFormField,
+  URadioGroup,
+  UTextarea,
+  UCheckbox,
+  USelect,
+  USelectMenu,
+  UInputMenu,
+  USwitch,
+  USlider
+} from '#components'
+
+export async function renderForm(options: {
+  props: Partial<FormProps<any>>
+  slotVars?: object
+  slotTemplate: string
+}) {
+  const state = reactive({})
+
+  return await mountSuspended(UForm, {
+    props: {
+      id: 42,
+      state,
+      ...options.props
+    },
+    slots: {
+      default: {
+        setup() {
+          return { state, ...options.slotVars }
+        },
+        components: {
+          UFormField,
+          UForm,
+          UInput,
+          URadioGroup,
+          UTextarea,
+          UCheckbox,
+          USelect,
+          USelectMenu,
+          UInputMenu,
+          USwitch,
+          USlider
+        },
+        template: options.slotTemplate
+      }
+    }
+  })
+}