From 8154312bf87af0a817dfdb88d4ddd8bc0be885b8 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Mon, 30 Sep 2024 14:38:01 +0200
Subject: [PATCH 01/24] implement onyxform with form-context

---
 .../src/components/OnyxButton/OnyxButton.vue  |   6 +-
 .../src/components/OnyxButton/types.ts        |   3 +-
 .../components/OnyxCheckbox/OnyxCheckbox.vue  |   8 +-
 .../OnyxCheckboxGroup/OnyxCheckboxGroup.vue   |   7 +-
 .../src/components/OnyxCheckboxGroup/types.ts |   3 +-
 .../components/OnyxForm/OnyxForm.stories.ts   |  46 ++++++++
 .../src/components/OnyxForm/OnyxForm.ts       | 102 ++++++++++++++++++
 .../src/components/OnyxForm/OnyxForm.vue      |  28 +++++
 .../sit-onyx/src/components/OnyxForm/types.ts |   4 +
 .../OnyxIconButton/OnyxIconButton.vue         |   6 +-
 .../src/components/OnyxIconButton/types.ts    |   3 +-
 .../src/components/OnyxInput/OnyxInput.vue    |  11 +-
 .../src/components/OnyxInput/types.ts         |   5 +-
 .../OnyxRadioButton/OnyxRadioButton.vue       |   8 +-
 .../OnyxRadioGroup/OnyxRadioGroup.vue         |   6 +-
 .../src/components/OnyxRadioGroup/types.ts    |   3 +-
 .../src/components/OnyxSelect/OnyxSelect.vue  |   3 +
 .../src/components/OnyxSelect/types.ts        |  11 +-
 .../components/OnyxStepper/OnyxStepper.vue    |  18 ++--
 .../src/components/OnyxStepper/types.ts       |   5 +-
 .../src/components/OnyxSwitch/OnyxSwitch.vue  |   9 +-
 .../src/components/OnyxSwitch/types.ts        |   3 +-
 .../components/OnyxTextarea/OnyxTextarea.vue  |  11 +-
 packages/sit-onyx/src/types/components.ts     |   5 +-
 24 files changed, 267 insertions(+), 47 deletions(-)
 create mode 100644 packages/sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts
 create mode 100644 packages/sit-onyx/src/components/OnyxForm/OnyxForm.ts
 create mode 100644 packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue
 create mode 100644 packages/sit-onyx/src/components/OnyxForm/types.ts

diff --git a/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue b/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue
index 7c1f46b591..c66a1e0156 100644
--- a/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue
+++ b/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue
@@ -6,9 +6,10 @@ import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.v
 import OnyxRipple from "../OnyxRipple/OnyxRipple.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxButtonProps } from "./types";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
 
 const props = withDefaults(defineProps<OnyxButtonProps>(), {
-  disabled: false,
+  disabled: FORM_INJECTED_SYMBOL,
   loading: false,
   type: "button",
   color: "primary",
@@ -17,6 +18,7 @@ const props = withDefaults(defineProps<OnyxButtonProps>(), {
 });
 
 const { densityClass } = useDensity(props);
+const { disabled } = useFormContext(props);
 
 const rippleRef = ref<ComponentInstance<typeof OnyxRipple>>();
 const rippleEvents = computed(() => rippleRef.value?.events ?? {});
@@ -33,7 +35,7 @@ const rippleEvents = computed(() => rippleRef.value?.events ?? {});
       { 'onyx-button--loading': props.loading },
       densityClass,
     ]"
-    :disabled="props.disabled || props.loading"
+    :disabled="disabled || props.loading"
     :type="props.type"
     :aria-label="props.loading ? props.label : undefined"
     :autofocus="props.autofocus"
diff --git a/packages/sit-onyx/src/components/OnyxButton/types.ts b/packages/sit-onyx/src/components/OnyxButton/types.ts
index b88066472b..f19a72913d 100644
--- a/packages/sit-onyx/src/components/OnyxButton/types.ts
+++ b/packages/sit-onyx/src/components/OnyxButton/types.ts
@@ -1,5 +1,6 @@
 import type { DensityProp } from "../../composables/density";
 import type { AutofocusProp } from "../../types";
+import type { FormInjected } from "../OnyxForm/OnyxForm";
 
 export type OnyxButtonProps = DensityProp &
   AutofocusProp & {
@@ -10,7 +11,7 @@ export type OnyxButtonProps = DensityProp &
     /**
      * If the button should be disabled or not.
      */
-    disabled?: boolean;
+    disabled?: FormInjected<boolean>;
     /**
      * Shows a loading indicator.
      */
diff --git a/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue b/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue
index 009bc088df..ceb934cd20 100644
--- a/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue
+++ b/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue
@@ -8,11 +8,12 @@ import OnyxErrorTooltip from "../OnyxErrorTooltip/OnyxErrorTooltip.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxCheckboxProps } from "./types";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
 
 const props = withDefaults(defineProps<OnyxCheckboxProps<TValue>>(), {
   modelValue: false,
   indeterminate: false,
-  disabled: false,
+  disabled: FORM_INJECTED_SYMBOL,
   loading: false,
   required: false,
   skeleton: false,
@@ -37,6 +38,7 @@ const { requiredMarkerClass, requiredTypeClass } = useRequired(props);
 const { densityClass } = useDensity(props);
 
 const { vCustomValidity, errorMessages } = useCustomValidity({ props, emit });
+const { disabled } = useFormContext(props);
 
 const title = computed(() => {
   return props.hideLabel ? props.label : undefined;
@@ -49,7 +51,7 @@ const title = computed(() => {
     <OnyxSkeleton v-if="!props.hideLabel" class="onyx-checkbox-skeleton__label" />
   </div>
 
-  <OnyxErrorTooltip v-else :disabled="props.disabled" :error-messages="errorMessages">
+  <OnyxErrorTooltip v-else :disabled="disabled" :error-messages="errorMessages">
     <label class="onyx-checkbox" :class="[requiredTypeClass, densityClass]" :title="title">
       <div class="onyx-checkbox__container">
         <OnyxLoadingIndicator v-if="props.loading" class="onyx-checkbox__loading" type="circle" />
@@ -61,7 +63,7 @@ const title = computed(() => {
           class="onyx-checkbox__input"
           type="checkbox"
           :indeterminate="props.indeterminate"
-          :disabled="props.disabled"
+          :disabled="disabled"
           :required="props.required"
           :value="props.value"
           :autofocus="props.autofocus"
diff --git a/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue b/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue
index 6ff53ddfe5..1909f8bc7d 100644
--- a/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue
+++ b/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue
@@ -7,12 +7,13 @@ import type { SelectOptionValue } from "../../types";
 import OnyxCheckbox from "../OnyxCheckbox/OnyxCheckbox.vue";
 import OnyxHeadline from "../OnyxHeadline/OnyxHeadline.vue";
 import type { OnyxCheckboxGroupProps } from "./types";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
 
 const props = withDefaults(defineProps<OnyxCheckboxGroupProps<TValue>>(), {
   modelValue: () => [],
   direction: "vertical",
   withCheckAll: false,
-  disabled: false,
+  disabled: FORM_INJECTED_SYMBOL,
   truncation: "ellipsis",
 });
 
@@ -38,6 +39,8 @@ const enabledOptionValues = computed(() =>
   props.options.filter((i) => !i.disabled && !i.skeleton).map(({ value }) => value),
 );
 
+const { disabled } = useFormContext(props);
+
 const checkAll = useCheckAll(
   enabledOptionValues,
   computed(() => props.modelValue),
@@ -54,7 +57,7 @@ const checkAllLabel = computed(() => {
 <template>
   <fieldset
     :class="['onyx-checkbox-group', densityClass]"
-    :disabled="props.disabled"
+    :disabled="disabled"
     :aria-label="props.label"
   >
     <legend v-if="!props.hideLabel" class="onyx-checkbox-group__label">
diff --git a/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts b/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts
index cc60e5592e..39da118a31 100644
--- a/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts
+++ b/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts
@@ -2,6 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp, BaseSelectOption, Direction, SelectOptionValue } from "../../types";
+import type { FormInjected } from "../OnyxForm/OnyxForm";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 
 export type OnyxCheckboxGroupProps<TValue extends SelectOptionValue = SelectOptionValue> =
@@ -36,7 +37,7 @@ export type OnyxCheckboxGroupProps<TValue extends SelectOptionValue = SelectOpti
       /**
        * Whether all checkboxes should be disabled.
        */
-      disabled?: boolean;
+      disabled?: FormInjected<boolean>;
       /**
        * If set, the specified number of skeleton radio buttons will be shown.
        */
diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts
new file mode 100644
index 0000000000..3898b1c22c
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts
@@ -0,0 +1,46 @@
+import { withNativeEventLogging } from "@sit-onyx/storybook-utils";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { h } from "vue";
+import { OnyxInput } from "../..";
+import OnyxButton from "../OnyxButton/OnyxButton.vue";
+import OnyxStepper from "../OnyxStepper/OnyxStepper.vue";
+import OnyxForm from "./OnyxForm.vue";
+
+/**
+ * This component can be used in to wrap form components like OnyxInput/OnyxTextarea/OnyxWrapper.
+ * Currently it handles injection of `required` and `disabled` states for sub-elements.
+ */
+const meta: Meta<typeof OnyxForm> = {
+  title: "Form/Form",
+  component: OnyxForm,
+};
+
+export default meta;
+type Story = StoryObj<typeof OnyxForm>;
+
+/**
+ * This example shows a default form element.
+ */
+export const Default = {
+  args: {
+    style: { maxWidth: "10rem", display: "flex", flexDirection: "column", gap: "1rem" },
+    default: () => [
+      h(OnyxInput, { label: "Favorite band", modelValue: "Queen" }),
+      h(OnyxInput, { label: "Favorite password", type: "password", modelValue: "incorrect" }),
+      h(OnyxStepper, { label: "Number of hairs", min: 0, modelValue: 23 }),
+      h(
+        "div",
+        {
+          style: { display: "flex", gap: "0.5rem" },
+        },
+        [
+          h(OnyxButton, { label: "Reset", type: "reset", mode: "outline" }),
+          h(OnyxButton, { label: "Submit", type: "submit", formmethod: "dialog" }), // we use formmethod `dialog` to avoid a page load on submit
+        ],
+      ),
+    ],
+  },
+  argTypes: {
+    ...withNativeEventLogging(["onSubmit", "onReset"]),
+  },
+} satisfies Story;
diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.ts b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.ts
new file mode 100644
index 0000000000..8879dbfee2
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.ts
@@ -0,0 +1,102 @@
+import { computed, inject, provide, type InjectionKey, type Reactive, type Ref } from "vue";
+
+const FORM_INJECTION_KEY = Symbol() as InjectionKey<ReturnType<typeof createFormInjectionContext>>;
+
+/**
+ * Props on the `OnyxForm` component.
+ * These are injected, so that they can be used in the form child components.
+ */
+export type FormInjectedProps = {
+  disabled: boolean;
+  readonly: boolean;
+};
+
+/**
+ * Props that may be used by the form child components.
+ */
+type LocalProps = {
+  [TKey in keyof FormInjectedProps]?: FormInjected<FormInjectedProps[TKey]>;
+};
+
+/**
+ * Symbol for the injected form injected properties.
+ */
+export const FORM_INJECTED_SYMBOL = Symbol("FORM_INJECTED_SYMBOL");
+export type FORM_INJECTED = typeof FORM_INJECTED_SYMBOL;
+/**
+ * Prop type used by form child elements, which indicates that the prop value is taken from the parent form by default.
+ * The props **MUST** use `FORM_INJECTED_SYMBOL` as default value.
+ * `useFormContext` is used to access the injected form properties.
+ *
+ * @example
+ * ```ts
+ * const props = withDefaults(defineProps<OnyxComponentProps>(), {
+ *   readonly: FORM_INJECTED_SYMBOL,
+ *   disabled: FORM_INJECTED_SYMBOL,
+ * });
+ *
+ * const { disabled, readonly } = useFormContext(props);
+ * ```
+ */
+export type FormInjected<T> = T | FORM_INJECTED;
+
+const createCompute = <
+  TKey extends keyof FormInjectedProps,
+  TValue extends FormInjectedProps[keyof FormInjectedProps],
+>(
+  formProps: FormInjectedProps | undefined,
+  props: LocalProps,
+  key: TKey,
+  defaultValue: TValue,
+): Readonly<Ref<FormInjectedProps[TKey]>> =>
+  computed(() => {
+    const prop = props[key] as FormInjected<FormInjectedProps[TKey]> | undefined;
+    if (prop != undefined && prop !== FORM_INJECTED_SYMBOL) {
+      return prop;
+    }
+    const formProp = formProps?.[key];
+    if (formProp !== undefined) {
+      return formProp;
+    }
+    return defaultValue;
+  });
+
+const createFormInjectionContext =
+  (formProps?: FormInjectedProps) =>
+  (
+    props: Reactive<LocalProps>,
+  ): { [TKey in keyof FormInjectedProps]: Ref<FormInjectedProps[TKey]> } => ({
+    get disabled() {
+      return createCompute(formProps, props, "disabled", false);
+    },
+    get readonly() {
+      return createCompute(formProps, props, "readonly", false);
+    },
+  });
+
+export const provideFormContext = (formProps: Reactive<FormInjectedProps> | undefined) =>
+  provide(FORM_INJECTION_KEY, createFormInjectionContext(formProps));
+
+/**
+ * Provides the injected form properties (if available).
+ * Otherwise a defined default is used.
+ * A prop defined on the child component will always take precedence over the injected form properties.
+ *
+ * The props **MUST** use `FORM_INJECTED_SYMBOL` as default value.
+ * The type `FormInjected<T>` can be used as PropType wrapper.
+ *
+ * @example
+ * ```ts
+ * const props = withDefaults(defineProps<OnyxComponentProps>(), {
+ *   readonly: FORM_INJECTED_SYMBOL, // By default, the forms injected value is used
+ *   disabled: FORM_INJECTED_SYMBOL, // By default, the forms injected value is used
+ * });
+ *
+ * const { disabled, readonly } = useFormContext(props);
+ * ```
+ */
+export const useFormContext = inject(
+  FORM_INJECTION_KEY,
+  /** Default */
+  createFormInjectionContext(),
+);
diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue
new file mode 100644
index 0000000000..33b8c4c7d0
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useDensity } from "../../composables/density";
+import { provideFormContext } from "./OnyxForm";
+import type { OnyxFormProps } from "./types";
+
+const props = defineProps<OnyxFormProps>();
+
+defineSlots<{
+  /**
+   * Any form content
+   */
+  default?(): unknown;
+}>();
+
+provideFormContext(props);
+
+const { densityClass } = useDensity(props);
+</script>
+<template>
+  <form
+    :class="{
+      'onyx-form': true,
+      ...densityClass,
+    }"
+  >
+    <slot></slot>
+  </form>
+</template>
diff --git a/packages/sit-onyx/src/components/OnyxForm/types.ts b/packages/sit-onyx/src/components/OnyxForm/types.ts
new file mode 100644
index 0000000000..e24f87a366
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxForm/types.ts
@@ -0,0 +1,4 @@
+import type { DensityProp } from "../../composables/density";
+import type { FormInjectedProps } from "./OnyxForm";
+
+export type OnyxFormProps = Partial<FormInjectedProps> & DensityProp;
diff --git a/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue b/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue
index 07a05950d6..b1ecf8a418 100644
--- a/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue
+++ b/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue
@@ -1,18 +1,20 @@
 <script lang="ts" setup>
 import { useDensity } from "../../composables/density";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
 import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxIconButtonProps } from "./types";
 
 const props = withDefaults(defineProps<OnyxIconButtonProps>(), {
-  disabled: false,
+  disabled: FORM_INJECTED_SYMBOL,
   type: "button",
   color: "primary",
   skeleton: false,
 });
 
 const { densityClass } = useDensity(props);
+const { disabled } = useFormContext(props);
 
 defineSlots<{
   /** Slot for an custom icon. Will have no effect if property `icon` is passed. */
@@ -34,7 +36,7 @@ defineSlots<{
       { 'onyx-icon-button--loading': props.loading },
       densityClass,
     ]"
-    :disabled="props.disabled || props.loading"
+    :disabled="disabled || props.loading"
     :autofocus="props.autofocus"
   >
     <OnyxLoadingIndicator v-if="props.loading" type="circle" />
diff --git a/packages/sit-onyx/src/components/OnyxIconButton/types.ts b/packages/sit-onyx/src/components/OnyxIconButton/types.ts
index ad8c7b722b..60b1c522e6 100644
--- a/packages/sit-onyx/src/components/OnyxIconButton/types.ts
+++ b/packages/sit-onyx/src/components/OnyxIconButton/types.ts
@@ -1,6 +1,7 @@
 import type { DensityProp } from "../../composables/density";
 import type { AutofocusProp } from "../../types";
 import type { ButtonColor, ButtonType } from "../OnyxButton/types";
+import type { FormInjected } from "../OnyxForm/OnyxForm";
 
 export type OnyxIconButtonProps = DensityProp &
   AutofocusProp & {
@@ -11,7 +12,7 @@ export type OnyxIconButtonProps = DensityProp &
     /**
      * If the button should be disabled or not.
      */
-    disabled?: boolean;
+    disabled?: FormInjected<boolean>;
     /**
      * The button type.
      */
diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
index f90034fc9b..de9fd4c381 100644
--- a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
+++ b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
@@ -6,14 +6,15 @@ import OnyxFormElement from "../OnyxFormElement/OnyxFormElement.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxInputProps } from "./types";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
 
 const props = withDefaults(defineProps<OnyxInputProps>(), {
   modelValue: "",
   type: "text",
   required: false,
   autocapitalize: "sentences",
-  readonly: false,
-  disabled: false,
+  readonly: FORM_INJECTED_SYMBOL,
+  disabled: FORM_INJECTED_SYMBOL,
   loading: false,
   skeleton: false,
 });
@@ -45,6 +46,8 @@ const patternSource = computed(() => {
   if (props.pattern instanceof RegExp) return props.pattern.source;
   return props.pattern;
 });
+
+const { readonly, disabled } = useFormContext(props);
 </script>
 
 <template>
@@ -71,8 +74,8 @@ const patternSource = computed(() => {
             :autofocus="props.autofocus"
             :name="props.name"
             :pattern="patternSource"
-            :readonly="props.readonly"
-            :disabled="props.disabled || props.loading"
+            :readonly="readonly"
+            :disabled="disabled || props.loading"
             :minlength="props.minlength"
             :maxlength="props.maxlength"
             :aria-label="props.hideLabel ? props.label : undefined"
diff --git a/packages/sit-onyx/src/components/OnyxInput/types.ts b/packages/sit-onyx/src/components/OnyxInput/types.ts
index 63bad1502c..a971502bf3 100644
--- a/packages/sit-onyx/src/components/OnyxInput/types.ts
+++ b/packages/sit-onyx/src/components/OnyxInput/types.ts
@@ -2,6 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp } from "../../types";
+import type { FormInjected } from "../OnyxForm/OnyxForm";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 
 export type OnyxInputProps = DensityProp &
@@ -50,11 +51,11 @@ export type OnyxInputProps = DensityProp &
     /**
      * Whether the input should be readonly.
      */
-    readonly?: boolean;
+    readonly?: FormInjected<boolean>;
     /**
      * Whether the input should be disabled.
      */
-    disabled?: boolean;
+    disabled?: FormInjected<boolean>;
     /**
      * Whether the input is loading. User interaction will be disabled.
      */
diff --git a/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue b/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue
index f9d80f7a0b..cc86274724 100644
--- a/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue
+++ b/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue
@@ -3,12 +3,13 @@ import { useDensity } from "../../composables/density";
 import { useCustomValidity } from "../../composables/useCustomValidity";
 import type { SelectOptionValue } from "../../types";
 import OnyxErrorTooltip from "../OnyxErrorTooltip/OnyxErrorTooltip.vue";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxRadioButtonProps } from "./types";
 
 const props = withDefaults(defineProps<OnyxRadioButtonProps<TValue>>(), {
-  disabled: false,
+  disabled: FORM_INJECTED_SYMBOL,
   required: false,
   checked: false,
   loading: false,
@@ -24,6 +25,7 @@ const emit = defineEmits<{
 
 const { vCustomValidity, errorMessages } = useCustomValidity({ props, emit });
 const { densityClass } = useDensity(props);
+const { disabled } = useFormContext(props);
 </script>
 
 <template>
@@ -32,7 +34,7 @@ const { densityClass } = useDensity(props);
     <OnyxSkeleton class="onyx-radio-button-skeleton__label" />
   </div>
 
-  <OnyxErrorTooltip v-else :disabled="props.disabled" :error-messages="errorMessages">
+  <OnyxErrorTooltip v-else :disabled="disabled" :error-messages="errorMessages">
     <label :class="['onyx-radio-button', densityClass]">
       <OnyxLoadingIndicator v-if="props.loading" class="onyx-radio-button__loading" type="circle" />
       <!-- TODO: accessible error: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage -->
@@ -45,7 +47,7 @@ const { densityClass } = useDensity(props);
         :name="props.name"
         :value="props.value"
         :checked="props.checked"
-        :disabled="props.disabled"
+        :disabled="disabled"
         :autofocus="props.autofocus"
       />
       <span class="onyx-radio-button__label" :class="[`onyx-truncation-${props.truncation}`]">
diff --git a/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue b/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue
index ba7588d5fc..ff55deec0a 100644
--- a/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue
+++ b/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue
@@ -6,17 +6,19 @@ import type { SelectOptionValue } from "../../types";
 import OnyxHeadline from "../OnyxHeadline/OnyxHeadline.vue";
 import OnyxRadioButton from "../OnyxRadioButton/OnyxRadioButton.vue";
 import type { OnyxRadioGroupProps } from "./types";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
 
 const props = withDefaults(defineProps<OnyxRadioGroupProps<TValue>>(), {
   name: () => useId() ?? "", // the name must be globally unique
   direction: "vertical",
   required: false,
-  disabled: false,
+  disabled: FORM_INJECTED_SYMBOL,
   truncation: "ellipsis",
 });
 
 const { densityClass } = useDensity(props);
 const { requiredMarkerClass, requiredTypeClass } = useRequired(props);
+const { disabled } = useFormContext(props);
 
 const emit = defineEmits<{
   "update:modelValue": [selected: TValue];
@@ -35,7 +37,7 @@ const handleChange = (selected: boolean, value: TValue) => {
 <template>
   <fieldset
     :class="['onyx-radio-button-group', densityClass, requiredTypeClass]"
-    :disabled="props.disabled"
+    :disabled="disabled"
     role="radiogroup"
     :aria-label="props.label"
   >
diff --git a/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts b/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts
index a9cf07190f..5e18e309ef 100644
--- a/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts
+++ b/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts
@@ -2,6 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp, BaseSelectOption, Direction, SelectOptionValue } from "../../types";
+import type { FormInjected } from "../OnyxForm/OnyxForm";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 
 export type OnyxRadioGroupProps<TValue extends SelectOptionValue = SelectOptionValue> =
@@ -27,7 +28,7 @@ export type OnyxRadioGroupProps<TValue extends SelectOptionValue = SelectOptionV
       /**
        * Disable the radio group.
        */
-      disabled?: boolean;
+      disabled?: FormInjected<boolean>;
       /**
        * Direction of the checkboxes. Can be vertical (default) or horizontal.
        */
diff --git a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
index c1082358ff..ee301dd893 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
+++ b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
@@ -18,11 +18,14 @@ import OnyxSelectInput from "../OnyxSelectInput/OnyxSelectInput.vue";
 import type { OnyxSelectInputProps } from "../OnyxSelectInput/types";
 import OnyxSelectOption from "../OnyxSelectOption/OnyxSelectOption.vue";
 import type { OnyxSelectProps, SelectOption } from "./types";
+import { FORM_INJECTED_SYMBOL } from "../OnyxForm/OnyxForm";
 
 const props = withDefaults(defineProps<OnyxSelectProps<TValue>>(), {
   loading: false,
   searchTerm: MANAGED_SYMBOL,
   open: MANAGED_SYMBOL,
+  disabled: FORM_INJECTED_SYMBOL,
+  readonly: FORM_INJECTED_SYMBOL,
   truncation: "ellipsis",
   valueLabel: undefined,
   alignment: "full",
diff --git a/packages/sit-onyx/src/components/OnyxSelect/types.ts b/packages/sit-onyx/src/components/OnyxSelect/types.ts
index 7354a6c55a..8499f5e5a8 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/types.ts
+++ b/packages/sit-onyx/src/components/OnyxSelect/types.ts
@@ -1,6 +1,7 @@
 import type { DensityProp } from "../../composables/density";
 import type { ManagedProp } from "../../composables/useManagedState";
 import type { AutofocusProp, BaseSelectOption, SelectOptionValue } from "../../types";
+import type { FormInjected } from "../OnyxForm/OnyxForm";
 import type { OnyxSelectInputProps } from "../OnyxSelectInput/types";
 import type { OnyxSelectOptionProps } from "../OnyxSelectOption/types";
 
@@ -70,9 +71,17 @@ export type SelectModelValueProps<TValue extends SelectOptionValue> =
 export type OnyxSelectProps<TValue extends SelectOptionValue = SelectOptionValue> = DensityProp &
   SelectModelValueProps<TValue> &
   SelectSearchProps &
-  Omit<OnyxSelectInputProps, "density" | "modelValue" | "showFocus"> &
+  Omit<OnyxSelectInputProps, "density" | "modelValue" | "showFocus" | "disabled" | "readonly"> &
   AutofocusProp &
   Pick<BaseSelectOption, "truncation"> & {
+    /**
+     * Whether the select should be disabled.
+     */
+    disabled?: FormInjected<boolean>;
+    /**
+     * Whether the select should be readonly.
+     */
+    readonly?: FormInjected<boolean>;
     /**
      * Label that will be shown in the input of OnyxSelect.
      * If unset, will be managed internally by comparing `modelValue` with `options`.
diff --git a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
index 2db8345f81..bc807431c3 100644
--- a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
+++ b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
@@ -10,12 +10,13 @@ import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxStepperProps } from "./types";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
 
 const props = withDefaults(defineProps<OnyxStepperProps>(), {
   step: 1,
   stripStep: false,
-  disabled: false,
-  readonly: false,
+  disabled: FORM_INJECTED_SYMBOL,
+  readonly: FORM_INJECTED_SYMBOL,
   loading: false,
   skeleton: false,
 });
@@ -32,6 +33,7 @@ const emit = defineEmits<{
   validityChange: [validity: ValidityState];
 }>();
 
+const { readonly, disabled } = useFormContext(props);
 const { densityClass } = useDensity(props);
 const { vCustomValidity, errorMessages } = useCustomValidity({ props, emit });
 
@@ -73,9 +75,7 @@ const decrementLabel = computed(() => t.value("stepper.decrement", { stepSize: p
         <button
           type="button"
           class="onyx-stepper__counter"
-          :disabled="
-            (props.min && props.min === value) || props.disabled || props.readonly || props.loading
-          "
+          :disabled="(props.min && props.min === value) || disabled || readonly || props.loading"
           :aria-label="decrementLabel"
           @click="handleClick('stepDown')"
         >
@@ -92,12 +92,12 @@ const decrementLabel = computed(() => t.value("stepper.decrement", { stepSize: p
           type="number"
           :aria-label="props.label"
           :autofocus="props.autofocus"
-          :disabled="props.disabled || props.loading"
+          :disabled="disabled || props.loading"
           :min="props.min"
           :max="props.max"
           :name="props.name"
           :placeholder="props.placeholder"
-          :readonly="props.readonly"
+          :readonly="readonly"
           :required="props.required"
           :step="props.step"
           :title="props.hideLabel ? props.label : undefined"
@@ -106,9 +106,7 @@ const decrementLabel = computed(() => t.value("stepper.decrement", { stepSize: p
         <button
           type="button"
           class="onyx-stepper__counter"
-          :disabled="
-            (props.max && props.max === value) || props.disabled || props.readonly || props.loading
-          "
+          :disabled="(props.max && props.max === value) || disabled || readonly || props.loading"
           :aria-label="incrementLabel"
           @click="handleClick('stepUp')"
         >
diff --git a/packages/sit-onyx/src/components/OnyxStepper/types.ts b/packages/sit-onyx/src/components/OnyxStepper/types.ts
index 3063308834..6116ec900c 100644
--- a/packages/sit-onyx/src/components/OnyxStepper/types.ts
+++ b/packages/sit-onyx/src/components/OnyxStepper/types.ts
@@ -1,6 +1,7 @@
 import type { DensityProp } from "../../composables/density";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp } from "../../types";
+import type { FormInjected } from "../OnyxForm/OnyxForm";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 import type { Autocomplete } from "../OnyxInput/types";
 
@@ -44,11 +45,11 @@ export type OnyxStepperProps = DensityProp &
     /**
      * Whether to disable the input and prevent user interaction.
      */
-    disabled?: boolean;
+    disabled?: FormInjected<boolean>;
     /**
      * Whether the input should be readonly.
      */
-    readonly?: boolean;
+    readonly?: FormInjected<boolean>;
     /**
      * Whether the input is loading. User interaction will be disabled.
      */
diff --git a/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue b/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue
index 30de74d929..dc6774bd42 100644
--- a/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue
+++ b/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue
@@ -10,10 +10,11 @@ import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxSwitchProps } from "./types";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
 
 const props = withDefaults(defineProps<OnyxSwitchProps>(), {
   modelValue: false,
-  disabled: false,
+  disabled: FORM_INJECTED_SYMBOL,
   loading: false,
   truncation: "ellipsis",
   skeleton: false,
@@ -36,6 +37,8 @@ const title = computed(() => {
   return props.hideLabel ? props.label : undefined;
 });
 
+const { disabled } = useFormContext(props);
+
 const isChecked = computed({
   get: () => props.modelValue,
   set: (value) => {
@@ -52,7 +55,7 @@ const isChecked = computed({
     <OnyxSkeleton v-if="!props.hideLabel" class="onyx-switch-skeleton__label" />
   </div>
 
-  <OnyxErrorTooltip v-else :disabled="props.disabled" :error-messages="errorMessages">
+  <OnyxErrorTooltip v-else :disabled="disabled" :error-messages="errorMessages">
     <label class="onyx-switch" :class="[requiredTypeClass, densityClass]" :title="title">
       <input
         v-model="isChecked"
@@ -61,7 +64,7 @@ const isChecked = computed({
         role="switch"
         :class="{ 'onyx-switch__input': true, 'onyx-switch__loading': props.loading }"
         :aria-label="props.hideLabel ? props.label : undefined"
-        :disabled="props.disabled || props.loading"
+        :disabled="disabled || props.loading"
         :required="props.required"
         :autofocus="props.autofocus"
       />
diff --git a/packages/sit-onyx/src/components/OnyxSwitch/types.ts b/packages/sit-onyx/src/components/OnyxSwitch/types.ts
index 9e326d440b..b7d0d53980 100644
--- a/packages/sit-onyx/src/components/OnyxSwitch/types.ts
+++ b/packages/sit-onyx/src/components/OnyxSwitch/types.ts
@@ -2,6 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp, TruncationType } from "../../types";
+import type { FormInjected } from "../OnyxForm/OnyxForm";
 
 export type OnyxSwitchProps = DensityProp &
   RequiredMarkerProp &
@@ -18,7 +19,7 @@ export type OnyxSwitchProps = DensityProp &
     /**
      * Whether to disable the switch and prevent user interaction.
      */
-    disabled?: boolean;
+    disabled?: FormInjected<boolean>;
     /**
      * Shows a loading indicator.
      */
diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
index 8829408128..4dec6140ab 100644
--- a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
+++ b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
@@ -5,13 +5,14 @@ import { useCustomValidity } from "../../composables/useCustomValidity";
 import OnyxFormElement from "../OnyxFormElement/OnyxFormElement.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxTextareaProps } from "./types";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
 
 const props = withDefaults(defineProps<OnyxTextareaProps>(), {
   modelValue: "",
   required: false,
   autocapitalize: "sentences",
-  readonly: false,
-  disabled: false,
+  readonly: FORM_INJECTED_SYMBOL,
+  disabled: FORM_INJECTED_SYMBOL,
   skeleton: false,
   disableManualResize: false,
 });
@@ -57,6 +58,8 @@ const handleInput = (event: Event) => {
   const target = event.target as HTMLTextAreaElement;
   target.parentElement?.setAttribute("data-autosize-value", target.value);
 };
+
+const { disabled, readonly } = useFormContext(props);
 </script>
 
 <template>
@@ -88,8 +91,8 @@ const handleInput = (event: Event) => {
             :autocapitalize="props.autocapitalize"
             :autofocus="props.autofocus"
             :name="props.name"
-            :readonly="props.readonly"
-            :disabled="props.disabled"
+            :readonly="readonly"
+            :disabled="disabled"
             :minlength="props.minlength"
             :maxlength="props.maxlength"
             :aria-label="props.hideLabel ? props.label : undefined"
diff --git a/packages/sit-onyx/src/types/components.ts b/packages/sit-onyx/src/types/components.ts
index bf6950c8ea..25378505bc 100644
--- a/packages/sit-onyx/src/types/components.ts
+++ b/packages/sit-onyx/src/types/components.ts
@@ -1,3 +1,4 @@
+import type { FormInjected } from "../components/OnyxForm/OnyxForm";
 import type { DensityProp } from "../composables/density";
 import type { TruncationType } from "./fonts";
 
@@ -30,11 +31,11 @@ export type BaseSelectOption<TValue extends SelectOptionValue = SelectOptionValu
   /**
    * Whether to disable the component and prevent user interaction.
    */
-  disabled?: boolean;
+  disabled?: FormInjected<boolean>;
   /**
    * Shows a loading indicator.
    */
-  loading?: boolean;
+  loading?: FormInjected<boolean>;
   /**
    * Whether to show a skeleton.
    */

From 3f874817a5f38b618a7f1385c72801210962b596 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Mon, 30 Sep 2024 14:49:34 +0200
Subject: [PATCH 02/24] rename onyxform.ts to oynxform.core.ts

---
 packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue    | 2 +-
 packages/sit-onyx/src/components/OnyxButton/types.ts          | 2 +-
 .../sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue     | 2 +-
 .../src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue    | 2 +-
 packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts   | 2 +-
 .../src/components/OnyxForm/{OnyxForm.ts => OnyxForm.core.ts} | 0
 packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue        | 2 +-
 packages/sit-onyx/src/components/OnyxForm/types.ts            | 2 +-
 .../sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue | 2 +-
 packages/sit-onyx/src/components/OnyxIconButton/types.ts      | 2 +-
 packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue      | 2 +-
 packages/sit-onyx/src/components/OnyxInput/types.ts           | 2 +-
 .../src/components/OnyxRadioButton/OnyxRadioButton.vue        | 2 +-
 .../sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue | 2 +-
 packages/sit-onyx/src/components/OnyxRadioGroup/types.ts      | 2 +-
 packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue    | 2 +-
 packages/sit-onyx/src/components/OnyxSelect/types.ts          | 2 +-
 packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue  | 4 ++--
 packages/sit-onyx/src/components/OnyxStepper/types.ts         | 2 +-
 packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue    | 2 +-
 packages/sit-onyx/src/components/OnyxSwitch/types.ts          | 2 +-
 .../sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue     | 2 +-
 22 files changed, 22 insertions(+), 22 deletions(-)
 rename packages/sit-onyx/src/components/OnyxForm/{OnyxForm.ts => OnyxForm.core.ts} (100%)

diff --git a/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue b/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue
index c66a1e0156..71c6e967c2 100644
--- a/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue
+++ b/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue
@@ -6,7 +6,7 @@ import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.v
 import OnyxRipple from "../OnyxRipple/OnyxRipple.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxButtonProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxButtonProps>(), {
   disabled: FORM_INJECTED_SYMBOL,
diff --git a/packages/sit-onyx/src/components/OnyxButton/types.ts b/packages/sit-onyx/src/components/OnyxButton/types.ts
index f19a72913d..703730a923 100644
--- a/packages/sit-onyx/src/components/OnyxButton/types.ts
+++ b/packages/sit-onyx/src/components/OnyxButton/types.ts
@@ -1,6 +1,6 @@
 import type { DensityProp } from "../../composables/density";
 import type { AutofocusProp } from "../../types";
-import type { FormInjected } from "../OnyxForm/OnyxForm";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 
 export type OnyxButtonProps = DensityProp &
   AutofocusProp & {
diff --git a/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue b/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue
index ceb934cd20..6d2f8f36c9 100644
--- a/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue
+++ b/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue
@@ -8,7 +8,7 @@ import OnyxErrorTooltip from "../OnyxErrorTooltip/OnyxErrorTooltip.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxCheckboxProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxCheckboxProps<TValue>>(), {
   modelValue: false,
diff --git a/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue b/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue
index 1909f8bc7d..59ef3c501d 100644
--- a/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue
+++ b/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue
@@ -7,7 +7,7 @@ import type { SelectOptionValue } from "../../types";
 import OnyxCheckbox from "../OnyxCheckbox/OnyxCheckbox.vue";
 import OnyxHeadline from "../OnyxHeadline/OnyxHeadline.vue";
 import type { OnyxCheckboxGroupProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxCheckboxGroupProps<TValue>>(), {
   modelValue: () => [],
diff --git a/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts b/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts
index 39da118a31..234fb950bf 100644
--- a/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts
+++ b/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts
@@ -2,7 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp, BaseSelectOption, Direction, SelectOptionValue } from "../../types";
-import type { FormInjected } from "../OnyxForm/OnyxForm";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 
 export type OnyxCheckboxGroupProps<TValue extends SelectOptionValue = SelectOptionValue> =
diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.ts b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.ts
similarity index 100%
rename from packages/sit-onyx/src/components/OnyxForm/OnyxForm.ts
rename to packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.ts
diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue
index 33b8c4c7d0..c5c7f114ce 100644
--- a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue
+++ b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useDensity } from "../../composables/density";
-import { provideFormContext } from "./OnyxForm";
+import { provideFormContext } from "./OnyxForm.core";
 import type { OnyxFormProps } from "./types";
 
 const props = defineProps<OnyxFormProps>();
diff --git a/packages/sit-onyx/src/components/OnyxForm/types.ts b/packages/sit-onyx/src/components/OnyxForm/types.ts
index e24f87a366..f9998f2831 100644
--- a/packages/sit-onyx/src/components/OnyxForm/types.ts
+++ b/packages/sit-onyx/src/components/OnyxForm/types.ts
@@ -1,4 +1,4 @@
 import type { DensityProp } from "../../composables/density";
-import type { FormInjectedProps } from "./OnyxForm";
+import type { FormInjectedProps } from "./OnyxForm.core";
 
 export type OnyxFormProps = Partial<FormInjectedProps> & DensityProp;
diff --git a/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue b/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue
index b1ecf8a418..e06aa05651 100644
--- a/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue
+++ b/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useDensity } from "../../composables/density";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
diff --git a/packages/sit-onyx/src/components/OnyxIconButton/types.ts b/packages/sit-onyx/src/components/OnyxIconButton/types.ts
index 60b1c522e6..4b5ab0cad5 100644
--- a/packages/sit-onyx/src/components/OnyxIconButton/types.ts
+++ b/packages/sit-onyx/src/components/OnyxIconButton/types.ts
@@ -1,7 +1,7 @@
 import type { DensityProp } from "../../composables/density";
 import type { AutofocusProp } from "../../types";
 import type { ButtonColor, ButtonType } from "../OnyxButton/types";
-import type { FormInjected } from "../OnyxForm/OnyxForm";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 
 export type OnyxIconButtonProps = DensityProp &
   AutofocusProp & {
diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
index de9fd4c381..2263505bfe 100644
--- a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
+++ b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
@@ -6,7 +6,7 @@ import OnyxFormElement from "../OnyxFormElement/OnyxFormElement.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxInputProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxInputProps>(), {
   modelValue: "",
diff --git a/packages/sit-onyx/src/components/OnyxInput/types.ts b/packages/sit-onyx/src/components/OnyxInput/types.ts
index a971502bf3..9a680c1a4a 100644
--- a/packages/sit-onyx/src/components/OnyxInput/types.ts
+++ b/packages/sit-onyx/src/components/OnyxInput/types.ts
@@ -2,7 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp } from "../../types";
-import type { FormInjected } from "../OnyxForm/OnyxForm";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 
 export type OnyxInputProps = DensityProp &
diff --git a/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue b/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue
index cc86274724..5030a51a56 100644
--- a/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue
+++ b/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue
@@ -3,7 +3,7 @@ import { useDensity } from "../../composables/density";
 import { useCustomValidity } from "../../composables/useCustomValidity";
 import type { SelectOptionValue } from "../../types";
 import OnyxErrorTooltip from "../OnyxErrorTooltip/OnyxErrorTooltip.vue";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxRadioButtonProps } from "./types";
diff --git a/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue b/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue
index ff55deec0a..52382161c8 100644
--- a/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue
+++ b/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue
@@ -6,7 +6,7 @@ import type { SelectOptionValue } from "../../types";
 import OnyxHeadline from "../OnyxHeadline/OnyxHeadline.vue";
 import OnyxRadioButton from "../OnyxRadioButton/OnyxRadioButton.vue";
 import type { OnyxRadioGroupProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxRadioGroupProps<TValue>>(), {
   name: () => useId() ?? "", // the name must be globally unique
diff --git a/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts b/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts
index 5e18e309ef..bc51fa78b3 100644
--- a/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts
+++ b/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts
@@ -2,7 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp, BaseSelectOption, Direction, SelectOptionValue } from "../../types";
-import type { FormInjected } from "../OnyxForm/OnyxForm";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 
 export type OnyxRadioGroupProps<TValue extends SelectOptionValue = SelectOptionValue> =
diff --git a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
index ee301dd893..95499006e5 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
+++ b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
@@ -18,7 +18,7 @@ import OnyxSelectInput from "../OnyxSelectInput/OnyxSelectInput.vue";
 import type { OnyxSelectInputProps } from "../OnyxSelectInput/types";
 import OnyxSelectOption from "../OnyxSelectOption/OnyxSelectOption.vue";
 import type { OnyxSelectProps, SelectOption } from "./types";
-import { FORM_INJECTED_SYMBOL } from "../OnyxForm/OnyxForm";
+import { FORM_INJECTED_SYMBOL } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxSelectProps<TValue>>(), {
   loading: false,
diff --git a/packages/sit-onyx/src/components/OnyxSelect/types.ts b/packages/sit-onyx/src/components/OnyxSelect/types.ts
index 8499f5e5a8..75c607f1ec 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/types.ts
+++ b/packages/sit-onyx/src/components/OnyxSelect/types.ts
@@ -1,7 +1,7 @@
 import type { DensityProp } from "../../composables/density";
 import type { ManagedProp } from "../../composables/useManagedState";
 import type { AutofocusProp, BaseSelectOption, SelectOptionValue } from "../../types";
-import type { FormInjected } from "../OnyxForm/OnyxForm";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 import type { OnyxSelectInputProps } from "../OnyxSelectInput/types";
 import type { OnyxSelectOptionProps } from "../OnyxSelectOption/types";
 
diff --git a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
index bc807431c3..57d82ff37b 100644
--- a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
+++ b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
@@ -10,7 +10,7 @@ import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxStepperProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxStepperProps>(), {
   step: 1,
@@ -88,7 +88,7 @@ const decrementLabel = computed(() => t.value("stepper.decrement", { stepSize: p
           v-model.number="value"
           v-custom-validity
           class="onyx-stepper__native"
-          :class="{ 'onyx-stepper__native--force-invalid': errorMessages && wasTouched }"
+          :class="{ 'onyx-form-element--force-invalid': errorMessages && wasTouched }"
           type="number"
           :aria-label="props.label"
           :autofocus="props.autofocus"
diff --git a/packages/sit-onyx/src/components/OnyxStepper/types.ts b/packages/sit-onyx/src/components/OnyxStepper/types.ts
index 6116ec900c..55bb12fe2b 100644
--- a/packages/sit-onyx/src/components/OnyxStepper/types.ts
+++ b/packages/sit-onyx/src/components/OnyxStepper/types.ts
@@ -1,7 +1,7 @@
 import type { DensityProp } from "../../composables/density";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp } from "../../types";
-import type { FormInjected } from "../OnyxForm/OnyxForm";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 import type { Autocomplete } from "../OnyxInput/types";
 
diff --git a/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue b/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue
index dc6774bd42..4605e52d73 100644
--- a/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue
+++ b/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue
@@ -10,7 +10,7 @@ import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxSwitchProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxSwitchProps>(), {
   modelValue: false,
diff --git a/packages/sit-onyx/src/components/OnyxSwitch/types.ts b/packages/sit-onyx/src/components/OnyxSwitch/types.ts
index b7d0d53980..6b9823d0d7 100644
--- a/packages/sit-onyx/src/components/OnyxSwitch/types.ts
+++ b/packages/sit-onyx/src/components/OnyxSwitch/types.ts
@@ -2,7 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp, TruncationType } from "../../types";
-import type { FormInjected } from "../OnyxForm/OnyxForm";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 
 export type OnyxSwitchProps = DensityProp &
   RequiredMarkerProp &
diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
index 4dec6140ab..babea04fa0 100644
--- a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
+++ b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
@@ -5,7 +5,7 @@ import { useCustomValidity } from "../../composables/useCustomValidity";
 import OnyxFormElement from "../OnyxFormElement/OnyxFormElement.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxTextareaProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxTextareaProps>(), {
   modelValue: "",

From 0606262c8b8fcac8b44b117cf12fc925960c5ecb Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Mon, 30 Sep 2024 18:30:41 +0200
Subject: [PATCH 03/24] add test

---
 .../src/components/OnyxForm/OnyxForm.core.ts  | 17 ++--
 .../src/components/OnyxForm/OnyxForm.ct.tsx   | 81 +++++++++++++++++++
 .../src/components/OnyxInput/OnyxInput.vue    |  6 +-
 .../src/components/OnyxInput/types.ts         |  2 +-
 .../src/components/OnyxSelect/OnyxSelect.vue  |  2 +-
 .../src/components/OnyxSelect/types.ts        |  2 +-
 .../OnyxSelectInput/OnyxSelectInput.vue       | 11 ++-
 .../src/components/OnyxSelectInput/types.ts   |  3 +-
 .../components/OnyxStepper/OnyxStepper.vue    |  6 +-
 .../src/components/OnyxStepper/types.ts       |  2 +-
 .../components/OnyxTextarea/OnyxTextarea.vue  |  6 +-
 11 files changed, 111 insertions(+), 27 deletions(-)
 create mode 100644 packages/sit-onyx/src/components/OnyxForm/OnyxForm.ct.tsx

diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.ts b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.ts
index 8879dbfee2..afb2b1b54f 100644
--- a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.ts
+++ b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.ts
@@ -8,7 +8,6 @@ const FORM_INJECTION_KEY = Symbol() as InjectionKey<ReturnType<typeof createForm
  */
 export type FormInjectedProps = {
   disabled: boolean;
-  readonly: boolean;
 };
 
 /**
@@ -69,14 +68,12 @@ const createFormInjectionContext =
     get disabled() {
       return createCompute(formProps, props, "disabled", false);
     },
-    get readonly() {
-      return createCompute(formProps, props, "readonly", false);
-    },
   });
 
 export const provideFormContext = (formProps: Reactive<FormInjectedProps> | undefined) =>
   provide(FORM_INJECTION_KEY, createFormInjectionContext(formProps));
 
+const DEFAULT_FORM_INJECTION_CONTEXT = createFormInjectionContext();
 /**
  * Provides the injected form properties (if available).
  * Otherwise a defined default is used.
@@ -95,8 +92,10 @@ export const provideFormContext = (formProps: Reactive<FormInjectedProps> | unde
  * const { disabled, readonly } = useFormContext(props);
  * ```
  */
-export const useFormContext = inject(
-  FORM_INJECTION_KEY,
-  /** Default */
-  createFormInjectionContext(),
-);
+export const useFormContext = (props: Reactive<LocalProps>) => {
+  return inject(
+    FORM_INJECTION_KEY,
+    /** Default */
+    DEFAULT_FORM_INJECTION_CONTEXT,
+  )(props);
+};
diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.ct.tsx b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.ct.tsx
new file mode 100644
index 0000000000..df0b158993
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.ct.tsx
@@ -0,0 +1,81 @@
+import type { Locator } from "@playwright/test";
+import { h, type Component } from "vue";
+import type { ComponentProps } from "vue-component-type-helpers";
+import { expect, test } from "../../playwright/a11y";
+import OnyxButton from "../OnyxButton/OnyxButton.vue";
+import OnyxCheckbox from "../OnyxCheckbox/OnyxCheckbox.vue";
+import OnyxCheckboxGroup from "../OnyxCheckboxGroup/OnyxCheckboxGroup.vue";
+import OnyxInput from "../OnyxInput/OnyxInput.vue";
+import OnyxRadioGroup from "../OnyxRadioGroup/OnyxRadioGroup.vue";
+import OnyxSelect from "../OnyxSelect/OnyxSelect.vue";
+import type { SelectOption } from "../OnyxSelect/types";
+import OnyxStepper from "../OnyxStepper/OnyxStepper.vue";
+import OnyxSwitch from "../OnyxSwitch/OnyxSwitch.vue";
+import OnyxTextarea from "../OnyxTextarea/OnyxTextarea.vue";
+import OnyxForm from "./OnyxForm.vue";
+
+const inferProps = <TComp extends Component, TProps extends ComponentProps<TComp>>(
+  component: TComp,
+  props: TProps,
+  delegate?: Locator,
+) => ({ component, props, delegate });
+
+test("OnyxForm should inject disabled state", async ({ mount, page }) => {
+  const options: SelectOption[] = [
+    {
+      label: "option 1",
+      value: "option 1",
+    },
+  ];
+  const allFormElements = [
+    inferProps(OnyxInput, { label: "OnyxInput" }),
+    inferProps(OnyxSelect, { label: "OnyxSelect", listLabel: "Select options", options }),
+    inferProps(OnyxStepper, { label: "OnyxStepper" }),
+    inferProps(OnyxTextarea, { label: "OnyxTextarea" }),
+    inferProps(
+      OnyxRadioGroup,
+      { label: "OnyxRadioGroup", options },
+      page.getByLabel("OnyxRadioGroup").getByText("option 1"),
+    ),
+    inferProps(
+      OnyxCheckboxGroup,
+      { label: "OnyxCheckboxGroup", options },
+      page.getByLabel("OnyxCheckboxGroup").getByText("option 1"),
+    ),
+    inferProps(OnyxCheckbox, { label: "OnyxCheckbox", value: "" }),
+    inferProps(OnyxSwitch, { label: "OnyxSwitch" }),
+    inferProps(OnyxButton, { label: "OnyxButton" }, page.getByText("OnyxButton", { exact: true })),
+  ];
+
+  const expectForAll = async (expectation: (locator: Locator) => Promise<unknown>) => {
+    for (const { props, delegate } of allFormElements) {
+      const getInputByLabel = page.getByLabel(props.label, { exact: true });
+      // eslint-disable-next-line playwright/no-conditional-in-test
+      const element = delegate || getInputByLabel;
+      expect(element).toBeDefined();
+      await expectation(element);
+    }
+  };
+
+  // ARRANGE
+  await mount(
+    <OnyxForm>
+      {allFormElements.map(({ component, props }) => h(component as Component, props))}
+    </OnyxForm>,
+  );
+
+  // ASSERT
+  await expectForAll((element) =>
+    Promise.all([expect(element).toBeEnabled(), expect(element).toBeEditable()]),
+  );
+
+  // ARRANGE
+  await mount(
+    <OnyxForm disabled>
+      {allFormElements.map(({ component, props }) => h(component as Component, props))}
+    </OnyxForm>,
+  );
+
+  // ASSERT
+  await expectForAll((element) => expect(element).toBeDisabled());
+});
diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
index 2263505bfe..d1fd08b02e 100644
--- a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
+++ b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
@@ -13,7 +13,7 @@ const props = withDefaults(defineProps<OnyxInputProps>(), {
   type: "text",
   required: false,
   autocapitalize: "sentences",
-  readonly: FORM_INJECTED_SYMBOL,
+  readonly: false,
   disabled: FORM_INJECTED_SYMBOL,
   loading: false,
   skeleton: false,
@@ -47,7 +47,7 @@ const patternSource = computed(() => {
   return props.pattern;
 });
 
-const { readonly, disabled } = useFormContext(props);
+const { disabled } = useFormContext(props);
 </script>
 
 <template>
@@ -74,7 +74,7 @@ const { readonly, disabled } = useFormContext(props);
             :autofocus="props.autofocus"
             :name="props.name"
             :pattern="patternSource"
-            :readonly="readonly"
+            :readonly="props.readonly"
             :disabled="disabled || props.loading"
             :minlength="props.minlength"
             :maxlength="props.maxlength"
diff --git a/packages/sit-onyx/src/components/OnyxInput/types.ts b/packages/sit-onyx/src/components/OnyxInput/types.ts
index 9a680c1a4a..4baec8e045 100644
--- a/packages/sit-onyx/src/components/OnyxInput/types.ts
+++ b/packages/sit-onyx/src/components/OnyxInput/types.ts
@@ -51,7 +51,7 @@ export type OnyxInputProps = DensityProp &
     /**
      * Whether the input should be readonly.
      */
-    readonly?: FormInjected<boolean>;
+    readonly?: boolean;
     /**
      * Whether the input should be disabled.
      */
diff --git a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
index 95499006e5..2fca464e33 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
+++ b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<OnyxSelectProps<TValue>>(), {
   searchTerm: MANAGED_SYMBOL,
   open: MANAGED_SYMBOL,
   disabled: FORM_INJECTED_SYMBOL,
-  readonly: FORM_INJECTED_SYMBOL,
+  readonly: false,
   truncation: "ellipsis",
   valueLabel: undefined,
   alignment: "full",
diff --git a/packages/sit-onyx/src/components/OnyxSelect/types.ts b/packages/sit-onyx/src/components/OnyxSelect/types.ts
index 75c607f1ec..8e43617d16 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/types.ts
+++ b/packages/sit-onyx/src/components/OnyxSelect/types.ts
@@ -81,7 +81,7 @@ export type OnyxSelectProps<TValue extends SelectOptionValue = SelectOptionValue
     /**
      * Whether the select should be readonly.
      */
-    readonly?: FormInjected<boolean>;
+    readonly?: boolean;
     /**
      * Label that will be shown in the input of OnyxSelect.
      * If unset, will be managed internally by comparing `modelValue` with `options`.
diff --git a/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue b/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
index 18aca58790..3cc62231d8 100644
--- a/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
+++ b/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
@@ -14,15 +14,17 @@ import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.v
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import OnyxTooltip from "../OnyxTooltip/OnyxTooltip.vue";
 import type { OnyxSelectInputProps } from "./types";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 defineOptions({ inheritAttrs: false });
 const { rootAttrs, restAttrs } = useRootAttrs();
 
 const props = withDefaults(defineProps<OnyxSelectInputProps>(), {
   hideLabel: false,
+  disabled: FORM_INJECTED_SYMBOL,
+  readonly: false,
   loading: false,
   skeleton: false,
-  readonly: false,
 });
 
 const emit = defineEmits<{
@@ -39,6 +41,7 @@ const emit = defineEmits<{
 const { t } = injectI18n();
 
 const { vCustomValidity, errorMessages } = useCustomValidity({ props, emit });
+const { disabled } = useFormContext(props);
 
 /**
  * Number of selected options.
@@ -127,7 +130,7 @@ const blockTyping = (event: KeyboardEvent) => {
         <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -- Disabled rules are needed here, because of the click event. Otherwise clicking on the padding or gap won't open the select -->
         <div
           class="onyx-select-input__wrapper"
-          @click="!props.disabled && !props.loading && emit('inputClick')"
+          @click="!disabled && !props.loading && emit('inputClick')"
         >
           <OnyxLoadingIndicator
             v-if="props.loading"
@@ -150,7 +153,7 @@ const blockTyping = (event: KeyboardEvent) => {
             :readonly="props.readonly"
             :placeholder="props.placeholder"
             :required="props.required"
-            :disabled="props.disabled || props.loading"
+            :disabled="disabled || props.loading"
             :aria-label="props.hideLabel ? props.label : undefined"
             :title="props.hideLabel ? props.label : undefined"
             :value="selectionText"
@@ -179,7 +182,7 @@ const blockTyping = (event: KeyboardEvent) => {
             type="button"
             :aria-label="t('select.toggleDropDown')"
             tabindex="-1"
-            :disabled="props.readonly || props.disabled || props.loading"
+            :disabled="disabled || props.loading"
           >
             <OnyxIcon :icon="chevronDownUp" />
           </button>
diff --git a/packages/sit-onyx/src/components/OnyxSelectInput/types.ts b/packages/sit-onyx/src/components/OnyxSelectInput/types.ts
index a8bb18dc17..d33469ecea 100644
--- a/packages/sit-onyx/src/components/OnyxSelectInput/types.ts
+++ b/packages/sit-onyx/src/components/OnyxSelectInput/types.ts
@@ -2,6 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp } from "../../types";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 
 export const MULTISELECT_TEXT_MODE = ["summary", "preview"] as const;
@@ -26,7 +27,7 @@ export type OnyxSelectInputProps = DensityProp &
     /**
      * Whether the select should be disabled.
      */
-    disabled?: boolean;
+    disabled?: FormInjected<boolean>;
     /**
      * Whether to show a skeleton select.
      */
diff --git a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
index 57d82ff37b..4bc59fa2d1 100644
--- a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
+++ b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
@@ -16,7 +16,7 @@ const props = withDefaults(defineProps<OnyxStepperProps>(), {
   step: 1,
   stripStep: false,
   disabled: FORM_INJECTED_SYMBOL,
-  readonly: FORM_INJECTED_SYMBOL,
+  readonly: false,
   loading: false,
   skeleton: false,
 });
@@ -33,7 +33,7 @@ const emit = defineEmits<{
   validityChange: [validity: ValidityState];
 }>();
 
-const { readonly, disabled } = useFormContext(props);
+const { disabled } = useFormContext(props);
 const { densityClass } = useDensity(props);
 const { vCustomValidity, errorMessages } = useCustomValidity({ props, emit });
 
@@ -97,7 +97,7 @@ const decrementLabel = computed(() => t.value("stepper.decrement", { stepSize: p
           :max="props.max"
           :name="props.name"
           :placeholder="props.placeholder"
-          :readonly="readonly"
+          :readonly="props.readonly"
           :required="props.required"
           :step="props.step"
           :title="props.hideLabel ? props.label : undefined"
diff --git a/packages/sit-onyx/src/components/OnyxStepper/types.ts b/packages/sit-onyx/src/components/OnyxStepper/types.ts
index 55bb12fe2b..04fe96c6b2 100644
--- a/packages/sit-onyx/src/components/OnyxStepper/types.ts
+++ b/packages/sit-onyx/src/components/OnyxStepper/types.ts
@@ -49,7 +49,7 @@ export type OnyxStepperProps = DensityProp &
     /**
      * Whether the input should be readonly.
      */
-    readonly?: FormInjected<boolean>;
+    readonly?: boolean;
     /**
      * Whether the input is loading. User interaction will be disabled.
      */
diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
index babea04fa0..737f43314a 100644
--- a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
+++ b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<OnyxTextareaProps>(), {
   modelValue: "",
   required: false,
   autocapitalize: "sentences",
-  readonly: FORM_INJECTED_SYMBOL,
+  readonly: false,
   disabled: FORM_INJECTED_SYMBOL,
   skeleton: false,
   disableManualResize: false,
@@ -59,7 +59,7 @@ const handleInput = (event: Event) => {
   target.parentElement?.setAttribute("data-autosize-value", target.value);
 };
 
-const { disabled, readonly } = useFormContext(props);
+const { disabled } = useFormContext(props);
 </script>
 
 <template>
@@ -91,7 +91,7 @@ const { disabled, readonly } = useFormContext(props);
             :autocapitalize="props.autocapitalize"
             :autofocus="props.autofocus"
             :name="props.name"
-            :readonly="readonly"
+            :readonly="props.readonly"
             :disabled="disabled"
             :minlength="props.minlength"
             :maxlength="props.maxlength"

From a3525906ff575a694b2a41d2a005b4acb9e368cc Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Mon, 30 Sep 2024 18:37:28 +0200
Subject: [PATCH 04/24] fix mistakes

---
 packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue | 2 +-
 packages/sit-onyx/src/types/components.ts                    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
index 4bc59fa2d1..8d982f6bd0 100644
--- a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
+++ b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
@@ -88,7 +88,7 @@ const decrementLabel = computed(() => t.value("stepper.decrement", { stepSize: p
           v-model.number="value"
           v-custom-validity
           class="onyx-stepper__native"
-          :class="{ 'onyx-form-element--force-invalid': errorMessages && wasTouched }"
+          :class="{ 'onyx-stepper__native--force-invalid': errorMessages && wasTouched }"
           type="number"
           :aria-label="props.label"
           :autofocus="props.autofocus"
diff --git a/packages/sit-onyx/src/types/components.ts b/packages/sit-onyx/src/types/components.ts
index 25378505bc..83bbbaeea4 100644
--- a/packages/sit-onyx/src/types/components.ts
+++ b/packages/sit-onyx/src/types/components.ts
@@ -1,4 +1,4 @@
-import type { FormInjected } from "../components/OnyxForm/OnyxForm";
+import type { FormInjected } from "../components/OnyxForm/OnyxForm.core";
 import type { DensityProp } from "../composables/density";
 import type { TruncationType } from "./fonts";
 
@@ -35,7 +35,7 @@ export type BaseSelectOption<TValue extends SelectOptionValue = SelectOptionValu
   /**
    * Shows a loading indicator.
    */
-  loading?: FormInjected<boolean>;
+  loading?: boolean;
   /**
    * Whether to show a skeleton.
    */

From ab81ab3078921b8dd4e81ef14c4b09ffa8bc8182 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Mon, 30 Sep 2024 18:50:28 +0200
Subject: [PATCH 05/24] add storybook support

---
 packages/sit-onyx/.storybook/formInjected.ts | 49 ++++++++++++++++++++
 packages/sit-onyx/.storybook/preview.ts      |  3 +-
 2 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 packages/sit-onyx/.storybook/formInjected.ts

diff --git a/packages/sit-onyx/.storybook/formInjected.ts b/packages/sit-onyx/.storybook/formInjected.ts
new file mode 100644
index 0000000000..442884c929
--- /dev/null
+++ b/packages/sit-onyx/.storybook/formInjected.ts
@@ -0,0 +1,49 @@
+import { walkTree } from "@sit-onyx/storybook-utils";
+import type {
+  ArgTypesEnhancer,
+  InputType,
+  SBType,
+  StrictInputType,
+} from "storybook/internal/types";
+
+const SB_TYPE_CONTROL_MAP: Partial<Record<SBType["name"], InputType["control"]>> = {
+  boolean: { type: "boolean" },
+  string: { type: "text" },
+  number: { type: "number" },
+};
+
+const getFormInjectedParent = (inputType?: StrictInputType) => {
+  if (!inputType?.type || inputType.table?.defaultValue?.summary !== "FORM_INJECTED_SYMBOL") {
+    return undefined;
+  }
+
+  return walkTree(inputType.type, (elem, parent) =>
+    elem.name === "symbol" || (elem.name === "other" && elem.value === "unique symbol")
+      ? parent
+      : undefined,
+  );
+};
+
+export const enhanceFormInjectedSymbol: ArgTypesEnhancer = (context) => {
+  Object.values(context.argTypes)
+    .map((argType) => {
+      const parent = getFormInjectedParent(argType);
+      return { argType, parent };
+    })
+    .filter(({ parent }) => parent)
+    .forEach(({ argType, parent }) => {
+      const firstAvailableControl = walkTree(
+        parent || argType.type!,
+        (sb) => SB_TYPE_CONTROL_MAP[sb.name],
+      );
+
+      if (firstAvailableControl && argType.table?.defaultValue) {
+        argType.control = firstAvailableControl;
+        argType.table.defaultValue.detail =
+          "If no value (or `undefined`) is provided, `FORM_INJECTED_SYMBOL` is the internal default value for this prop.\n" +
+          "In that case the props value will be derived from it's parent form (if it exists).\n";
+      }
+    });
+
+  return context.argTypes;
+};
diff --git a/packages/sit-onyx/.storybook/preview.ts b/packages/sit-onyx/.storybook/preview.ts
index d59e01c4e3..8cbdb2956e 100644
--- a/packages/sit-onyx/.storybook/preview.ts
+++ b/packages/sit-onyx/.storybook/preview.ts
@@ -9,11 +9,12 @@ import "@fontsource-variable/source-sans-3";
 import "@sit-onyx/storybook-utils/style.css";
 import "../src/styles/index.scss";
 import "./docs-template.scss";
+import { enhanceFormInjectedSymbol } from "./formInjected";
 import { enhanceManagedSymbol } from "./managed";
 import { withOnyxVModelDecorator } from "./vModel";
 
 const basePreview = createPreview({
-  argTypesEnhancers: [enhanceManagedSymbol],
+  argTypesEnhancers: [enhanceManagedSymbol, enhanceFormInjectedSymbol],
   parameters: {
     docs: {
       page: docsTemplate,

From 1587a7bda0da8e9f20120183cdddd6dee5039c77 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Mon, 30 Sep 2024 18:54:35 +0200
Subject: [PATCH 06/24] update description

---
 packages/sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts
index 3898b1c22c..1ecdb610a6 100644
--- a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts
+++ b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts
@@ -7,8 +7,8 @@ import OnyxStepper from "../OnyxStepper/OnyxStepper.vue";
 import OnyxForm from "./OnyxForm.vue";
 
 /**
- * This component can be used in to wrap form components like OnyxInput/OnyxTextarea/OnyxWrapper.
- * Currently it handles injection of `required` and `disabled` states for sub-elements.
+ * This component can be used in to wrap form components like OnyxInput/OnyxTextarea/OnyxStepper.
+ * Currently it can be used to set all form elements to disabled.
  */
 const meta: Meta<typeof OnyxForm> = {
   title: "Form/Form",

From 3b26684481b477c4c0dc21d7f5ea14230385dd0f Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Mon, 30 Sep 2024 19:56:22 +0200
Subject: [PATCH 07/24] add unit test for form injection

---
 .../components/OnyxForm/OnyxForm.core.spec.ts | 97 +++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.spec.ts

diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.spec.ts b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.spec.ts
new file mode 100644
index 0000000000..5d8a341a84
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.spec.ts
@@ -0,0 +1,97 @@
+import { expect, it, vi } from "vitest";
+import { reactive, toValue } from "vue";
+import {
+  FORM_INJECTED_SYMBOL,
+  provideFormContext,
+  useFormContext,
+  type FORM_INJECTED,
+  type FormInjected,
+  type FormInjectedProps,
+} from "./OnyxForm.core";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let injected: any;
+
+vi.mock("vue", async (importOriginal) => {
+  const mod = await importOriginal<typeof import("vue")>();
+  return {
+    ...mod,
+    inject: () => injected,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    provide: (_: any, ctx: any) => (injected = ctx),
+  };
+});
+
+it.for([
+  {
+    formProps: { disabled: true },
+    localProps: { disabled: true },
+    expected: { disabled: true },
+  },
+  {
+    formProps: { disabled: false },
+    localProps: { disabled: true },
+    expected: { disabled: true },
+  },
+  {
+    formProps: { disabled: true },
+    localProps: { disabled: false },
+    expected: { disabled: false },
+  },
+  {
+    formProps: { disabled: false },
+    localProps: { disabled: false },
+    expected: { disabled: false },
+  },
+  {
+    formProps: { disabled: true },
+    localProps: { disabled: FORM_INJECTED_SYMBOL as FORM_INJECTED },
+    expected: { disabled: true },
+  },
+  {
+    formProps: { disabled: false },
+    localProps: { disabled: FORM_INJECTED_SYMBOL as FORM_INJECTED },
+    expected: { disabled: false },
+  },
+  {
+    formProps: undefined,
+    localProps: { disabled: FORM_INJECTED_SYMBOL as FORM_INJECTED },
+    expected: { disabled: false },
+  },
+  {
+    formProps: undefined,
+    localProps: { disabled: true },
+    expected: { disabled: true },
+  },
+  {
+    formProps: undefined,
+    localProps: { disabled: false },
+    expected: { disabled: false },
+  },
+])("it should derive expected state when correctly", ({ formProps, localProps, expected }) => {
+  provideFormContext(formProps);
+  const result = useFormContext(localProps);
+  Object.entries(expected).forEach(([key, value]) => {
+    const resultValue = toValue(result[key as keyof FormInjectedProps]);
+
+    expect(
+      resultValue,
+      `Expected "${value}", got "${resultValue}" for formProps "${formProps}" and localProps "${localProps}"`,
+    ).toBe(value);
+  });
+});
+
+it("should update when changed", async () => {
+  const formProps = reactive({ disabled: false });
+  provideFormContext(formProps);
+
+  const localProps = reactive({ disabled: FORM_INJECTED_SYMBOL as FormInjected<boolean> });
+  const { disabled } = useFormContext(localProps);
+  expect(disabled.value).toBe(false);
+
+  formProps.disabled = true;
+  localProps.disabled = true;
+  expect(disabled.value).toBe(true);
+  localProps.disabled = false;
+  expect(disabled.value).toBe(false);
+});

From 6e3bfeeacca0bb8ad07ee27ba36ce8eaa00d326f Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Tue, 1 Oct 2024 10:10:07 +0200
Subject: [PATCH 08/24] remove any's

---
 .../sit-onyx/src/components/OnyxForm/OnyxForm.core.spec.ts  | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.spec.ts b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.spec.ts
index 5d8a341a84..83a569a6c7 100644
--- a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.spec.ts
+++ b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.spec.ts
@@ -9,16 +9,14 @@ import {
   type FormInjectedProps,
 } from "./OnyxForm.core";
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let injected: any;
+let injected: (args: unknown[]) => void;
 
 vi.mock("vue", async (importOriginal) => {
   const mod = await importOriginal<typeof import("vue")>();
   return {
     ...mod,
     inject: () => injected,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    provide: (_: any, ctx: any) => (injected = ctx),
+    provide: (_: symbol, ctx: (...args: unknown[]) => void) => (injected = ctx),
   };
 });
 

From 7473f691d3124e0f887c7ad05c0d9483f48a27dd Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Mon, 30 Sep 2024 14:38:01 +0200
Subject: [PATCH 09/24] implement onyxform with form-context

---
 .../src/components/OnyxButton/OnyxButton.vue  |   6 +-
 .../src/components/OnyxButton/types.ts        |   3 +-
 .../components/OnyxCheckbox/OnyxCheckbox.vue  |   8 +-
 .../OnyxCheckboxGroup/OnyxCheckboxGroup.vue   |   7 +-
 .../src/components/OnyxCheckboxGroup/types.ts |   3 +-
 .../components/OnyxForm/OnyxForm.stories.ts   |  46 ++++++++
 .../src/components/OnyxForm/OnyxForm.ts       | 102 ++++++++++++++++++
 .../src/components/OnyxForm/OnyxForm.vue      |  28 +++++
 .../sit-onyx/src/components/OnyxForm/types.ts |   4 +
 .../OnyxIconButton/OnyxIconButton.vue         |   6 +-
 .../src/components/OnyxIconButton/types.ts    |   3 +-
 .../src/components/OnyxInput/OnyxInput.vue    |  11 +-
 .../src/components/OnyxInput/types.ts         |   5 +-
 .../OnyxRadioButton/OnyxRadioButton.vue       |   8 +-
 .../OnyxRadioGroup/OnyxRadioGroup.vue         |   6 +-
 .../src/components/OnyxRadioGroup/types.ts    |   3 +-
 .../src/components/OnyxSelect/OnyxSelect.vue  |   3 +
 .../src/components/OnyxSelect/types.ts        |  11 +-
 .../components/OnyxStepper/OnyxStepper.vue    |  18 ++--
 .../src/components/OnyxStepper/types.ts       |   5 +-
 .../src/components/OnyxSwitch/OnyxSwitch.vue  |   9 +-
 .../src/components/OnyxSwitch/types.ts        |   3 +-
 .../components/OnyxTextarea/OnyxTextarea.vue  |  11 +-
 packages/sit-onyx/src/types/components.ts     |   5 +-
 24 files changed, 267 insertions(+), 47 deletions(-)
 create mode 100644 packages/sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts
 create mode 100644 packages/sit-onyx/src/components/OnyxForm/OnyxForm.ts
 create mode 100644 packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue
 create mode 100644 packages/sit-onyx/src/components/OnyxForm/types.ts

diff --git a/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue b/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue
index 7c1f46b591..c66a1e0156 100644
--- a/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue
+++ b/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue
@@ -6,9 +6,10 @@ import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.v
 import OnyxRipple from "../OnyxRipple/OnyxRipple.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxButtonProps } from "./types";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
 
 const props = withDefaults(defineProps<OnyxButtonProps>(), {
-  disabled: false,
+  disabled: FORM_INJECTED_SYMBOL,
   loading: false,
   type: "button",
   color: "primary",
@@ -17,6 +18,7 @@ const props = withDefaults(defineProps<OnyxButtonProps>(), {
 });
 
 const { densityClass } = useDensity(props);
+const { disabled } = useFormContext(props);
 
 const rippleRef = ref<ComponentInstance<typeof OnyxRipple>>();
 const rippleEvents = computed(() => rippleRef.value?.events ?? {});
@@ -33,7 +35,7 @@ const rippleEvents = computed(() => rippleRef.value?.events ?? {});
       { 'onyx-button--loading': props.loading },
       densityClass,
     ]"
-    :disabled="props.disabled || props.loading"
+    :disabled="disabled || props.loading"
     :type="props.type"
     :aria-label="props.loading ? props.label : undefined"
     :autofocus="props.autofocus"
diff --git a/packages/sit-onyx/src/components/OnyxButton/types.ts b/packages/sit-onyx/src/components/OnyxButton/types.ts
index b88066472b..f19a72913d 100644
--- a/packages/sit-onyx/src/components/OnyxButton/types.ts
+++ b/packages/sit-onyx/src/components/OnyxButton/types.ts
@@ -1,5 +1,6 @@
 import type { DensityProp } from "../../composables/density";
 import type { AutofocusProp } from "../../types";
+import type { FormInjected } from "../OnyxForm/OnyxForm";
 
 export type OnyxButtonProps = DensityProp &
   AutofocusProp & {
@@ -10,7 +11,7 @@ export type OnyxButtonProps = DensityProp &
     /**
      * If the button should be disabled or not.
      */
-    disabled?: boolean;
+    disabled?: FormInjected<boolean>;
     /**
      * Shows a loading indicator.
      */
diff --git a/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue b/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue
index 009bc088df..ceb934cd20 100644
--- a/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue
+++ b/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue
@@ -8,11 +8,12 @@ import OnyxErrorTooltip from "../OnyxErrorTooltip/OnyxErrorTooltip.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxCheckboxProps } from "./types";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
 
 const props = withDefaults(defineProps<OnyxCheckboxProps<TValue>>(), {
   modelValue: false,
   indeterminate: false,
-  disabled: false,
+  disabled: FORM_INJECTED_SYMBOL,
   loading: false,
   required: false,
   skeleton: false,
@@ -37,6 +38,7 @@ const { requiredMarkerClass, requiredTypeClass } = useRequired(props);
 const { densityClass } = useDensity(props);
 
 const { vCustomValidity, errorMessages } = useCustomValidity({ props, emit });
+const { disabled } = useFormContext(props);
 
 const title = computed(() => {
   return props.hideLabel ? props.label : undefined;
@@ -49,7 +51,7 @@ const title = computed(() => {
     <OnyxSkeleton v-if="!props.hideLabel" class="onyx-checkbox-skeleton__label" />
   </div>
 
-  <OnyxErrorTooltip v-else :disabled="props.disabled" :error-messages="errorMessages">
+  <OnyxErrorTooltip v-else :disabled="disabled" :error-messages="errorMessages">
     <label class="onyx-checkbox" :class="[requiredTypeClass, densityClass]" :title="title">
       <div class="onyx-checkbox__container">
         <OnyxLoadingIndicator v-if="props.loading" class="onyx-checkbox__loading" type="circle" />
@@ -61,7 +63,7 @@ const title = computed(() => {
           class="onyx-checkbox__input"
           type="checkbox"
           :indeterminate="props.indeterminate"
-          :disabled="props.disabled"
+          :disabled="disabled"
           :required="props.required"
           :value="props.value"
           :autofocus="props.autofocus"
diff --git a/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue b/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue
index 6ff53ddfe5..1909f8bc7d 100644
--- a/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue
+++ b/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue
@@ -7,12 +7,13 @@ import type { SelectOptionValue } from "../../types";
 import OnyxCheckbox from "../OnyxCheckbox/OnyxCheckbox.vue";
 import OnyxHeadline from "../OnyxHeadline/OnyxHeadline.vue";
 import type { OnyxCheckboxGroupProps } from "./types";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
 
 const props = withDefaults(defineProps<OnyxCheckboxGroupProps<TValue>>(), {
   modelValue: () => [],
   direction: "vertical",
   withCheckAll: false,
-  disabled: false,
+  disabled: FORM_INJECTED_SYMBOL,
   truncation: "ellipsis",
 });
 
@@ -38,6 +39,8 @@ const enabledOptionValues = computed(() =>
   props.options.filter((i) => !i.disabled && !i.skeleton).map(({ value }) => value),
 );
 
+const { disabled } = useFormContext(props);
+
 const checkAll = useCheckAll(
   enabledOptionValues,
   computed(() => props.modelValue),
@@ -54,7 +57,7 @@ const checkAllLabel = computed(() => {
 <template>
   <fieldset
     :class="['onyx-checkbox-group', densityClass]"
-    :disabled="props.disabled"
+    :disabled="disabled"
     :aria-label="props.label"
   >
     <legend v-if="!props.hideLabel" class="onyx-checkbox-group__label">
diff --git a/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts b/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts
index cc60e5592e..39da118a31 100644
--- a/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts
+++ b/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts
@@ -2,6 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp, BaseSelectOption, Direction, SelectOptionValue } from "../../types";
+import type { FormInjected } from "../OnyxForm/OnyxForm";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 
 export type OnyxCheckboxGroupProps<TValue extends SelectOptionValue = SelectOptionValue> =
@@ -36,7 +37,7 @@ export type OnyxCheckboxGroupProps<TValue extends SelectOptionValue = SelectOpti
       /**
        * Whether all checkboxes should be disabled.
        */
-      disabled?: boolean;
+      disabled?: FormInjected<boolean>;
       /**
        * If set, the specified number of skeleton radio buttons will be shown.
        */
diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts
new file mode 100644
index 0000000000..3898b1c22c
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts
@@ -0,0 +1,46 @@
+import { withNativeEventLogging } from "@sit-onyx/storybook-utils";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { h } from "vue";
+import { OnyxInput } from "../..";
+import OnyxButton from "../OnyxButton/OnyxButton.vue";
+import OnyxStepper from "../OnyxStepper/OnyxStepper.vue";
+import OnyxForm from "./OnyxForm.vue";
+
+/**
+ * This component can be used in to wrap form components like OnyxInput/OnyxTextarea/OnyxWrapper.
+ * Currently it handles injection of `required` and `disabled` states for sub-elements.
+ */
+const meta: Meta<typeof OnyxForm> = {
+  title: "Form/Form",
+  component: OnyxForm,
+};
+
+export default meta;
+type Story = StoryObj<typeof OnyxForm>;
+
+/**
+ * This example shows a default form element.
+ */
+export const Default = {
+  args: {
+    style: { maxWidth: "10rem", display: "flex", flexDirection: "column", gap: "1rem" },
+    default: () => [
+      h(OnyxInput, { label: "Favorite band", modelValue: "Queen" }),
+      h(OnyxInput, { label: "Favorite password", type: "password", modelValue: "incorrect" }),
+      h(OnyxStepper, { label: "Number of hairs", min: 0, modelValue: 23 }),
+      h(
+        "div",
+        {
+          style: { display: "flex", gap: "0.5rem" },
+        },
+        [
+          h(OnyxButton, { label: "Reset", type: "reset", mode: "outline" }),
+          h(OnyxButton, { label: "Submit", type: "submit", formmethod: "dialog" }), // we use formmethod `dialog` to avoid a page load on submit
+        ],
+      ),
+    ],
+  },
+  argTypes: {
+    ...withNativeEventLogging(["onSubmit", "onReset"]),
+  },
+} satisfies Story;
diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.ts b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.ts
new file mode 100644
index 0000000000..8879dbfee2
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.ts
@@ -0,0 +1,102 @@
+import { computed, inject, provide, type InjectionKey, type Reactive, type Ref } from "vue";
+
+const FORM_INJECTION_KEY = Symbol() as InjectionKey<ReturnType<typeof createFormInjectionContext>>;
+
+/**
+ * Props on the `OnyxForm` component.
+ * These are injected, so that they can be used in the form child components.
+ */
+export type FormInjectedProps = {
+  disabled: boolean;
+  readonly: boolean;
+};
+
+/**
+ * Props that may be used by the form child components.
+ */
+type LocalProps = {
+  [TKey in keyof FormInjectedProps]?: FormInjected<FormInjectedProps[TKey]>;
+};
+
+/**
+ * Symbol for the injected form injected properties.
+ */
+export const FORM_INJECTED_SYMBOL = Symbol("FORM_INJECTED_SYMBOL");
+export type FORM_INJECTED = typeof FORM_INJECTED_SYMBOL;
+/**
+ * Prop type used by form child elements, which indicates that the prop value is taken from the parent form by default.
+ * The props **MUST** use `FORM_INJECTED_SYMBOL` as default value.
+ * `useFormContext` is used to access the injected form properties.
+ *
+ * @example
+ * ```ts
+ * const props = withDefaults(defineProps<OnyxComponentProps>(), {
+ *   readonly: FORM_INJECTED_SYMBOL,
+ *   disabled: FORM_INJECTED_SYMBOL,
+ * });
+ *
+ * const { disabled, readonly } = useFormContext(props);
+ * ```
+ */
+export type FormInjected<T> = T | FORM_INJECTED;
+
+const createCompute = <
+  TKey extends keyof FormInjectedProps,
+  TValue extends FormInjectedProps[keyof FormInjectedProps],
+>(
+  formProps: FormInjectedProps | undefined,
+  props: LocalProps,
+  key: TKey,
+  defaultValue: TValue,
+): Readonly<Ref<FormInjectedProps[TKey]>> =>
+  computed(() => {
+    const prop = props[key] as FormInjected<FormInjectedProps[TKey]> | undefined;
+    if (prop != undefined && prop !== FORM_INJECTED_SYMBOL) {
+      return prop;
+    }
+    const formProp = formProps?.[key];
+    if (formProp !== undefined) {
+      return formProp;
+    }
+    return defaultValue;
+  });
+
+const createFormInjectionContext =
+  (formProps?: FormInjectedProps) =>
+  (
+    props: Reactive<LocalProps>,
+  ): { [TKey in keyof FormInjectedProps]: Ref<FormInjectedProps[TKey]> } => ({
+    get disabled() {
+      return createCompute(formProps, props, "disabled", false);
+    },
+    get readonly() {
+      return createCompute(formProps, props, "readonly", false);
+    },
+  });
+
+export const provideFormContext = (formProps: Reactive<FormInjectedProps> | undefined) =>
+  provide(FORM_INJECTION_KEY, createFormInjectionContext(formProps));
+
+/**
+ * Provides the injected form properties (if available).
+ * Otherwise a defined default is used.
+ * A prop defined on the child component will always take precedence over the injected form properties.
+ *
+ * The props **MUST** use `FORM_INJECTED_SYMBOL` as default value.
+ * The type `FormInjected<T>` can be used as PropType wrapper.
+ *
+ * @example
+ * ```ts
+ * const props = withDefaults(defineProps<OnyxComponentProps>(), {
+ *   readonly: FORM_INJECTED_SYMBOL, // By default, the forms injected value is used
+ *   disabled: FORM_INJECTED_SYMBOL, // By default, the forms injected value is used
+ * });
+ *
+ * const { disabled, readonly } = useFormContext(props);
+ * ```
+ */
+export const useFormContext = inject(
+  FORM_INJECTION_KEY,
+  /** Default */
+  createFormInjectionContext(),
+);
diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue
new file mode 100644
index 0000000000..33b8c4c7d0
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useDensity } from "../../composables/density";
+import { provideFormContext } from "./OnyxForm";
+import type { OnyxFormProps } from "./types";
+
+const props = defineProps<OnyxFormProps>();
+
+defineSlots<{
+  /**
+   * Any form content
+   */
+  default?(): unknown;
+}>();
+
+provideFormContext(props);
+
+const { densityClass } = useDensity(props);
+</script>
+<template>
+  <form
+    :class="{
+      'onyx-form': true,
+      ...densityClass,
+    }"
+  >
+    <slot></slot>
+  </form>
+</template>
diff --git a/packages/sit-onyx/src/components/OnyxForm/types.ts b/packages/sit-onyx/src/components/OnyxForm/types.ts
new file mode 100644
index 0000000000..e24f87a366
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxForm/types.ts
@@ -0,0 +1,4 @@
+import type { DensityProp } from "../../composables/density";
+import type { FormInjectedProps } from "./OnyxForm";
+
+export type OnyxFormProps = Partial<FormInjectedProps> & DensityProp;
diff --git a/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue b/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue
index 07a05950d6..b1ecf8a418 100644
--- a/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue
+++ b/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue
@@ -1,18 +1,20 @@
 <script lang="ts" setup>
 import { useDensity } from "../../composables/density";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
 import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxIconButtonProps } from "./types";
 
 const props = withDefaults(defineProps<OnyxIconButtonProps>(), {
-  disabled: false,
+  disabled: FORM_INJECTED_SYMBOL,
   type: "button",
   color: "primary",
   skeleton: false,
 });
 
 const { densityClass } = useDensity(props);
+const { disabled } = useFormContext(props);
 
 defineSlots<{
   /** Slot for an custom icon. Will have no effect if property `icon` is passed. */
@@ -34,7 +36,7 @@ defineSlots<{
       { 'onyx-icon-button--loading': props.loading },
       densityClass,
     ]"
-    :disabled="props.disabled || props.loading"
+    :disabled="disabled || props.loading"
     :autofocus="props.autofocus"
   >
     <OnyxLoadingIndicator v-if="props.loading" type="circle" />
diff --git a/packages/sit-onyx/src/components/OnyxIconButton/types.ts b/packages/sit-onyx/src/components/OnyxIconButton/types.ts
index ad8c7b722b..60b1c522e6 100644
--- a/packages/sit-onyx/src/components/OnyxIconButton/types.ts
+++ b/packages/sit-onyx/src/components/OnyxIconButton/types.ts
@@ -1,6 +1,7 @@
 import type { DensityProp } from "../../composables/density";
 import type { AutofocusProp } from "../../types";
 import type { ButtonColor, ButtonType } from "../OnyxButton/types";
+import type { FormInjected } from "../OnyxForm/OnyxForm";
 
 export type OnyxIconButtonProps = DensityProp &
   AutofocusProp & {
@@ -11,7 +12,7 @@ export type OnyxIconButtonProps = DensityProp &
     /**
      * If the button should be disabled or not.
      */
-    disabled?: boolean;
+    disabled?: FormInjected<boolean>;
     /**
      * The button type.
      */
diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
index f90034fc9b..de9fd4c381 100644
--- a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
+++ b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
@@ -6,14 +6,15 @@ import OnyxFormElement from "../OnyxFormElement/OnyxFormElement.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxInputProps } from "./types";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
 
 const props = withDefaults(defineProps<OnyxInputProps>(), {
   modelValue: "",
   type: "text",
   required: false,
   autocapitalize: "sentences",
-  readonly: false,
-  disabled: false,
+  readonly: FORM_INJECTED_SYMBOL,
+  disabled: FORM_INJECTED_SYMBOL,
   loading: false,
   skeleton: false,
 });
@@ -45,6 +46,8 @@ const patternSource = computed(() => {
   if (props.pattern instanceof RegExp) return props.pattern.source;
   return props.pattern;
 });
+
+const { readonly, disabled } = useFormContext(props);
 </script>
 
 <template>
@@ -71,8 +74,8 @@ const patternSource = computed(() => {
             :autofocus="props.autofocus"
             :name="props.name"
             :pattern="patternSource"
-            :readonly="props.readonly"
-            :disabled="props.disabled || props.loading"
+            :readonly="readonly"
+            :disabled="disabled || props.loading"
             :minlength="props.minlength"
             :maxlength="props.maxlength"
             :aria-label="props.hideLabel ? props.label : undefined"
diff --git a/packages/sit-onyx/src/components/OnyxInput/types.ts b/packages/sit-onyx/src/components/OnyxInput/types.ts
index 63bad1502c..a971502bf3 100644
--- a/packages/sit-onyx/src/components/OnyxInput/types.ts
+++ b/packages/sit-onyx/src/components/OnyxInput/types.ts
@@ -2,6 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp } from "../../types";
+import type { FormInjected } from "../OnyxForm/OnyxForm";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 
 export type OnyxInputProps = DensityProp &
@@ -50,11 +51,11 @@ export type OnyxInputProps = DensityProp &
     /**
      * Whether the input should be readonly.
      */
-    readonly?: boolean;
+    readonly?: FormInjected<boolean>;
     /**
      * Whether the input should be disabled.
      */
-    disabled?: boolean;
+    disabled?: FormInjected<boolean>;
     /**
      * Whether the input is loading. User interaction will be disabled.
      */
diff --git a/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue b/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue
index f9d80f7a0b..cc86274724 100644
--- a/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue
+++ b/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue
@@ -3,12 +3,13 @@ import { useDensity } from "../../composables/density";
 import { useCustomValidity } from "../../composables/useCustomValidity";
 import type { SelectOptionValue } from "../../types";
 import OnyxErrorTooltip from "../OnyxErrorTooltip/OnyxErrorTooltip.vue";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxRadioButtonProps } from "./types";
 
 const props = withDefaults(defineProps<OnyxRadioButtonProps<TValue>>(), {
-  disabled: false,
+  disabled: FORM_INJECTED_SYMBOL,
   required: false,
   checked: false,
   loading: false,
@@ -24,6 +25,7 @@ const emit = defineEmits<{
 
 const { vCustomValidity, errorMessages } = useCustomValidity({ props, emit });
 const { densityClass } = useDensity(props);
+const { disabled } = useFormContext(props);
 </script>
 
 <template>
@@ -32,7 +34,7 @@ const { densityClass } = useDensity(props);
     <OnyxSkeleton class="onyx-radio-button-skeleton__label" />
   </div>
 
-  <OnyxErrorTooltip v-else :disabled="props.disabled" :error-messages="errorMessages">
+  <OnyxErrorTooltip v-else :disabled="disabled" :error-messages="errorMessages">
     <label :class="['onyx-radio-button', densityClass]">
       <OnyxLoadingIndicator v-if="props.loading" class="onyx-radio-button__loading" type="circle" />
       <!-- TODO: accessible error: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage -->
@@ -45,7 +47,7 @@ const { densityClass } = useDensity(props);
         :name="props.name"
         :value="props.value"
         :checked="props.checked"
-        :disabled="props.disabled"
+        :disabled="disabled"
         :autofocus="props.autofocus"
       />
       <span class="onyx-radio-button__label" :class="[`onyx-truncation-${props.truncation}`]">
diff --git a/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue b/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue
index ba7588d5fc..ff55deec0a 100644
--- a/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue
+++ b/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue
@@ -6,17 +6,19 @@ import type { SelectOptionValue } from "../../types";
 import OnyxHeadline from "../OnyxHeadline/OnyxHeadline.vue";
 import OnyxRadioButton from "../OnyxRadioButton/OnyxRadioButton.vue";
 import type { OnyxRadioGroupProps } from "./types";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
 
 const props = withDefaults(defineProps<OnyxRadioGroupProps<TValue>>(), {
   name: () => useId() ?? "", // the name must be globally unique
   direction: "vertical",
   required: false,
-  disabled: false,
+  disabled: FORM_INJECTED_SYMBOL,
   truncation: "ellipsis",
 });
 
 const { densityClass } = useDensity(props);
 const { requiredMarkerClass, requiredTypeClass } = useRequired(props);
+const { disabled } = useFormContext(props);
 
 const emit = defineEmits<{
   "update:modelValue": [selected: TValue];
@@ -35,7 +37,7 @@ const handleChange = (selected: boolean, value: TValue) => {
 <template>
   <fieldset
     :class="['onyx-radio-button-group', densityClass, requiredTypeClass]"
-    :disabled="props.disabled"
+    :disabled="disabled"
     role="radiogroup"
     :aria-label="props.label"
   >
diff --git a/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts b/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts
index a9cf07190f..5e18e309ef 100644
--- a/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts
+++ b/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts
@@ -2,6 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp, BaseSelectOption, Direction, SelectOptionValue } from "../../types";
+import type { FormInjected } from "../OnyxForm/OnyxForm";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 
 export type OnyxRadioGroupProps<TValue extends SelectOptionValue = SelectOptionValue> =
@@ -27,7 +28,7 @@ export type OnyxRadioGroupProps<TValue extends SelectOptionValue = SelectOptionV
       /**
        * Disable the radio group.
        */
-      disabled?: boolean;
+      disabled?: FormInjected<boolean>;
       /**
        * Direction of the checkboxes. Can be vertical (default) or horizontal.
        */
diff --git a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
index c1082358ff..ee301dd893 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
+++ b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
@@ -18,11 +18,14 @@ import OnyxSelectInput from "../OnyxSelectInput/OnyxSelectInput.vue";
 import type { OnyxSelectInputProps } from "../OnyxSelectInput/types";
 import OnyxSelectOption from "../OnyxSelectOption/OnyxSelectOption.vue";
 import type { OnyxSelectProps, SelectOption } from "./types";
+import { FORM_INJECTED_SYMBOL } from "../OnyxForm/OnyxForm";
 
 const props = withDefaults(defineProps<OnyxSelectProps<TValue>>(), {
   loading: false,
   searchTerm: MANAGED_SYMBOL,
   open: MANAGED_SYMBOL,
+  disabled: FORM_INJECTED_SYMBOL,
+  readonly: FORM_INJECTED_SYMBOL,
   truncation: "ellipsis",
   valueLabel: undefined,
   alignment: "full",
diff --git a/packages/sit-onyx/src/components/OnyxSelect/types.ts b/packages/sit-onyx/src/components/OnyxSelect/types.ts
index 7354a6c55a..8499f5e5a8 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/types.ts
+++ b/packages/sit-onyx/src/components/OnyxSelect/types.ts
@@ -1,6 +1,7 @@
 import type { DensityProp } from "../../composables/density";
 import type { ManagedProp } from "../../composables/useManagedState";
 import type { AutofocusProp, BaseSelectOption, SelectOptionValue } from "../../types";
+import type { FormInjected } from "../OnyxForm/OnyxForm";
 import type { OnyxSelectInputProps } from "../OnyxSelectInput/types";
 import type { OnyxSelectOptionProps } from "../OnyxSelectOption/types";
 
@@ -70,9 +71,17 @@ export type SelectModelValueProps<TValue extends SelectOptionValue> =
 export type OnyxSelectProps<TValue extends SelectOptionValue = SelectOptionValue> = DensityProp &
   SelectModelValueProps<TValue> &
   SelectSearchProps &
-  Omit<OnyxSelectInputProps, "density" | "modelValue" | "showFocus"> &
+  Omit<OnyxSelectInputProps, "density" | "modelValue" | "showFocus" | "disabled" | "readonly"> &
   AutofocusProp &
   Pick<BaseSelectOption, "truncation"> & {
+    /**
+     * Whether the select should be disabled.
+     */
+    disabled?: FormInjected<boolean>;
+    /**
+     * Whether the select should be readonly.
+     */
+    readonly?: FormInjected<boolean>;
     /**
      * Label that will be shown in the input of OnyxSelect.
      * If unset, will be managed internally by comparing `modelValue` with `options`.
diff --git a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
index 2db8345f81..bc807431c3 100644
--- a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
+++ b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
@@ -10,12 +10,13 @@ import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxStepperProps } from "./types";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
 
 const props = withDefaults(defineProps<OnyxStepperProps>(), {
   step: 1,
   stripStep: false,
-  disabled: false,
-  readonly: false,
+  disabled: FORM_INJECTED_SYMBOL,
+  readonly: FORM_INJECTED_SYMBOL,
   loading: false,
   skeleton: false,
 });
@@ -32,6 +33,7 @@ const emit = defineEmits<{
   validityChange: [validity: ValidityState];
 }>();
 
+const { readonly, disabled } = useFormContext(props);
 const { densityClass } = useDensity(props);
 const { vCustomValidity, errorMessages } = useCustomValidity({ props, emit });
 
@@ -73,9 +75,7 @@ const decrementLabel = computed(() => t.value("stepper.decrement", { stepSize: p
         <button
           type="button"
           class="onyx-stepper__counter"
-          :disabled="
-            (props.min && props.min === value) || props.disabled || props.readonly || props.loading
-          "
+          :disabled="(props.min && props.min === value) || disabled || readonly || props.loading"
           :aria-label="decrementLabel"
           @click="handleClick('stepDown')"
         >
@@ -92,12 +92,12 @@ const decrementLabel = computed(() => t.value("stepper.decrement", { stepSize: p
           type="number"
           :aria-label="props.label"
           :autofocus="props.autofocus"
-          :disabled="props.disabled || props.loading"
+          :disabled="disabled || props.loading"
           :min="props.min"
           :max="props.max"
           :name="props.name"
           :placeholder="props.placeholder"
-          :readonly="props.readonly"
+          :readonly="readonly"
           :required="props.required"
           :step="props.step"
           :title="props.hideLabel ? props.label : undefined"
@@ -106,9 +106,7 @@ const decrementLabel = computed(() => t.value("stepper.decrement", { stepSize: p
         <button
           type="button"
           class="onyx-stepper__counter"
-          :disabled="
-            (props.max && props.max === value) || props.disabled || props.readonly || props.loading
-          "
+          :disabled="(props.max && props.max === value) || disabled || readonly || props.loading"
           :aria-label="incrementLabel"
           @click="handleClick('stepUp')"
         >
diff --git a/packages/sit-onyx/src/components/OnyxStepper/types.ts b/packages/sit-onyx/src/components/OnyxStepper/types.ts
index 3063308834..6116ec900c 100644
--- a/packages/sit-onyx/src/components/OnyxStepper/types.ts
+++ b/packages/sit-onyx/src/components/OnyxStepper/types.ts
@@ -1,6 +1,7 @@
 import type { DensityProp } from "../../composables/density";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp } from "../../types";
+import type { FormInjected } from "../OnyxForm/OnyxForm";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 import type { Autocomplete } from "../OnyxInput/types";
 
@@ -44,11 +45,11 @@ export type OnyxStepperProps = DensityProp &
     /**
      * Whether to disable the input and prevent user interaction.
      */
-    disabled?: boolean;
+    disabled?: FormInjected<boolean>;
     /**
      * Whether the input should be readonly.
      */
-    readonly?: boolean;
+    readonly?: FormInjected<boolean>;
     /**
      * Whether the input is loading. User interaction will be disabled.
      */
diff --git a/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue b/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue
index 30de74d929..dc6774bd42 100644
--- a/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue
+++ b/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue
@@ -10,10 +10,11 @@ import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxSwitchProps } from "./types";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
 
 const props = withDefaults(defineProps<OnyxSwitchProps>(), {
   modelValue: false,
-  disabled: false,
+  disabled: FORM_INJECTED_SYMBOL,
   loading: false,
   truncation: "ellipsis",
   skeleton: false,
@@ -36,6 +37,8 @@ const title = computed(() => {
   return props.hideLabel ? props.label : undefined;
 });
 
+const { disabled } = useFormContext(props);
+
 const isChecked = computed({
   get: () => props.modelValue,
   set: (value) => {
@@ -52,7 +55,7 @@ const isChecked = computed({
     <OnyxSkeleton v-if="!props.hideLabel" class="onyx-switch-skeleton__label" />
   </div>
 
-  <OnyxErrorTooltip v-else :disabled="props.disabled" :error-messages="errorMessages">
+  <OnyxErrorTooltip v-else :disabled="disabled" :error-messages="errorMessages">
     <label class="onyx-switch" :class="[requiredTypeClass, densityClass]" :title="title">
       <input
         v-model="isChecked"
@@ -61,7 +64,7 @@ const isChecked = computed({
         role="switch"
         :class="{ 'onyx-switch__input': true, 'onyx-switch__loading': props.loading }"
         :aria-label="props.hideLabel ? props.label : undefined"
-        :disabled="props.disabled || props.loading"
+        :disabled="disabled || props.loading"
         :required="props.required"
         :autofocus="props.autofocus"
       />
diff --git a/packages/sit-onyx/src/components/OnyxSwitch/types.ts b/packages/sit-onyx/src/components/OnyxSwitch/types.ts
index 9e326d440b..b7d0d53980 100644
--- a/packages/sit-onyx/src/components/OnyxSwitch/types.ts
+++ b/packages/sit-onyx/src/components/OnyxSwitch/types.ts
@@ -2,6 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp, TruncationType } from "../../types";
+import type { FormInjected } from "../OnyxForm/OnyxForm";
 
 export type OnyxSwitchProps = DensityProp &
   RequiredMarkerProp &
@@ -18,7 +19,7 @@ export type OnyxSwitchProps = DensityProp &
     /**
      * Whether to disable the switch and prevent user interaction.
      */
-    disabled?: boolean;
+    disabled?: FormInjected<boolean>;
     /**
      * Shows a loading indicator.
      */
diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
index 8829408128..4dec6140ab 100644
--- a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
+++ b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
@@ -5,13 +5,14 @@ import { useCustomValidity } from "../../composables/useCustomValidity";
 import OnyxFormElement from "../OnyxFormElement/OnyxFormElement.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxTextareaProps } from "./types";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
 
 const props = withDefaults(defineProps<OnyxTextareaProps>(), {
   modelValue: "",
   required: false,
   autocapitalize: "sentences",
-  readonly: false,
-  disabled: false,
+  readonly: FORM_INJECTED_SYMBOL,
+  disabled: FORM_INJECTED_SYMBOL,
   skeleton: false,
   disableManualResize: false,
 });
@@ -57,6 +58,8 @@ const handleInput = (event: Event) => {
   const target = event.target as HTMLTextAreaElement;
   target.parentElement?.setAttribute("data-autosize-value", target.value);
 };
+
+const { disabled, readonly } = useFormContext(props);
 </script>
 
 <template>
@@ -88,8 +91,8 @@ const handleInput = (event: Event) => {
             :autocapitalize="props.autocapitalize"
             :autofocus="props.autofocus"
             :name="props.name"
-            :readonly="props.readonly"
-            :disabled="props.disabled"
+            :readonly="readonly"
+            :disabled="disabled"
             :minlength="props.minlength"
             :maxlength="props.maxlength"
             :aria-label="props.hideLabel ? props.label : undefined"
diff --git a/packages/sit-onyx/src/types/components.ts b/packages/sit-onyx/src/types/components.ts
index bf6950c8ea..25378505bc 100644
--- a/packages/sit-onyx/src/types/components.ts
+++ b/packages/sit-onyx/src/types/components.ts
@@ -1,3 +1,4 @@
+import type { FormInjected } from "../components/OnyxForm/OnyxForm";
 import type { DensityProp } from "../composables/density";
 import type { TruncationType } from "./fonts";
 
@@ -30,11 +31,11 @@ export type BaseSelectOption<TValue extends SelectOptionValue = SelectOptionValu
   /**
    * Whether to disable the component and prevent user interaction.
    */
-  disabled?: boolean;
+  disabled?: FormInjected<boolean>;
   /**
    * Shows a loading indicator.
    */
-  loading?: boolean;
+  loading?: FormInjected<boolean>;
   /**
    * Whether to show a skeleton.
    */

From 9a62abdddf5bd2b06ebdb7135f5a282bea78eb54 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Mon, 30 Sep 2024 14:49:34 +0200
Subject: [PATCH 10/24] rename onyxform.ts to oynxform.core.ts

---
 packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue    | 2 +-
 packages/sit-onyx/src/components/OnyxButton/types.ts          | 2 +-
 .../sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue     | 2 +-
 .../src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue    | 2 +-
 packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts   | 2 +-
 .../src/components/OnyxForm/{OnyxForm.ts => OnyxForm.core.ts} | 0
 packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue        | 2 +-
 packages/sit-onyx/src/components/OnyxForm/types.ts            | 2 +-
 .../sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue | 2 +-
 packages/sit-onyx/src/components/OnyxIconButton/types.ts      | 2 +-
 packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue      | 2 +-
 packages/sit-onyx/src/components/OnyxInput/types.ts           | 2 +-
 .../src/components/OnyxRadioButton/OnyxRadioButton.vue        | 2 +-
 .../sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue | 2 +-
 packages/sit-onyx/src/components/OnyxRadioGroup/types.ts      | 2 +-
 packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue    | 2 +-
 packages/sit-onyx/src/components/OnyxSelect/types.ts          | 2 +-
 packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue  | 4 ++--
 packages/sit-onyx/src/components/OnyxStepper/types.ts         | 2 +-
 packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue    | 2 +-
 packages/sit-onyx/src/components/OnyxSwitch/types.ts          | 2 +-
 .../sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue     | 2 +-
 22 files changed, 22 insertions(+), 22 deletions(-)
 rename packages/sit-onyx/src/components/OnyxForm/{OnyxForm.ts => OnyxForm.core.ts} (100%)

diff --git a/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue b/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue
index c66a1e0156..71c6e967c2 100644
--- a/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue
+++ b/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue
@@ -6,7 +6,7 @@ import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.v
 import OnyxRipple from "../OnyxRipple/OnyxRipple.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxButtonProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxButtonProps>(), {
   disabled: FORM_INJECTED_SYMBOL,
diff --git a/packages/sit-onyx/src/components/OnyxButton/types.ts b/packages/sit-onyx/src/components/OnyxButton/types.ts
index f19a72913d..703730a923 100644
--- a/packages/sit-onyx/src/components/OnyxButton/types.ts
+++ b/packages/sit-onyx/src/components/OnyxButton/types.ts
@@ -1,6 +1,6 @@
 import type { DensityProp } from "../../composables/density";
 import type { AutofocusProp } from "../../types";
-import type { FormInjected } from "../OnyxForm/OnyxForm";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 
 export type OnyxButtonProps = DensityProp &
   AutofocusProp & {
diff --git a/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue b/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue
index ceb934cd20..6d2f8f36c9 100644
--- a/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue
+++ b/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue
@@ -8,7 +8,7 @@ import OnyxErrorTooltip from "../OnyxErrorTooltip/OnyxErrorTooltip.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxCheckboxProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxCheckboxProps<TValue>>(), {
   modelValue: false,
diff --git a/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue b/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue
index 1909f8bc7d..59ef3c501d 100644
--- a/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue
+++ b/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue
@@ -7,7 +7,7 @@ import type { SelectOptionValue } from "../../types";
 import OnyxCheckbox from "../OnyxCheckbox/OnyxCheckbox.vue";
 import OnyxHeadline from "../OnyxHeadline/OnyxHeadline.vue";
 import type { OnyxCheckboxGroupProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxCheckboxGroupProps<TValue>>(), {
   modelValue: () => [],
diff --git a/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts b/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts
index 39da118a31..234fb950bf 100644
--- a/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts
+++ b/packages/sit-onyx/src/components/OnyxCheckboxGroup/types.ts
@@ -2,7 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp, BaseSelectOption, Direction, SelectOptionValue } from "../../types";
-import type { FormInjected } from "../OnyxForm/OnyxForm";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 
 export type OnyxCheckboxGroupProps<TValue extends SelectOptionValue = SelectOptionValue> =
diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.ts b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.ts
similarity index 100%
rename from packages/sit-onyx/src/components/OnyxForm/OnyxForm.ts
rename to packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.ts
diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue
index 33b8c4c7d0..c5c7f114ce 100644
--- a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue
+++ b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useDensity } from "../../composables/density";
-import { provideFormContext } from "./OnyxForm";
+import { provideFormContext } from "./OnyxForm.core";
 import type { OnyxFormProps } from "./types";
 
 const props = defineProps<OnyxFormProps>();
diff --git a/packages/sit-onyx/src/components/OnyxForm/types.ts b/packages/sit-onyx/src/components/OnyxForm/types.ts
index e24f87a366..f9998f2831 100644
--- a/packages/sit-onyx/src/components/OnyxForm/types.ts
+++ b/packages/sit-onyx/src/components/OnyxForm/types.ts
@@ -1,4 +1,4 @@
 import type { DensityProp } from "../../composables/density";
-import type { FormInjectedProps } from "./OnyxForm";
+import type { FormInjectedProps } from "./OnyxForm.core";
 
 export type OnyxFormProps = Partial<FormInjectedProps> & DensityProp;
diff --git a/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue b/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue
index b1ecf8a418..e06aa05651 100644
--- a/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue
+++ b/packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useDensity } from "../../composables/density";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
diff --git a/packages/sit-onyx/src/components/OnyxIconButton/types.ts b/packages/sit-onyx/src/components/OnyxIconButton/types.ts
index 60b1c522e6..4b5ab0cad5 100644
--- a/packages/sit-onyx/src/components/OnyxIconButton/types.ts
+++ b/packages/sit-onyx/src/components/OnyxIconButton/types.ts
@@ -1,7 +1,7 @@
 import type { DensityProp } from "../../composables/density";
 import type { AutofocusProp } from "../../types";
 import type { ButtonColor, ButtonType } from "../OnyxButton/types";
-import type { FormInjected } from "../OnyxForm/OnyxForm";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 
 export type OnyxIconButtonProps = DensityProp &
   AutofocusProp & {
diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
index de9fd4c381..2263505bfe 100644
--- a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
+++ b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
@@ -6,7 +6,7 @@ import OnyxFormElement from "../OnyxFormElement/OnyxFormElement.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxInputProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxInputProps>(), {
   modelValue: "",
diff --git a/packages/sit-onyx/src/components/OnyxInput/types.ts b/packages/sit-onyx/src/components/OnyxInput/types.ts
index a971502bf3..9a680c1a4a 100644
--- a/packages/sit-onyx/src/components/OnyxInput/types.ts
+++ b/packages/sit-onyx/src/components/OnyxInput/types.ts
@@ -2,7 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp } from "../../types";
-import type { FormInjected } from "../OnyxForm/OnyxForm";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 
 export type OnyxInputProps = DensityProp &
diff --git a/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue b/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue
index cc86274724..5030a51a56 100644
--- a/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue
+++ b/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue
@@ -3,7 +3,7 @@ import { useDensity } from "../../composables/density";
 import { useCustomValidity } from "../../composables/useCustomValidity";
 import type { SelectOptionValue } from "../../types";
 import OnyxErrorTooltip from "../OnyxErrorTooltip/OnyxErrorTooltip.vue";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxRadioButtonProps } from "./types";
diff --git a/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue b/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue
index ff55deec0a..52382161c8 100644
--- a/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue
+++ b/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue
@@ -6,7 +6,7 @@ import type { SelectOptionValue } from "../../types";
 import OnyxHeadline from "../OnyxHeadline/OnyxHeadline.vue";
 import OnyxRadioButton from "../OnyxRadioButton/OnyxRadioButton.vue";
 import type { OnyxRadioGroupProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxRadioGroupProps<TValue>>(), {
   name: () => useId() ?? "", // the name must be globally unique
diff --git a/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts b/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts
index 5e18e309ef..bc51fa78b3 100644
--- a/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts
+++ b/packages/sit-onyx/src/components/OnyxRadioGroup/types.ts
@@ -2,7 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp, BaseSelectOption, Direction, SelectOptionValue } from "../../types";
-import type { FormInjected } from "../OnyxForm/OnyxForm";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 
 export type OnyxRadioGroupProps<TValue extends SelectOptionValue = SelectOptionValue> =
diff --git a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
index ee301dd893..95499006e5 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
+++ b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
@@ -18,7 +18,7 @@ import OnyxSelectInput from "../OnyxSelectInput/OnyxSelectInput.vue";
 import type { OnyxSelectInputProps } from "../OnyxSelectInput/types";
 import OnyxSelectOption from "../OnyxSelectOption/OnyxSelectOption.vue";
 import type { OnyxSelectProps, SelectOption } from "./types";
-import { FORM_INJECTED_SYMBOL } from "../OnyxForm/OnyxForm";
+import { FORM_INJECTED_SYMBOL } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxSelectProps<TValue>>(), {
   loading: false,
diff --git a/packages/sit-onyx/src/components/OnyxSelect/types.ts b/packages/sit-onyx/src/components/OnyxSelect/types.ts
index 8499f5e5a8..75c607f1ec 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/types.ts
+++ b/packages/sit-onyx/src/components/OnyxSelect/types.ts
@@ -1,7 +1,7 @@
 import type { DensityProp } from "../../composables/density";
 import type { ManagedProp } from "../../composables/useManagedState";
 import type { AutofocusProp, BaseSelectOption, SelectOptionValue } from "../../types";
-import type { FormInjected } from "../OnyxForm/OnyxForm";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 import type { OnyxSelectInputProps } from "../OnyxSelectInput/types";
 import type { OnyxSelectOptionProps } from "../OnyxSelectOption/types";
 
diff --git a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
index bc807431c3..57d82ff37b 100644
--- a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
+++ b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
@@ -10,7 +10,7 @@ import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxStepperProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxStepperProps>(), {
   step: 1,
@@ -88,7 +88,7 @@ const decrementLabel = computed(() => t.value("stepper.decrement", { stepSize: p
           v-model.number="value"
           v-custom-validity
           class="onyx-stepper__native"
-          :class="{ 'onyx-stepper__native--force-invalid': errorMessages && wasTouched }"
+          :class="{ 'onyx-form-element--force-invalid': errorMessages && wasTouched }"
           type="number"
           :aria-label="props.label"
           :autofocus="props.autofocus"
diff --git a/packages/sit-onyx/src/components/OnyxStepper/types.ts b/packages/sit-onyx/src/components/OnyxStepper/types.ts
index 6116ec900c..55bb12fe2b 100644
--- a/packages/sit-onyx/src/components/OnyxStepper/types.ts
+++ b/packages/sit-onyx/src/components/OnyxStepper/types.ts
@@ -1,7 +1,7 @@
 import type { DensityProp } from "../../composables/density";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp } from "../../types";
-import type { FormInjected } from "../OnyxForm/OnyxForm";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 import type { Autocomplete } from "../OnyxInput/types";
 
diff --git a/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue b/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue
index dc6774bd42..4605e52d73 100644
--- a/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue
+++ b/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue
@@ -10,7 +10,7 @@ import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxSwitchProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxSwitchProps>(), {
   modelValue: false,
diff --git a/packages/sit-onyx/src/components/OnyxSwitch/types.ts b/packages/sit-onyx/src/components/OnyxSwitch/types.ts
index b7d0d53980..6b9823d0d7 100644
--- a/packages/sit-onyx/src/components/OnyxSwitch/types.ts
+++ b/packages/sit-onyx/src/components/OnyxSwitch/types.ts
@@ -2,7 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp, TruncationType } from "../../types";
-import type { FormInjected } from "../OnyxForm/OnyxForm";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 
 export type OnyxSwitchProps = DensityProp &
   RequiredMarkerProp &
diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
index 4dec6140ab..babea04fa0 100644
--- a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
+++ b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
@@ -5,7 +5,7 @@ import { useCustomValidity } from "../../composables/useCustomValidity";
 import OnyxFormElement from "../OnyxFormElement/OnyxFormElement.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxTextareaProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxTextareaProps>(), {
   modelValue: "",

From c7079a0723522ec9f4e5dda67b1b12179a4e8550 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Mon, 30 Sep 2024 18:30:41 +0200
Subject: [PATCH 11/24] add test

---
 .../src/components/OnyxForm/OnyxForm.core.ts  | 17 ++--
 .../src/components/OnyxForm/OnyxForm.ct.tsx   | 81 +++++++++++++++++++
 .../src/components/OnyxInput/OnyxInput.vue    |  6 +-
 .../src/components/OnyxInput/types.ts         |  2 +-
 .../src/components/OnyxSelect/OnyxSelect.vue  |  2 +-
 .../src/components/OnyxSelect/types.ts        |  2 +-
 .../OnyxSelectInput/OnyxSelectInput.vue       | 11 ++-
 .../src/components/OnyxSelectInput/types.ts   |  3 +-
 .../components/OnyxStepper/OnyxStepper.vue    |  6 +-
 .../src/components/OnyxStepper/types.ts       |  2 +-
 .../components/OnyxTextarea/OnyxTextarea.vue  |  6 +-
 11 files changed, 111 insertions(+), 27 deletions(-)
 create mode 100644 packages/sit-onyx/src/components/OnyxForm/OnyxForm.ct.tsx

diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.ts b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.ts
index 8879dbfee2..afb2b1b54f 100644
--- a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.ts
+++ b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.ts
@@ -8,7 +8,6 @@ const FORM_INJECTION_KEY = Symbol() as InjectionKey<ReturnType<typeof createForm
  */
 export type FormInjectedProps = {
   disabled: boolean;
-  readonly: boolean;
 };
 
 /**
@@ -69,14 +68,12 @@ const createFormInjectionContext =
     get disabled() {
       return createCompute(formProps, props, "disabled", false);
     },
-    get readonly() {
-      return createCompute(formProps, props, "readonly", false);
-    },
   });
 
 export const provideFormContext = (formProps: Reactive<FormInjectedProps> | undefined) =>
   provide(FORM_INJECTION_KEY, createFormInjectionContext(formProps));
 
+const DEFAULT_FORM_INJECTION_CONTEXT = createFormInjectionContext();
 /**
  * Provides the injected form properties (if available).
  * Otherwise a defined default is used.
@@ -95,8 +92,10 @@ export const provideFormContext = (formProps: Reactive<FormInjectedProps> | unde
  * const { disabled, readonly } = useFormContext(props);
  * ```
  */
-export const useFormContext = inject(
-  FORM_INJECTION_KEY,
-  /** Default */
-  createFormInjectionContext(),
-);
+export const useFormContext = (props: Reactive<LocalProps>) => {
+  return inject(
+    FORM_INJECTION_KEY,
+    /** Default */
+    DEFAULT_FORM_INJECTION_CONTEXT,
+  )(props);
+};
diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.ct.tsx b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.ct.tsx
new file mode 100644
index 0000000000..df0b158993
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.ct.tsx
@@ -0,0 +1,81 @@
+import type { Locator } from "@playwright/test";
+import { h, type Component } from "vue";
+import type { ComponentProps } from "vue-component-type-helpers";
+import { expect, test } from "../../playwright/a11y";
+import OnyxButton from "../OnyxButton/OnyxButton.vue";
+import OnyxCheckbox from "../OnyxCheckbox/OnyxCheckbox.vue";
+import OnyxCheckboxGroup from "../OnyxCheckboxGroup/OnyxCheckboxGroup.vue";
+import OnyxInput from "../OnyxInput/OnyxInput.vue";
+import OnyxRadioGroup from "../OnyxRadioGroup/OnyxRadioGroup.vue";
+import OnyxSelect from "../OnyxSelect/OnyxSelect.vue";
+import type { SelectOption } from "../OnyxSelect/types";
+import OnyxStepper from "../OnyxStepper/OnyxStepper.vue";
+import OnyxSwitch from "../OnyxSwitch/OnyxSwitch.vue";
+import OnyxTextarea from "../OnyxTextarea/OnyxTextarea.vue";
+import OnyxForm from "./OnyxForm.vue";
+
+const inferProps = <TComp extends Component, TProps extends ComponentProps<TComp>>(
+  component: TComp,
+  props: TProps,
+  delegate?: Locator,
+) => ({ component, props, delegate });
+
+test("OnyxForm should inject disabled state", async ({ mount, page }) => {
+  const options: SelectOption[] = [
+    {
+      label: "option 1",
+      value: "option 1",
+    },
+  ];
+  const allFormElements = [
+    inferProps(OnyxInput, { label: "OnyxInput" }),
+    inferProps(OnyxSelect, { label: "OnyxSelect", listLabel: "Select options", options }),
+    inferProps(OnyxStepper, { label: "OnyxStepper" }),
+    inferProps(OnyxTextarea, { label: "OnyxTextarea" }),
+    inferProps(
+      OnyxRadioGroup,
+      { label: "OnyxRadioGroup", options },
+      page.getByLabel("OnyxRadioGroup").getByText("option 1"),
+    ),
+    inferProps(
+      OnyxCheckboxGroup,
+      { label: "OnyxCheckboxGroup", options },
+      page.getByLabel("OnyxCheckboxGroup").getByText("option 1"),
+    ),
+    inferProps(OnyxCheckbox, { label: "OnyxCheckbox", value: "" }),
+    inferProps(OnyxSwitch, { label: "OnyxSwitch" }),
+    inferProps(OnyxButton, { label: "OnyxButton" }, page.getByText("OnyxButton", { exact: true })),
+  ];
+
+  const expectForAll = async (expectation: (locator: Locator) => Promise<unknown>) => {
+    for (const { props, delegate } of allFormElements) {
+      const getInputByLabel = page.getByLabel(props.label, { exact: true });
+      // eslint-disable-next-line playwright/no-conditional-in-test
+      const element = delegate || getInputByLabel;
+      expect(element).toBeDefined();
+      await expectation(element);
+    }
+  };
+
+  // ARRANGE
+  await mount(
+    <OnyxForm>
+      {allFormElements.map(({ component, props }) => h(component as Component, props))}
+    </OnyxForm>,
+  );
+
+  // ASSERT
+  await expectForAll((element) =>
+    Promise.all([expect(element).toBeEnabled(), expect(element).toBeEditable()]),
+  );
+
+  // ARRANGE
+  await mount(
+    <OnyxForm disabled>
+      {allFormElements.map(({ component, props }) => h(component as Component, props))}
+    </OnyxForm>,
+  );
+
+  // ASSERT
+  await expectForAll((element) => expect(element).toBeDisabled());
+});
diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
index 2263505bfe..d1fd08b02e 100644
--- a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
+++ b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
@@ -13,7 +13,7 @@ const props = withDefaults(defineProps<OnyxInputProps>(), {
   type: "text",
   required: false,
   autocapitalize: "sentences",
-  readonly: FORM_INJECTED_SYMBOL,
+  readonly: false,
   disabled: FORM_INJECTED_SYMBOL,
   loading: false,
   skeleton: false,
@@ -47,7 +47,7 @@ const patternSource = computed(() => {
   return props.pattern;
 });
 
-const { readonly, disabled } = useFormContext(props);
+const { disabled } = useFormContext(props);
 </script>
 
 <template>
@@ -74,7 +74,7 @@ const { readonly, disabled } = useFormContext(props);
             :autofocus="props.autofocus"
             :name="props.name"
             :pattern="patternSource"
-            :readonly="readonly"
+            :readonly="props.readonly"
             :disabled="disabled || props.loading"
             :minlength="props.minlength"
             :maxlength="props.maxlength"
diff --git a/packages/sit-onyx/src/components/OnyxInput/types.ts b/packages/sit-onyx/src/components/OnyxInput/types.ts
index 9a680c1a4a..4baec8e045 100644
--- a/packages/sit-onyx/src/components/OnyxInput/types.ts
+++ b/packages/sit-onyx/src/components/OnyxInput/types.ts
@@ -51,7 +51,7 @@ export type OnyxInputProps = DensityProp &
     /**
      * Whether the input should be readonly.
      */
-    readonly?: FormInjected<boolean>;
+    readonly?: boolean;
     /**
      * Whether the input should be disabled.
      */
diff --git a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
index 95499006e5..2fca464e33 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
+++ b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<OnyxSelectProps<TValue>>(), {
   searchTerm: MANAGED_SYMBOL,
   open: MANAGED_SYMBOL,
   disabled: FORM_INJECTED_SYMBOL,
-  readonly: FORM_INJECTED_SYMBOL,
+  readonly: false,
   truncation: "ellipsis",
   valueLabel: undefined,
   alignment: "full",
diff --git a/packages/sit-onyx/src/components/OnyxSelect/types.ts b/packages/sit-onyx/src/components/OnyxSelect/types.ts
index 75c607f1ec..8e43617d16 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/types.ts
+++ b/packages/sit-onyx/src/components/OnyxSelect/types.ts
@@ -81,7 +81,7 @@ export type OnyxSelectProps<TValue extends SelectOptionValue = SelectOptionValue
     /**
      * Whether the select should be readonly.
      */
-    readonly?: FormInjected<boolean>;
+    readonly?: boolean;
     /**
      * Label that will be shown in the input of OnyxSelect.
      * If unset, will be managed internally by comparing `modelValue` with `options`.
diff --git a/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue b/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
index 18aca58790..3cc62231d8 100644
--- a/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
+++ b/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
@@ -14,15 +14,17 @@ import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.v
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import OnyxTooltip from "../OnyxTooltip/OnyxTooltip.vue";
 import type { OnyxSelectInputProps } from "./types";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 defineOptions({ inheritAttrs: false });
 const { rootAttrs, restAttrs } = useRootAttrs();
 
 const props = withDefaults(defineProps<OnyxSelectInputProps>(), {
   hideLabel: false,
+  disabled: FORM_INJECTED_SYMBOL,
+  readonly: false,
   loading: false,
   skeleton: false,
-  readonly: false,
 });
 
 const emit = defineEmits<{
@@ -39,6 +41,7 @@ const emit = defineEmits<{
 const { t } = injectI18n();
 
 const { vCustomValidity, errorMessages } = useCustomValidity({ props, emit });
+const { disabled } = useFormContext(props);
 
 /**
  * Number of selected options.
@@ -127,7 +130,7 @@ const blockTyping = (event: KeyboardEvent) => {
         <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -- Disabled rules are needed here, because of the click event. Otherwise clicking on the padding or gap won't open the select -->
         <div
           class="onyx-select-input__wrapper"
-          @click="!props.disabled && !props.loading && emit('inputClick')"
+          @click="!disabled && !props.loading && emit('inputClick')"
         >
           <OnyxLoadingIndicator
             v-if="props.loading"
@@ -150,7 +153,7 @@ const blockTyping = (event: KeyboardEvent) => {
             :readonly="props.readonly"
             :placeholder="props.placeholder"
             :required="props.required"
-            :disabled="props.disabled || props.loading"
+            :disabled="disabled || props.loading"
             :aria-label="props.hideLabel ? props.label : undefined"
             :title="props.hideLabel ? props.label : undefined"
             :value="selectionText"
@@ -179,7 +182,7 @@ const blockTyping = (event: KeyboardEvent) => {
             type="button"
             :aria-label="t('select.toggleDropDown')"
             tabindex="-1"
-            :disabled="props.readonly || props.disabled || props.loading"
+            :disabled="disabled || props.loading"
           >
             <OnyxIcon :icon="chevronDownUp" />
           </button>
diff --git a/packages/sit-onyx/src/components/OnyxSelectInput/types.ts b/packages/sit-onyx/src/components/OnyxSelectInput/types.ts
index a8bb18dc17..d33469ecea 100644
--- a/packages/sit-onyx/src/components/OnyxSelectInput/types.ts
+++ b/packages/sit-onyx/src/components/OnyxSelectInput/types.ts
@@ -2,6 +2,7 @@ import type { DensityProp } from "../../composables/density";
 import type { RequiredMarkerProp } from "../../composables/required";
 import type { CustomValidityProp } from "../../composables/useCustomValidity";
 import type { AutofocusProp } from "../../types";
+import type { FormInjected } from "../OnyxForm/OnyxForm.core";
 import type { OnyxFormElementProps } from "../OnyxFormElement/types";
 
 export const MULTISELECT_TEXT_MODE = ["summary", "preview"] as const;
@@ -26,7 +27,7 @@ export type OnyxSelectInputProps = DensityProp &
     /**
      * Whether the select should be disabled.
      */
-    disabled?: boolean;
+    disabled?: FormInjected<boolean>;
     /**
      * Whether to show a skeleton select.
      */
diff --git a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
index 57d82ff37b..4bc59fa2d1 100644
--- a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
+++ b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
@@ -16,7 +16,7 @@ const props = withDefaults(defineProps<OnyxStepperProps>(), {
   step: 1,
   stripStep: false,
   disabled: FORM_INJECTED_SYMBOL,
-  readonly: FORM_INJECTED_SYMBOL,
+  readonly: false,
   loading: false,
   skeleton: false,
 });
@@ -33,7 +33,7 @@ const emit = defineEmits<{
   validityChange: [validity: ValidityState];
 }>();
 
-const { readonly, disabled } = useFormContext(props);
+const { disabled } = useFormContext(props);
 const { densityClass } = useDensity(props);
 const { vCustomValidity, errorMessages } = useCustomValidity({ props, emit });
 
@@ -97,7 +97,7 @@ const decrementLabel = computed(() => t.value("stepper.decrement", { stepSize: p
           :max="props.max"
           :name="props.name"
           :placeholder="props.placeholder"
-          :readonly="readonly"
+          :readonly="props.readonly"
           :required="props.required"
           :step="props.step"
           :title="props.hideLabel ? props.label : undefined"
diff --git a/packages/sit-onyx/src/components/OnyxStepper/types.ts b/packages/sit-onyx/src/components/OnyxStepper/types.ts
index 55bb12fe2b..04fe96c6b2 100644
--- a/packages/sit-onyx/src/components/OnyxStepper/types.ts
+++ b/packages/sit-onyx/src/components/OnyxStepper/types.ts
@@ -49,7 +49,7 @@ export type OnyxStepperProps = DensityProp &
     /**
      * Whether the input should be readonly.
      */
-    readonly?: FormInjected<boolean>;
+    readonly?: boolean;
     /**
      * Whether the input is loading. User interaction will be disabled.
      */
diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
index babea04fa0..737f43314a 100644
--- a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
+++ b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<OnyxTextareaProps>(), {
   modelValue: "",
   required: false,
   autocapitalize: "sentences",
-  readonly: FORM_INJECTED_SYMBOL,
+  readonly: false,
   disabled: FORM_INJECTED_SYMBOL,
   skeleton: false,
   disableManualResize: false,
@@ -59,7 +59,7 @@ const handleInput = (event: Event) => {
   target.parentElement?.setAttribute("data-autosize-value", target.value);
 };
 
-const { disabled, readonly } = useFormContext(props);
+const { disabled } = useFormContext(props);
 </script>
 
 <template>
@@ -91,7 +91,7 @@ const { disabled, readonly } = useFormContext(props);
             :autocapitalize="props.autocapitalize"
             :autofocus="props.autofocus"
             :name="props.name"
-            :readonly="readonly"
+            :readonly="props.readonly"
             :disabled="disabled"
             :minlength="props.minlength"
             :maxlength="props.maxlength"

From 575335e5541a20a163eecaf0d2ed13c3e830cad9 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Mon, 30 Sep 2024 18:37:28 +0200
Subject: [PATCH 12/24] fix mistakes

---
 packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue | 2 +-
 packages/sit-onyx/src/types/components.ts                    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
index 4bc59fa2d1..8d982f6bd0 100644
--- a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
+++ b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
@@ -88,7 +88,7 @@ const decrementLabel = computed(() => t.value("stepper.decrement", { stepSize: p
           v-model.number="value"
           v-custom-validity
           class="onyx-stepper__native"
-          :class="{ 'onyx-form-element--force-invalid': errorMessages && wasTouched }"
+          :class="{ 'onyx-stepper__native--force-invalid': errorMessages && wasTouched }"
           type="number"
           :aria-label="props.label"
           :autofocus="props.autofocus"
diff --git a/packages/sit-onyx/src/types/components.ts b/packages/sit-onyx/src/types/components.ts
index 25378505bc..83bbbaeea4 100644
--- a/packages/sit-onyx/src/types/components.ts
+++ b/packages/sit-onyx/src/types/components.ts
@@ -1,4 +1,4 @@
-import type { FormInjected } from "../components/OnyxForm/OnyxForm";
+import type { FormInjected } from "../components/OnyxForm/OnyxForm.core";
 import type { DensityProp } from "../composables/density";
 import type { TruncationType } from "./fonts";
 
@@ -35,7 +35,7 @@ export type BaseSelectOption<TValue extends SelectOptionValue = SelectOptionValu
   /**
    * Shows a loading indicator.
    */
-  loading?: FormInjected<boolean>;
+  loading?: boolean;
   /**
    * Whether to show a skeleton.
    */

From e3213ee79fee165708732e71d3b8a0a69c3d8854 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Mon, 30 Sep 2024 18:50:28 +0200
Subject: [PATCH 13/24] add storybook support

---
 packages/sit-onyx/.storybook/formInjected.ts | 49 ++++++++++++++++++++
 packages/sit-onyx/.storybook/preview.ts      |  3 +-
 2 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 packages/sit-onyx/.storybook/formInjected.ts

diff --git a/packages/sit-onyx/.storybook/formInjected.ts b/packages/sit-onyx/.storybook/formInjected.ts
new file mode 100644
index 0000000000..442884c929
--- /dev/null
+++ b/packages/sit-onyx/.storybook/formInjected.ts
@@ -0,0 +1,49 @@
+import { walkTree } from "@sit-onyx/storybook-utils";
+import type {
+  ArgTypesEnhancer,
+  InputType,
+  SBType,
+  StrictInputType,
+} from "storybook/internal/types";
+
+const SB_TYPE_CONTROL_MAP: Partial<Record<SBType["name"], InputType["control"]>> = {
+  boolean: { type: "boolean" },
+  string: { type: "text" },
+  number: { type: "number" },
+};
+
+const getFormInjectedParent = (inputType?: StrictInputType) => {
+  if (!inputType?.type || inputType.table?.defaultValue?.summary !== "FORM_INJECTED_SYMBOL") {
+    return undefined;
+  }
+
+  return walkTree(inputType.type, (elem, parent) =>
+    elem.name === "symbol" || (elem.name === "other" && elem.value === "unique symbol")
+      ? parent
+      : undefined,
+  );
+};
+
+export const enhanceFormInjectedSymbol: ArgTypesEnhancer = (context) => {
+  Object.values(context.argTypes)
+    .map((argType) => {
+      const parent = getFormInjectedParent(argType);
+      return { argType, parent };
+    })
+    .filter(({ parent }) => parent)
+    .forEach(({ argType, parent }) => {
+      const firstAvailableControl = walkTree(
+        parent || argType.type!,
+        (sb) => SB_TYPE_CONTROL_MAP[sb.name],
+      );
+
+      if (firstAvailableControl && argType.table?.defaultValue) {
+        argType.control = firstAvailableControl;
+        argType.table.defaultValue.detail =
+          "If no value (or `undefined`) is provided, `FORM_INJECTED_SYMBOL` is the internal default value for this prop.\n" +
+          "In that case the props value will be derived from it's parent form (if it exists).\n";
+      }
+    });
+
+  return context.argTypes;
+};
diff --git a/packages/sit-onyx/.storybook/preview.ts b/packages/sit-onyx/.storybook/preview.ts
index d59e01c4e3..8cbdb2956e 100644
--- a/packages/sit-onyx/.storybook/preview.ts
+++ b/packages/sit-onyx/.storybook/preview.ts
@@ -9,11 +9,12 @@ import "@fontsource-variable/source-sans-3";
 import "@sit-onyx/storybook-utils/style.css";
 import "../src/styles/index.scss";
 import "./docs-template.scss";
+import { enhanceFormInjectedSymbol } from "./formInjected";
 import { enhanceManagedSymbol } from "./managed";
 import { withOnyxVModelDecorator } from "./vModel";
 
 const basePreview = createPreview({
-  argTypesEnhancers: [enhanceManagedSymbol],
+  argTypesEnhancers: [enhanceManagedSymbol, enhanceFormInjectedSymbol],
   parameters: {
     docs: {
       page: docsTemplate,

From c56271af1b9a54d4b20351b4567b917fe0dfb1cb Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Mon, 30 Sep 2024 18:54:35 +0200
Subject: [PATCH 14/24] update description

---
 packages/sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts
index 3898b1c22c..1ecdb610a6 100644
--- a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts
+++ b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts
@@ -7,8 +7,8 @@ import OnyxStepper from "../OnyxStepper/OnyxStepper.vue";
 import OnyxForm from "./OnyxForm.vue";
 
 /**
- * This component can be used in to wrap form components like OnyxInput/OnyxTextarea/OnyxWrapper.
- * Currently it handles injection of `required` and `disabled` states for sub-elements.
+ * This component can be used in to wrap form components like OnyxInput/OnyxTextarea/OnyxStepper.
+ * Currently it can be used to set all form elements to disabled.
  */
 const meta: Meta<typeof OnyxForm> = {
   title: "Form/Form",

From d1c8364ae5f712609b0cd61381039a894920fca1 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Mon, 30 Sep 2024 19:56:22 +0200
Subject: [PATCH 15/24] add unit test for form injection

---
 .../components/OnyxForm/OnyxForm.core.spec.ts | 97 +++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.spec.ts

diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.spec.ts b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.spec.ts
new file mode 100644
index 0000000000..5d8a341a84
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.spec.ts
@@ -0,0 +1,97 @@
+import { expect, it, vi } from "vitest";
+import { reactive, toValue } from "vue";
+import {
+  FORM_INJECTED_SYMBOL,
+  provideFormContext,
+  useFormContext,
+  type FORM_INJECTED,
+  type FormInjected,
+  type FormInjectedProps,
+} from "./OnyxForm.core";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let injected: any;
+
+vi.mock("vue", async (importOriginal) => {
+  const mod = await importOriginal<typeof import("vue")>();
+  return {
+    ...mod,
+    inject: () => injected,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    provide: (_: any, ctx: any) => (injected = ctx),
+  };
+});
+
+it.for([
+  {
+    formProps: { disabled: true },
+    localProps: { disabled: true },
+    expected: { disabled: true },
+  },
+  {
+    formProps: { disabled: false },
+    localProps: { disabled: true },
+    expected: { disabled: true },
+  },
+  {
+    formProps: { disabled: true },
+    localProps: { disabled: false },
+    expected: { disabled: false },
+  },
+  {
+    formProps: { disabled: false },
+    localProps: { disabled: false },
+    expected: { disabled: false },
+  },
+  {
+    formProps: { disabled: true },
+    localProps: { disabled: FORM_INJECTED_SYMBOL as FORM_INJECTED },
+    expected: { disabled: true },
+  },
+  {
+    formProps: { disabled: false },
+    localProps: { disabled: FORM_INJECTED_SYMBOL as FORM_INJECTED },
+    expected: { disabled: false },
+  },
+  {
+    formProps: undefined,
+    localProps: { disabled: FORM_INJECTED_SYMBOL as FORM_INJECTED },
+    expected: { disabled: false },
+  },
+  {
+    formProps: undefined,
+    localProps: { disabled: true },
+    expected: { disabled: true },
+  },
+  {
+    formProps: undefined,
+    localProps: { disabled: false },
+    expected: { disabled: false },
+  },
+])("it should derive expected state when correctly", ({ formProps, localProps, expected }) => {
+  provideFormContext(formProps);
+  const result = useFormContext(localProps);
+  Object.entries(expected).forEach(([key, value]) => {
+    const resultValue = toValue(result[key as keyof FormInjectedProps]);
+
+    expect(
+      resultValue,
+      `Expected "${value}", got "${resultValue}" for formProps "${formProps}" and localProps "${localProps}"`,
+    ).toBe(value);
+  });
+});
+
+it("should update when changed", async () => {
+  const formProps = reactive({ disabled: false });
+  provideFormContext(formProps);
+
+  const localProps = reactive({ disabled: FORM_INJECTED_SYMBOL as FormInjected<boolean> });
+  const { disabled } = useFormContext(localProps);
+  expect(disabled.value).toBe(false);
+
+  formProps.disabled = true;
+  localProps.disabled = true;
+  expect(disabled.value).toBe(true);
+  localProps.disabled = false;
+  expect(disabled.value).toBe(false);
+});

From 990b53981c1c20e08a0deb53c7e496591e5b7e57 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Tue, 1 Oct 2024 10:10:07 +0200
Subject: [PATCH 16/24] remove any's

---
 .../sit-onyx/src/components/OnyxForm/OnyxForm.core.spec.ts  | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.spec.ts b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.spec.ts
index 5d8a341a84..83a569a6c7 100644
--- a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.spec.ts
+++ b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.spec.ts
@@ -9,16 +9,14 @@ import {
   type FormInjectedProps,
 } from "./OnyxForm.core";
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let injected: any;
+let injected: (args: unknown[]) => void;
 
 vi.mock("vue", async (importOriginal) => {
   const mod = await importOriginal<typeof import("vue")>();
   return {
     ...mod,
     inject: () => injected,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    provide: (_: any, ctx: any) => (injected = ctx),
+    provide: (_: symbol, ctx: (...args: unknown[]) => void) => (injected = ctx),
   };
 });
 

From bcad4dd9c36c52b0718dc816b1d7afb000b4e3f4 Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan_leo.carle@mail.schwarz>
Date: Tue, 1 Oct 2024 14:33:10 +0200
Subject: [PATCH 17/24] Update
 packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue

Co-authored-by: Lars Rickert <lars.rickert@mail.schwarz>
---
 packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue
index c5c7f114ce..9c3872542f 100644
--- a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue
+++ b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue
@@ -16,6 +16,7 @@ provideFormContext(props);
 
 const { densityClass } = useDensity(props);
 </script>
+
 <template>
   <form
     :class="{

From 15dfb319e899200643c5776b95cbcce2e410ae3d Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Tue, 1 Oct 2024 14:37:57 +0200
Subject: [PATCH 18/24] chore: implement review feedback

---
 packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.ts  | 6 +-----
 .../sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts    | 2 +-
 packages/sit-onyx/src/components/OnyxSelect/types.ts        | 6 +-----
 .../src/components/OnyxSelectInput/OnyxSelectInput.vue      | 4 ++--
 4 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.ts b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.ts
index afb2b1b54f..650b0bfcdc 100644
--- a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.ts
+++ b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.ts
@@ -53,11 +53,7 @@ const createCompute = <
     if (prop != undefined && prop !== FORM_INJECTED_SYMBOL) {
       return prop;
     }
-    const formProp = formProps?.[key];
-    if (formProp !== undefined) {
-      return formProp;
-    }
-    return defaultValue;
+    return formProps?.[key] ?? defaultValue;
   });
 
 const createFormInjectionContext =
diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts
index 1ecdb610a6..cd61371acd 100644
--- a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts
+++ b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts
@@ -8,7 +8,7 @@ import OnyxForm from "./OnyxForm.vue";
 
 /**
  * This component can be used in to wrap form components like OnyxInput/OnyxTextarea/OnyxStepper.
- * Currently it can be used to set all form elements to disabled.
+ * It allows for controlling the disabled state of all child form components.
  */
 const meta: Meta<typeof OnyxForm> = {
   title: "Form/Form",
diff --git a/packages/sit-onyx/src/components/OnyxSelect/types.ts b/packages/sit-onyx/src/components/OnyxSelect/types.ts
index 8e43617d16..f3c7fc71e0 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/types.ts
+++ b/packages/sit-onyx/src/components/OnyxSelect/types.ts
@@ -71,17 +71,13 @@ export type SelectModelValueProps<TValue extends SelectOptionValue> =
 export type OnyxSelectProps<TValue extends SelectOptionValue = SelectOptionValue> = DensityProp &
   SelectModelValueProps<TValue> &
   SelectSearchProps &
-  Omit<OnyxSelectInputProps, "density" | "modelValue" | "showFocus" | "disabled" | "readonly"> &
+  Omit<OnyxSelectInputProps, "density" | "modelValue" | "showFocus" | "disabled"> &
   AutofocusProp &
   Pick<BaseSelectOption, "truncation"> & {
     /**
      * Whether the select should be disabled.
      */
     disabled?: FormInjected<boolean>;
-    /**
-     * Whether the select should be readonly.
-     */
-    readonly?: boolean;
     /**
      * Label that will be shown in the input of OnyxSelect.
      * If unset, will be managed internally by comparing `modelValue` with `options`.
diff --git a/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue b/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
index 3cc62231d8..42a2aa97ae 100644
--- a/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
+++ b/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
@@ -8,13 +8,13 @@ import { injectI18n } from "../../i18n";
 import type { SelectOptionValue } from "../../types";
 import { useRootAttrs } from "../../utils/attrs";
 import OnyxBadge from "../OnyxBadge/OnyxBadge.vue";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 import OnyxFormElement from "../OnyxFormElement/OnyxFormElement.vue";
 import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import OnyxTooltip from "../OnyxTooltip/OnyxTooltip.vue";
 import type { OnyxSelectInputProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 defineOptions({ inheritAttrs: false });
 const { rootAttrs, restAttrs } = useRootAttrs();
@@ -182,7 +182,7 @@ const blockTyping = (event: KeyboardEvent) => {
             type="button"
             :aria-label="t('select.toggleDropDown')"
             tabindex="-1"
-            :disabled="disabled || props.loading"
+            :disabled="disabled || props.readonly || props.loading"
           >
             <OnyxIcon :icon="chevronDownUp" />
           </button>

From ed5442d50b2b72f194e786270d134875759607bc Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Tue, 1 Oct 2024 15:04:32 +0200
Subject: [PATCH 19/24] impl createSymbolArgTypeEnhancer

---
 packages/sit-onyx/.storybook/formInjected.ts | 54 ++----------------
 packages/sit-onyx/.storybook/managed.ts      | 60 +++-----------------
 packages/storybook-utils/src/sbType.ts       | 52 ++++++++++++++++-
 3 files changed, 66 insertions(+), 100 deletions(-)

diff --git a/packages/sit-onyx/.storybook/formInjected.ts b/packages/sit-onyx/.storybook/formInjected.ts
index 442884c929..51a9efb6f9 100644
--- a/packages/sit-onyx/.storybook/formInjected.ts
+++ b/packages/sit-onyx/.storybook/formInjected.ts
@@ -1,49 +1,7 @@
-import { walkTree } from "@sit-onyx/storybook-utils";
-import type {
-  ArgTypesEnhancer,
-  InputType,
-  SBType,
-  StrictInputType,
-} from "storybook/internal/types";
+import { createSymbolArgTypeEnhancer } from "@sit-onyx/storybook-utils";
 
-const SB_TYPE_CONTROL_MAP: Partial<Record<SBType["name"], InputType["control"]>> = {
-  boolean: { type: "boolean" },
-  string: { type: "text" },
-  number: { type: "number" },
-};
-
-const getFormInjectedParent = (inputType?: StrictInputType) => {
-  if (!inputType?.type || inputType.table?.defaultValue?.summary !== "FORM_INJECTED_SYMBOL") {
-    return undefined;
-  }
-
-  return walkTree(inputType.type, (elem, parent) =>
-    elem.name === "symbol" || (elem.name === "other" && elem.value === "unique symbol")
-      ? parent
-      : undefined,
-  );
-};
-
-export const enhanceFormInjectedSymbol: ArgTypesEnhancer = (context) => {
-  Object.values(context.argTypes)
-    .map((argType) => {
-      const parent = getFormInjectedParent(argType);
-      return { argType, parent };
-    })
-    .filter(({ parent }) => parent)
-    .forEach(({ argType, parent }) => {
-      const firstAvailableControl = walkTree(
-        parent || argType.type!,
-        (sb) => SB_TYPE_CONTROL_MAP[sb.name],
-      );
-
-      if (firstAvailableControl && argType.table?.defaultValue) {
-        argType.control = firstAvailableControl;
-        argType.table.defaultValue.detail =
-          "If no value (or `undefined`) is provided, `FORM_INJECTED_SYMBOL` is the internal default value for this prop.\n" +
-          "In that case the props value will be derived from it's parent form (if it exists).\n";
-      }
-    });
-
-  return context.argTypes;
-};
+export const enhanceFormInjectedSymbol = createSymbolArgTypeEnhancer(
+  "FORM_INJECTED_SYMBOL",
+  "If no value (or `undefined`) is provided, `FORM_INJECTED_SYMBOL` is the internal default value for this prop.\n" +
+    "In that case the props value will be derived from it's parent form (if it exists).\n",
+);
diff --git a/packages/sit-onyx/.storybook/managed.ts b/packages/sit-onyx/.storybook/managed.ts
index c40fbd397e..c02513b439 100644
--- a/packages/sit-onyx/.storybook/managed.ts
+++ b/packages/sit-onyx/.storybook/managed.ts
@@ -1,51 +1,9 @@
-import { walkTree } from "@sit-onyx/storybook-utils";
-import type {
-  ArgTypesEnhancer,
-  InputType,
-  SBType,
-  StrictInputType,
-} from "storybook/internal/types";
-
-const SB_TYPE_CONTROL_MAP: Partial<Record<SBType["name"], InputType["control"]>> = {
-  boolean: { type: "boolean" },
-  string: { type: "text" },
-  number: { type: "number" },
-};
-
-const getManagedParent = (inputType?: StrictInputType) => {
-  if (!inputType?.type || inputType.table?.defaultValue?.summary !== "MANAGED_SYMBOL") {
-    return undefined;
-  }
-
-  return walkTree(inputType.type, (elem, parent) =>
-    elem.name === "symbol" || (elem.name === "other" && elem.value === "unique symbol")
-      ? parent
-      : undefined,
-  );
-};
-
-export const enhanceManagedSymbol: ArgTypesEnhancer = (context) => {
-  Object.values(context.argTypes)
-    .map((argType) => {
-      const parent = getManagedParent(argType);
-      return { argType, parent };
-    })
-    .filter(({ parent }) => parent)
-    .forEach(({ argType, parent }) => {
-      const firstAvailableControl = walkTree(
-        parent || argType.type!,
-        (sb) => SB_TYPE_CONTROL_MAP[sb.name],
-      );
-
-      if (firstAvailableControl && argType.table?.defaultValue) {
-        argType.control = firstAvailableControl;
-        argType.table.defaultValue.detail =
-          "If no value (or `undefined`) is passed, `MANAGED_SYMBOL` is the internal default value for this prop.\n" +
-          "It signals the component that the prop is managed and it's state tracked internally.\n" +
-          "So in that case no prop binding or `v-model` is necessary.\n" +
-          "Updates for the prop will still be emitted.\n";
-      }
-    });
-
-  return context.argTypes;
-};
+import { createSymbolArgTypeEnhancer } from "@sit-onyx/storybook-utils";
+
+export const enhanceManagedSymbol = createSymbolArgTypeEnhancer(
+  "MANAGED_SYMBOL",
+  "If no value (or `undefined`) is passed, `MANAGED_SYMBOL` is the internal default value for this prop.\n" +
+    "It signals the component that the prop is managed and it's state tracked internally.\n" +
+    "So in that case no prop binding or `v-model` is necessary.\n" +
+    "Updates for the prop will still be emitted.\n",
+);
diff --git a/packages/storybook-utils/src/sbType.ts b/packages/storybook-utils/src/sbType.ts
index 2143b741a5..1e7cb0a182 100644
--- a/packages/storybook-utils/src/sbType.ts
+++ b/packages/storybook-utils/src/sbType.ts
@@ -1,4 +1,9 @@
-import type { SBType } from "storybook/internal/types";
+import type {
+  ArgTypesEnhancer,
+  InputType,
+  SBType,
+  StrictInputType,
+} from "storybook/internal/types";
 
 /**
  * Call a function `cb` for every type node in the storybook type tree.
@@ -33,3 +38,48 @@ export const walkTree = <TValue>(
     );
   }
 };
+
+const SB_TYPE_CONTROL_MAP: Partial<Record<SBType["name"], InputType["control"]>> = {
+  boolean: { type: "boolean" },
+  string: { type: "text" },
+  number: { type: "number" },
+};
+
+const getFormInjectedParent = (symbol: string, inputType?: StrictInputType) => {
+  if (!inputType?.type || inputType.table?.defaultValue?.summary !== symbol) {
+    return undefined;
+  }
+
+  return walkTree(inputType.type, (elem, parent) =>
+    elem.name === "symbol" || (elem.name === "other" && elem.value === "unique symbol")
+      ? parent
+      : undefined,
+  );
+};
+
+export const createSymbolArgTypeEnhancer = (
+  symbol: string,
+  description: string,
+): ArgTypesEnhancer => {
+  return (context) => {
+    Object.values(context.argTypes)
+      .map((argType) => {
+        const parent = getFormInjectedParent(symbol, argType);
+        return { argType, parent };
+      })
+      .filter(({ parent }) => parent)
+      .forEach(({ argType, parent }) => {
+        const firstAvailableControl = walkTree(
+          parent || argType.type!,
+          (sb) => SB_TYPE_CONTROL_MAP[sb.name],
+        );
+
+        if (firstAvailableControl && argType.table?.defaultValue) {
+          argType.control = firstAvailableControl;
+          argType.table.defaultValue.detail = description;
+        }
+      });
+
+    return context.argTypes;
+  };
+};

From 0433fe0255764ba8dbd31f11d6e0a6fdec6be9a4 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Tue, 1 Oct 2024 15:09:13 +0200
Subject: [PATCH 20/24] add description and example

---
 packages/storybook-utils/src/sbType.ts | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/packages/storybook-utils/src/sbType.ts b/packages/storybook-utils/src/sbType.ts
index 1e7cb0a182..b7d9d04020 100644
--- a/packages/storybook-utils/src/sbType.ts
+++ b/packages/storybook-utils/src/sbType.ts
@@ -57,6 +57,25 @@ const getFormInjectedParent = (symbol: string, inputType?: StrictInputType) => {
   );
 };
 
+/**
+ * Can be used to create an `ArgTypesEnhancer` which matches a Symbol that is used as default Prop.
+ * When it matches the passed  description text will be set.
+ *
+ * @param symbol description of the symbol that should be matched.
+ * @param description the description text that should be shown in Storybook for this prop.
+ * @returns An `ArgTypesEnhancer` which can be passed to storybook.
+ *
+ * @example
+ * ```ts
+ * import { createSymbolArgTypeEnhancer } from "@sit-onyx/storybook-utils";
+ *
+ * export const enhanceFormInjectedSymbol = createSymbolArgTypeEnhancer(
+ *   "FORM_INJECTED_SYMBOL",
+ *   "If no value (or `undefined`) is provided, `FORM_INJECTED_SYMBOL` is the internal default value for this prop.\n" +
+ *     "In that case the props value will be derived from it's parent form (if it exists).\n",
+ * );
+ * ```
+ */
 export const createSymbolArgTypeEnhancer = (
   symbol: string,
   description: string,

From 43d0e6930e68e7458ab5df37de1407a08267dc6c Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Tue, 1 Oct 2024 15:10:14 +0200
Subject: [PATCH 21/24] docs(changeset): New createSymbolArgTypeEnhancer which
 adds description text to symbols used as default props

---
 .changeset/sharp-news-bake.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/sharp-news-bake.md

diff --git a/.changeset/sharp-news-bake.md b/.changeset/sharp-news-bake.md
new file mode 100644
index 0000000000..646070ec56
--- /dev/null
+++ b/.changeset/sharp-news-bake.md
@@ -0,0 +1,5 @@
+---
+"@sit-onyx/storybook-utils": minor
+---
+
+New createSymbolArgTypeEnhancer which adds description text to symbols used as default props

From 9a01624598d5b1398971b24736e3838d3ee55d49 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Tue, 1 Oct 2024 15:10:59 +0200
Subject: [PATCH 22/24] docs(changeset): Implement OnyxForm which allows
 setting of disabled state for all child form elements

---
 .changeset/beige-swans-add.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/beige-swans-add.md

diff --git a/.changeset/beige-swans-add.md b/.changeset/beige-swans-add.md
new file mode 100644
index 0000000000..e47ae3ec4f
--- /dev/null
+++ b/.changeset/beige-swans-add.md
@@ -0,0 +1,5 @@
+---
+"sit-onyx": minor
+---
+
+Implement OnyxForm which allows setting of disabled state for all child form elements

From ebd8a1bda95b63920eabfd34250c00f0dc93a217 Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Tue, 1 Oct 2024 15:12:49 +0200
Subject: [PATCH 23/24] review: remove getter

---
 packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.ts b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.ts
index 650b0bfcdc..735502ef3d 100644
--- a/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.ts
+++ b/packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.ts
@@ -61,9 +61,7 @@ const createFormInjectionContext =
   (
     props: Reactive<LocalProps>,
   ): { [TKey in keyof FormInjectedProps]: Ref<FormInjectedProps[TKey]> } => ({
-    get disabled() {
-      return createCompute(formProps, props, "disabled", false);
-    },
+    disabled: createCompute(formProps, props, "disabled", false),
   });
 
 export const provideFormContext = (formProps: Reactive<FormInjectedProps> | undefined) =>

From 8445b570ee04de3ea240b0705d5e213cd5b1396d Mon Sep 17 00:00:00 2001
From: Jonathan Carle <jonathan_leo.carle@mail.schwarz>
Date: Tue, 1 Oct 2024 17:17:56 +0200
Subject: [PATCH 24/24] fix prettier

---
 packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue      | 2 +-
 packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue  | 2 +-
 .../src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue      | 2 +-
 packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue        | 2 +-
 .../sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue   | 2 +-
 packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue      | 2 +-
 packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue    | 2 +-
 packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue      | 2 +-
 packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue  | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue b/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue
index 71c6e967c2..7f2cc410e6 100644
--- a/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue
+++ b/packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { computed, ref, type ComponentInstance } from "vue";
 import { useDensity } from "../../composables/density";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxRipple from "../OnyxRipple/OnyxRipple.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxButtonProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxButtonProps>(), {
   disabled: FORM_INJECTED_SYMBOL,
diff --git a/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue b/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue
index 6d2f8f36c9..8877373e7a 100644
--- a/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue
+++ b/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue
@@ -5,10 +5,10 @@ import { useRequired } from "../../composables/required";
 import { useCustomValidity } from "../../composables/useCustomValidity";
 import type { SelectOptionValue } from "../../types";
 import OnyxErrorTooltip from "../OnyxErrorTooltip/OnyxErrorTooltip.vue";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxCheckboxProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxCheckboxProps<TValue>>(), {
   modelValue: false,
diff --git a/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue b/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue
index 59ef3c501d..55cc85f1b9 100644
--- a/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue
+++ b/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue
@@ -5,9 +5,9 @@ import { useDensity } from "../../composables/density";
 import { injectI18n } from "../../i18n";
 import type { SelectOptionValue } from "../../types";
 import OnyxCheckbox from "../OnyxCheckbox/OnyxCheckbox.vue";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 import OnyxHeadline from "../OnyxHeadline/OnyxHeadline.vue";
 import type { OnyxCheckboxGroupProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxCheckboxGroupProps<TValue>>(), {
   modelValue: () => [],
diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
index d1fd08b02e..fea30ace11 100644
--- a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
+++ b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
@@ -2,11 +2,11 @@
 import { computed } from "vue";
 import { useDensity } from "../../composables/density";
 import { useCustomValidity } from "../../composables/useCustomValidity";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 import OnyxFormElement from "../OnyxFormElement/OnyxFormElement.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxInputProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxInputProps>(), {
   modelValue: "",
diff --git a/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue b/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue
index 52382161c8..6cd68a9504 100644
--- a/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue
+++ b/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue
@@ -3,10 +3,10 @@ import { useId } from "vue";
 import { useDensity } from "../../composables/density";
 import { useRequired } from "../../composables/required";
 import type { SelectOptionValue } from "../../types";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 import OnyxHeadline from "../OnyxHeadline/OnyxHeadline.vue";
 import OnyxRadioButton from "../OnyxRadioButton/OnyxRadioButton.vue";
 import type { OnyxRadioGroupProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxRadioGroupProps<TValue>>(), {
   name: () => useId() ?? "", // the name must be globally unique
diff --git a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
index 2fca464e33..efb63a2ca6 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
+++ b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
@@ -12,13 +12,13 @@ import type { SelectOptionValue } from "../../types";
 import { groupByKey } from "../../utils/objects";
 import { normalizedIncludes } from "../../utils/strings";
 import OnyxEmpty from "../OnyxEmpty/OnyxEmpty.vue";
+import { FORM_INJECTED_SYMBOL } from "../OnyxForm/OnyxForm.core";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxMiniSearch from "../OnyxMiniSearch/OnyxMiniSearch.vue";
 import OnyxSelectInput from "../OnyxSelectInput/OnyxSelectInput.vue";
 import type { OnyxSelectInputProps } from "../OnyxSelectInput/types";
 import OnyxSelectOption from "../OnyxSelectOption/OnyxSelectOption.vue";
 import type { OnyxSelectProps, SelectOption } from "./types";
-import { FORM_INJECTED_SYMBOL } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxSelectProps<TValue>>(), {
   loading: false,
diff --git a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
index 8d982f6bd0..51fe01fd37 100644
--- a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
+++ b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
@@ -5,12 +5,12 @@ import { computed, ref } from "vue";
 import { useDensity } from "../../composables/density";
 import { useCustomValidity } from "../../composables/useCustomValidity";
 import { injectI18n } from "../../i18n";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 import OnyxFormElement from "../OnyxFormElement/OnyxFormElement.vue";
 import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxStepperProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxStepperProps>(), {
   step: 1,
diff --git a/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue b/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue
index 4605e52d73..9d2f1a5220 100644
--- a/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue
+++ b/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue
@@ -6,11 +6,11 @@ import { useDensity } from "../../composables/density";
 import { useRequired } from "../../composables/required";
 import { useCustomValidity } from "../../composables/useCustomValidity";
 import OnyxErrorTooltip from "../OnyxErrorTooltip/OnyxErrorTooltip.vue";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxSwitchProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxSwitchProps>(), {
   modelValue: false,
diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
index 737f43314a..c9c853336c 100644
--- a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
+++ b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
@@ -2,10 +2,10 @@
 import { computed } from "vue";
 import { useDensity } from "../../composables/density";
 import { useCustomValidity } from "../../composables/useCustomValidity";
+import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 import OnyxFormElement from "../OnyxFormElement/OnyxFormElement.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxTextareaProps } from "./types";
-import { FORM_INJECTED_SYMBOL, useFormContext } from "../OnyxForm/OnyxForm.core";
 
 const props = withDefaults(defineProps<OnyxTextareaProps>(), {
   modelValue: "",