+
@@ -46,5 +53,53 @@ const feedbacks = [
+
+
+
+
+
Horizontal Form (Left Labels)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Horizontal Form (Right Labels)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Mixed Label Positions (Individual Override)
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/runtime/components/Form.vue b/src/runtime/components/Form.vue
index 72892888ce..67af45a055 100644
--- a/src/runtime/components/Form.vue
+++ b/src/runtime/components/Form.vue
@@ -49,6 +49,11 @@ export interface FormProps
{
* @defaultValue `true`
*/
loadingAuto?: boolean
+ /**
+ * Position of the labels in form fields.
+ * @defaultValue 'top'
+ */
+ labelPosition?: 'top' | 'left' | 'right'
class?: any
onSubmit?: ((event: FormSubmitEvent>) => void | Promise) | (() => void | Promise)
}
@@ -67,7 +72,7 @@ export interface FormSlots {
import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly, reactive } from 'vue'
import { useEventBus } from '@vueuse/core'
import { useAppConfig } from '#imports'
-import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey, formErrorsInjectionKey } from '../composables/useFormField'
+import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey, formErrorsInjectionKey, formLabelPositionInjectionKey } from '../composables/useFormField'
import { tv } from '../utils/tv'
import { validateSchema } from '../utils/form'
import { FormValidationException } from '../types/form'
@@ -82,7 +87,8 @@ const props = withDefaults(defineProps>(), {
validateOnInputDelay: 300,
attach: true,
transform: () => true as T,
- loadingAuto: true
+ loadingAuto: true,
+ labelPosition: 'top'
})
const emits = defineEmits>()
@@ -265,6 +271,8 @@ provide(formOptionsInjectionKey, computed(() => ({
validateOnInputDelay: props.validateOnInputDelay
})))
+provide(formLabelPositionInjectionKey, computed(() => props.labelPosition))
+
defineExpose