From c0e48f3a79090b4a4ad049a12ed95478eff947ef Mon Sep 17 00:00:00 2001
From: TkDodo <dominik.dorfmeister@sentry.io>
Date: Thu, 26 Feb 2026 10:26:36 +0100
Subject: [PATCH 1/4] ref: better AppForm

---
 static/app/components/core/form/scrapsForm.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/static/app/components/core/form/scrapsForm.tsx b/static/app/components/core/form/scrapsForm.tsx
index c18027ea6af34d..c831d5fe70a9be 100644
--- a/static/app/components/core/form/scrapsForm.tsx
+++ b/static/app/components/core/form/scrapsForm.tsx
@@ -3,6 +3,7 @@ import {
   createFormHook,
   formOptions,
   revalidateLogic,
+  type AnyFormApi,
   type DeepKeys,
 } from '@tanstack/react-form';
 
@@ -55,7 +56,7 @@ const {useAppForm} = createFormHook({
   formComponents: {
     FieldGroup,
     SubmitButton,
-    FormWrapper,
+    AppForm,
   },
   fieldContext,
   formContext,
@@ -78,6 +79,14 @@ function SubmitButton(props: ButtonProps) {
   );
 }
 
+function AppForm({children, form}: {children: React.ReactNode; form: AnyFormApi}) {
+  return (
+    <formContext.Provider value={form}>
+      <FormWrapper>{children}</FormWrapper>
+    </formContext.Provider>
+  );
+}
+
 function FormWrapper({children}: {children: React.ReactNode}) {
   const form = useFormContext();
 

From b128cea1e4b53c2dc943132eb986c3b8856cace2 Mon Sep 17 00:00:00 2001
From: TkDodo <dominik.dorfmeister@sentry.io>
Date: Thu, 26 Feb 2026 10:54:57 +0100
Subject: [PATCH 2/4] ref: unify FormWrapper and AppForm

---
 .../core/form/field/autoSaveField.tsx         |   6 +-
 .../core/form/field/baseField.spec.tsx        |   4 +-
 .../core/form/field/passwordField.spec.tsx    |   2 +-
 .../core/form/field/rangeField.spec.tsx       |   2 +-
 .../core/form/field/selectField.spec.tsx      |  16 +-
 .../core/form/field/switchField.spec.tsx      |   2 +-
 .../core/form/field/textAreaField.spec.tsx    |   2 +-
 .../app/components/core/form/form.stories.tsx | 376 +++++++++---------
 .../customCommitsResolutionModal.tsx          | 100 +++--
 .../views/settings/account/accountEmails.tsx  |  44 +-
 .../views/settings/account/passwordForm.tsx   | 100 +++--
 .../authTokenDetails.tsx                      |  64 ++-
 .../organizationAuthTokens/newAuthToken.tsx   |  56 ++-
 .../organizationSettingsForm.tsx              |  93 ++---
 .../organizationSecurityAndPrivacy/index.tsx  | 142 ++++---
 .../organizationTeams/teamSettings/index.tsx  | 112 +++---
 16 files changed, 548 insertions(+), 573 deletions(-)

diff --git a/static/app/components/core/form/field/autoSaveField.tsx b/static/app/components/core/form/field/autoSaveField.tsx
index a7663daab88557..eb17d4634fa932 100644
--- a/static/app/components/core/form/field/autoSaveField.tsx
+++ b/static/app/components/core/form/field/autoSaveField.tsx
@@ -231,11 +231,9 @@ export function AutoSaveField<
   });
 
   return (
-    <form.AppForm>
+    <form.AppForm form={form as never}>
       <AutoSaveContextProvider value={{status: mutation.status, resetOnErrorRef}}>
-        <form.FormWrapper>
-          <form.AppField name={name}>{field => children(field as never)}</form.AppField>
-        </form.FormWrapper>
+        <form.AppField name={name}>{field => children(field as never)}</form.AppField>
       </AutoSaveContextProvider>
     </form.AppForm>
   );
diff --git a/static/app/components/core/form/field/baseField.spec.tsx b/static/app/components/core/form/field/baseField.spec.tsx
index dde85abf5bd02a..1ba6a7632d8743 100644
--- a/static/app/components/core/form/field/baseField.spec.tsx
+++ b/static/app/components/core/form/field/baseField.spec.tsx
@@ -22,7 +22,7 @@ function TestForm({label, hintText, required, defaultValue, validator}: TestForm
   });
 
   return (
-    <form.AppForm>
+    <form.AppForm form={form}>
       <form.AppField name="testField">
         {field => (
           <field.Layout.Row label={label} hintText={hintText} required={required}>
@@ -49,7 +49,7 @@ function CompactTestForm({label, hintText, layout = 'Row'}: CompactTestFormProps
   });
 
   return (
-    <form.AppForm>
+    <form.AppForm form={form}>
       <form.AppField name="testField">
         {field => {
           const LayoutComponent = field.Layout[layout];
diff --git a/static/app/components/core/form/field/passwordField.spec.tsx b/static/app/components/core/form/field/passwordField.spec.tsx
index 571de11aaf1104..01c2ff10be2316 100644
--- a/static/app/components/core/form/field/passwordField.spec.tsx
+++ b/static/app/components/core/form/field/passwordField.spec.tsx
@@ -15,7 +15,7 @@ function TestForm({defaultValue = '', disabled, label = 'Password'}: TestFormPro
   });
 
   return (
-    <form.AppForm>
+    <form.AppForm form={form}>
       <form.AppField name="password">
         {field => (
           <field.Layout.Row label={label}>
diff --git a/static/app/components/core/form/field/rangeField.spec.tsx b/static/app/components/core/form/field/rangeField.spec.tsx
index 2c2a55f65c7a25..64dec92179ad21 100644
--- a/static/app/components/core/form/field/rangeField.spec.tsx
+++ b/static/app/components/core/form/field/rangeField.spec.tsx
@@ -35,7 +35,7 @@ function TestForm({
   });
 
   return (
-    <form.AppForm>
+    <form.AppForm form={form}>
       <form.AppField name="volume">
         {field => (
           <field.Layout.Row label={label} hintText={hintText} required={required}>
diff --git a/static/app/components/core/form/field/selectField.spec.tsx b/static/app/components/core/form/field/selectField.spec.tsx
index 48d91b8377b7f6..bbf03dceb099bf 100644
--- a/static/app/components/core/form/field/selectField.spec.tsx
+++ b/static/app/components/core/form/field/selectField.spec.tsx
@@ -39,7 +39,7 @@ function TestForm({
   });
 
   return (
-    <form.AppForm>
+    <form.AppForm form={form}>
       <form.AppField name="fruit">
         {field => (
           <field.Layout.Row label={label} hintText={hintText} required={required}>
@@ -102,7 +102,7 @@ describe('SelectField', () => {
         });
 
         return (
-          <form.AppForm>
+          <form.AppForm form={form}>
             <form.AppField name="fruit">
               {field => (
                 <field.Select
@@ -132,7 +132,7 @@ describe('SelectField', () => {
         });
 
         return (
-          <form.AppForm>
+          <form.AppForm form={form}>
             <form.AppField name="tags">
               {field => (
                 <field.Select
@@ -163,7 +163,7 @@ describe('SelectField', () => {
         });
 
         return (
-          <form.AppForm>
+          <form.AppForm form={form}>
             <form.AppField name="tags">
               {field => (
                 // @ts-expect-error value should be string[] when multiple is true
@@ -189,7 +189,7 @@ describe('SelectField', () => {
         });
 
         return (
-          <form.AppForm>
+          <form.AppForm form={form}>
             <form.AppField name="fruit">
               {field => (
                 // @ts-expect-error value should be string when multiple is false
@@ -214,7 +214,7 @@ describe('SelectField', () => {
         });
 
         return (
-          <form.AppForm>
+          <form.AppForm form={form}>
             <form.AppField name="fruit">
               {field => (
                 <field.Select
@@ -242,7 +242,7 @@ describe('SelectField', () => {
         });
 
         return (
-          <form.AppForm>
+          <form.AppForm form={form}>
             <form.AppField name="fruit">
               {field => (
                 <field.Select
@@ -544,7 +544,7 @@ function MultiTestForm({label, defaultValue = [], disabled}: MultiTestFormProps)
   });
 
   return (
-    <form.AppForm>
+    <form.AppForm form={form}>
       <form.AppField name="tags">
         {field => (
           <field.Layout.Row label={label}>
diff --git a/static/app/components/core/form/field/switchField.spec.tsx b/static/app/components/core/form/field/switchField.spec.tsx
index 08433a865f6332..140c41505dac92 100644
--- a/static/app/components/core/form/field/switchField.spec.tsx
+++ b/static/app/components/core/form/field/switchField.spec.tsx
@@ -36,7 +36,7 @@ function TestForm({
   });
 
   return (
-    <form.AppForm>
+    <form.AppForm form={form}>
       <form.AppField name="enabled">
         {field => (
           <field.Layout.Row label={label} hintText={hintText} required={required}>
diff --git a/static/app/components/core/form/field/textAreaField.spec.tsx b/static/app/components/core/form/field/textAreaField.spec.tsx
index 9ec1fa33d52b78..d4e1ed0d1fb49e 100644
--- a/static/app/components/core/form/field/textAreaField.spec.tsx
+++ b/static/app/components/core/form/field/textAreaField.spec.tsx
@@ -31,7 +31,7 @@ function TestForm({
   });
 
   return (
-    <form.AppForm>
+    <form.AppForm form={form}>
       <form.AppField name="bio">
         {field => (
           <field.Layout.Row label={label} hintText={hintText} required={required}>
diff --git a/static/app/components/core/form/form.stories.tsx b/static/app/components/core/form/form.stories.tsx
index 4403e65dd15ac1..d7ccb626e89b2e 100644
--- a/static/app/components/core/form/form.stories.tsx
+++ b/static/app/components/core/form/form.stories.tsx
@@ -287,147 +287,145 @@ function BasicForm() {
   }
 
   return (
-    <form.AppForm>
-      <form.FormWrapper>
-        <form.FieldGroup title="Peronal Information">
-          <form.AppField name="firstName">
-            {field => (
-              <field.Layout.Row label="First Name:" hintText="Your given name">
-                <field.Input
-                  value={field.state.value ?? ''}
-                  onChange={field.handleChange}
-                />
-              </field.Layout.Row>
-            )}
-          </form.AppField>
-          <form.AppField name="lastName">
-            {field => (
-              <field.Layout.Row label="Last Name:" hintText="Your family name" required>
-                <field.Input
-                  value={field.state.value}
-                  onChange={field.handleChange}
-                  disabled="Can't touch this"
-                />
-              </field.Layout.Row>
-            )}
-          </form.AppField>
-          <form.AppField name="age">
-            {field => (
-              <field.Layout.Row label="Age:" hintText="Minimum 13" required>
-                <field.Number value={field.state.value} onChange={field.handleChange} />
-              </field.Layout.Row>
-            )}
-          </form.AppField>
-          <form.AppField name="notifications">
-            {field => (
-              <field.Layout.Row
-                label="Email Notifications:"
-                hintText="Receive email updates"
+    <form.AppForm form={form}>
+      <form.FieldGroup title="Peronal Information">
+        <form.AppField name="firstName">
+          {field => (
+            <field.Layout.Row label="First Name:" hintText="Your given name">
+              <field.Input
+                value={field.state.value ?? ''}
+                onChange={field.handleChange}
+              />
+            </field.Layout.Row>
+          )}
+        </form.AppField>
+        <form.AppField name="lastName">
+          {field => (
+            <field.Layout.Row label="Last Name:" hintText="Your family name" required>
+              <field.Input
+                value={field.state.value}
+                onChange={field.handleChange}
+                disabled="Can't touch this"
+              />
+            </field.Layout.Row>
+          )}
+        </form.AppField>
+        <form.AppField name="age">
+          {field => (
+            <field.Layout.Row label="Age:" hintText="Minimum 13" required>
+              <field.Number value={field.state.value} onChange={field.handleChange} />
+            </field.Layout.Row>
+          )}
+        </form.AppField>
+        <form.AppField name="notifications">
+          {field => (
+            <field.Layout.Row
+              label="Email Notifications:"
+              hintText="Receive email updates"
+            >
+              <field.Switch
+                checked={field.state.value ?? false}
+                onChange={field.handleChange}
+              />
+            </field.Layout.Row>
+          )}
+        </form.AppField>
+        <form.AppField name="bio">
+          {field => (
+            <field.Layout.Row label="Bio:" hintText="Tell us about yourself">
+              <field.TextArea
+                value={field.state.value ?? ''}
+                onChange={field.handleChange}
+              />
+            </field.Layout.Row>
+          )}
+        </form.AppField>
+        <form.AppField name="volume">
+          {field => (
+            <field.Layout.Row label="Volume:" hintText="Adjust the volume level">
+              <field.Range
+                value={field.state.value ?? 50}
+                onChange={field.handleChange}
+                min={0}
+                max={100}
+                step={10}
+              />
+            </field.Layout.Row>
+          )}
+        </form.AppField>
+        <form.AppField name="tags">
+          {field => (
+            <field.Layout.Row label="Tags:" hintText="Select multiple tags">
+              <field.Select
+                multiple
+                value={field.state.value ?? []}
+                onChange={field.handleChange}
+                options={TAG_OPTIONS}
+              />
+            </field.Layout.Row>
+          )}
+        </form.AppField>
+        <form.Subscribe selector={state => state.values.age === 42}>
+          {showSecret =>
+            showSecret ? (
+              <form.AppField
+                name="secret"
+                validators={{
+                  onDynamic: z
+                    .string('Secret is required when age is 42')
+                    .min(1, 'Secret is required when age is 42'),
+                }}
               >
-                <field.Switch
-                  checked={field.state.value ?? false}
-                  onChange={field.handleChange}
-                />
-              </field.Layout.Row>
-            )}
-          </form.AppField>
-          <form.AppField name="bio">
-            {field => (
-              <field.Layout.Row label="Bio:" hintText="Tell us about yourself">
-                <field.TextArea
-                  value={field.state.value ?? ''}
-                  onChange={field.handleChange}
-                />
-              </field.Layout.Row>
-            )}
-          </form.AppField>
-          <form.AppField name="volume">
-            {field => (
-              <field.Layout.Row label="Volume:" hintText="Adjust the volume level">
-                <field.Range
-                  value={field.state.value ?? 50}
-                  onChange={field.handleChange}
-                  min={0}
-                  max={100}
-                  step={10}
-                />
-              </field.Layout.Row>
-            )}
-          </form.AppField>
-          <form.AppField name="tags">
-            {field => (
-              <field.Layout.Row label="Tags:" hintText="Select multiple tags">
-                <field.Select
-                  multiple
-                  value={field.state.value ?? []}
-                  onChange={field.handleChange}
-                  options={TAG_OPTIONS}
-                />
-              </field.Layout.Row>
-            )}
-          </form.AppField>
-          <form.Subscribe selector={state => state.values.age === 42}>
-            {showSecret =>
-              showSecret ? (
-                <form.AppField
-                  name="secret"
-                  validators={{
-                    onDynamic: z
-                      .string('Secret is required when age is 42')
-                      .min(1, 'Secret is required when age is 42'),
-                  }}
-                >
-                  {field => (
-                    <field.Layout.Row
-                      label="Secret:"
-                      hintText="Secret is required when age is 42"
-                      required
-                    >
-                      <field.Input
-                        value={field.state.value ?? ''}
-                        onChange={field.handleChange}
-                      />
-                    </field.Layout.Row>
-                  )}
-                </form.AppField>
-              ) : null
-            }
-          </form.Subscribe>
-        </form.FieldGroup>
-
-        <form.FieldGroup title="Address Information">
-          <form.AppField name="address.street">
-            {field => (
-              <field.Layout.Row label="Street:" required>
-                <field.Input value={field.state.value} onChange={field.handleChange} />
-              </field.Layout.Row>
-            )}
-          </form.AppField>
-          <form.AppField name="address.city">
-            {field => (
-              <field.Layout.Row label="City:" required>
-                <field.Input value={field.state.value} onChange={field.handleChange} />
-              </field.Layout.Row>
-            )}
-          </form.AppField>
-          <form.AppField name="address.country">
-            {field => (
-              <field.Layout.Row label="Country:" required>
-                <field.Select
-                  value={field.state.value}
-                  onChange={field.handleChange}
-                  options={COUNTRY_OPTIONS}
-                />
-              </field.Layout.Row>
-            )}
-          </form.AppField>
-        </form.FieldGroup>
-
-        <Flex gap="md" justify="end">
-          <Button onClick={() => form.reset()}>Reset</Button>
-          <form.SubmitButton>Submit</form.SubmitButton>
-        </Flex>
-      </form.FormWrapper>
+                {field => (
+                  <field.Layout.Row
+                    label="Secret:"
+                    hintText="Secret is required when age is 42"
+                    required
+                  >
+                    <field.Input
+                      value={field.state.value ?? ''}
+                      onChange={field.handleChange}
+                    />
+                  </field.Layout.Row>
+                )}
+              </form.AppField>
+            ) : null
+          }
+        </form.Subscribe>
+      </form.FieldGroup>
+
+      <form.FieldGroup title="Address Information">
+        <form.AppField name="address.street">
+          {field => (
+            <field.Layout.Row label="Street:" required>
+              <field.Input value={field.state.value} onChange={field.handleChange} />
+            </field.Layout.Row>
+          )}
+        </form.AppField>
+        <form.AppField name="address.city">
+          {field => (
+            <field.Layout.Row label="City:" required>
+              <field.Input value={field.state.value} onChange={field.handleChange} />
+            </field.Layout.Row>
+          )}
+        </form.AppField>
+        <form.AppField name="address.country">
+          {field => (
+            <field.Layout.Row label="Country:" required>
+              <field.Select
+                value={field.state.value}
+                onChange={field.handleChange}
+                options={COUNTRY_OPTIONS}
+              />
+            </field.Layout.Row>
+          )}
+        </form.AppField>
+      </form.FieldGroup>
+
+      <Flex gap="md" justify="end">
+        <Button onClick={() => form.reset()}>Reset</Button>
+        <form.SubmitButton>Submit</form.SubmitButton>
+      </Flex>
     </form.AppForm>
   );
 }
@@ -444,56 +442,54 @@ function CompactExample() {
   });
 
   return (
-    <form.AppForm>
-      <form.FormWrapper>
-        <FieldGroup title="Row Layout">
-          <form.AppField name="field1">
-            {field => (
-              <field.Layout.Row
-                label="Default Variant"
-                hintText="This hint text appears below the label"
-              >
-                <field.Input value={field.state.value} onChange={field.handleChange} />
-              </field.Layout.Row>
-            )}
-          </form.AppField>
-          <form.AppField name="field2">
-            {field => (
-              <field.Layout.Row
-                label="Compact Variant"
-                hintText="This hint text appears in a tooltip when hovering the label"
-                variant="compact"
-              >
-                <field.Input value={field.state.value} onChange={field.handleChange} />
-              </field.Layout.Row>
-            )}
-          </form.AppField>
-        </FieldGroup>
-
-        <FieldGroup title="Stack Layout">
-          <form.AppField name="field3">
-            {field => (
-              <field.Layout.Stack
-                label="Default Variant"
-                hintText="This hint text appears below the input"
-              >
-                <field.Input value={field.state.value} onChange={field.handleChange} />
-              </field.Layout.Stack>
-            )}
-          </form.AppField>
-          <form.AppField name="field4">
-            {field => (
-              <field.Layout.Stack
-                label="Compact Variant"
-                hintText="This hint text appears in a tooltip when hovering the label"
-                variant="compact"
-              >
-                <field.Input value={field.state.value} onChange={field.handleChange} />
-              </field.Layout.Stack>
-            )}
-          </form.AppField>
-        </FieldGroup>
-      </form.FormWrapper>
+    <form.AppForm form={form}>
+      <FieldGroup title="Row Layout">
+        <form.AppField name="field1">
+          {field => (
+            <field.Layout.Row
+              label="Default Variant"
+              hintText="This hint text appears below the label"
+            >
+              <field.Input value={field.state.value} onChange={field.handleChange} />
+            </field.Layout.Row>
+          )}
+        </form.AppField>
+        <form.AppField name="field2">
+          {field => (
+            <field.Layout.Row
+              label="Compact Variant"
+              hintText="This hint text appears in a tooltip when hovering the label"
+              variant="compact"
+            >
+              <field.Input value={field.state.value} onChange={field.handleChange} />
+            </field.Layout.Row>
+          )}
+        </form.AppField>
+      </FieldGroup>
+
+      <FieldGroup title="Stack Layout">
+        <form.AppField name="field3">
+          {field => (
+            <field.Layout.Stack
+              label="Default Variant"
+              hintText="This hint text appears below the input"
+            >
+              <field.Input value={field.state.value} onChange={field.handleChange} />
+            </field.Layout.Stack>
+          )}
+        </form.AppField>
+        <form.AppField name="field4">
+          {field => (
+            <field.Layout.Stack
+              label="Compact Variant"
+              hintText="This hint text appears in a tooltip when hovering the label"
+              variant="compact"
+            >
+              <field.Input value={field.state.value} onChange={field.handleChange} />
+            </field.Layout.Stack>
+          )}
+        </form.AppField>
+      </FieldGroup>
     </form.AppForm>
   );
 }
diff --git a/static/app/components/customCommitsResolutionModal.tsx b/static/app/components/customCommitsResolutionModal.tsx
index a17d7f9c140076..e9f26dabc694f1 100644
--- a/static/app/components/customCommitsResolutionModal.tsx
+++ b/static/app/components/customCommitsResolutionModal.tsx
@@ -56,57 +56,55 @@ function CustomCommitsResolutionModal({
   });
 
   return (
-    <form.AppForm>
-      <form.FormWrapper>
-        <Header>
-          <h4>{t('Resolved In')}</h4>
-        </Header>
-        <Body>
-          <form.AppField name="commit">
-            {field => (
-              <field.Layout.Stack label={t('Commit')} required>
-                <field.SelectAsync
-                  value={field.state.value}
-                  onChange={field.handleChange}
-                  queryOptions={debouncedInput => {
-                    return queryOptions({
-                      ...apiOptions.as<Commit[]>()(
-                        '/projects/$organizationIdOrSlug/$projectIdOrSlug/commits/',
-                        {
-                          path: {
-                            organizationIdOrSlug: orgSlug,
-                            projectIdOrSlug: projectSlug,
-                          },
-                          query: {query: debouncedInput},
-                          staleTime: 30_000,
-                        }
-                      ),
-                      select: ({json: commits}) =>
-                        commits.map(c => ({
-                          value: c,
-                          textValue: c.id,
-                          label: <Version version={c.id} anchor={false} />,
-                          details: (
-                            <span>
-                              {t('Created')} <TimeSince date={c.dateCreated} />
-                            </span>
-                          ),
-                        })),
-                    });
-                  }}
-                  placeholder={t('e.g. d86b832')}
-                />
-              </field.Layout.Stack>
-            )}
-          </form.AppField>
-        </Body>
-        <Footer>
-          <Flex gap="sm" justify="end">
-            <Button onClick={closeModal}>{t('Cancel')}</Button>
-            <form.SubmitButton>{t('Resolve')}</form.SubmitButton>
-          </Flex>
-        </Footer>
-      </form.FormWrapper>
+    <form.AppForm form={form}>
+      <Header>
+        <h4>{t('Resolved In')}</h4>
+      </Header>
+      <Body>
+        <form.AppField name="commit">
+          {field => (
+            <field.Layout.Stack label={t('Commit')} required>
+              <field.SelectAsync
+                value={field.state.value}
+                onChange={field.handleChange}
+                queryOptions={debouncedInput => {
+                  return queryOptions({
+                    ...apiOptions.as<Commit[]>()(
+                      '/projects/$organizationIdOrSlug/$projectIdOrSlug/commits/',
+                      {
+                        path: {
+                          organizationIdOrSlug: orgSlug,
+                          projectIdOrSlug: projectSlug,
+                        },
+                        query: {query: debouncedInput},
+                        staleTime: 30_000,
+                      }
+                    ),
+                    select: ({json: commits}) =>
+                      commits.map(c => ({
+                        value: c,
+                        textValue: c.id,
+                        label: <Version version={c.id} anchor={false} />,
+                        details: (
+                          <span>
+                            {t('Created')} <TimeSince date={c.dateCreated} />
+                          </span>
+                        ),
+                      })),
+                  });
+                }}
+                placeholder={t('e.g. d86b832')}
+              />
+            </field.Layout.Stack>
+          )}
+        </form.AppField>
+      </Body>
+      <Footer>
+        <Flex gap="sm" justify="end">
+          <Button onClick={closeModal}>{t('Cancel')}</Button>
+          <form.SubmitButton>{t('Resolve')}</form.SubmitButton>
+        </Flex>
+      </Footer>
     </form.AppForm>
   );
 }
diff --git a/static/app/views/settings/account/accountEmails.tsx b/static/app/views/settings/account/accountEmails.tsx
index f920d7ddd2e168..9a89fd8b39aa6f 100644
--- a/static/app/views/settings/account/accountEmails.tsx
+++ b/static/app/views/settings/account/accountEmails.tsx
@@ -84,29 +84,27 @@ function AccountEmails() {
       <SettingsPageHeader title={t('Email Addresses')} />
       <EmailAddresses />
       <FormSearch route="/settings/account/emails/">
-        <form.AppForm>
-          <form.FormWrapper>
-            <form.FieldGroup title={t('Add Secondary Emails')}>
-              <form.AppField name="email">
-                {field => (
-                  <field.Layout.Row
-                    label={t('Additional Email')}
-                    hintText={t('Designate an alternative email for this account')}
-                  >
-                    <field.Input
-                      type="email"
-                      value={field.state.value}
-                      onChange={field.handleChange}
-                      placeholder={t('e.g. secondary@example.com')}
-                    />
-                  </field.Layout.Row>
-                )}
-              </form.AppField>
-            </form.FieldGroup>
-            <Flex justify="end">
-              <form.SubmitButton>{t('Add email')}</form.SubmitButton>
-            </Flex>
-          </form.FormWrapper>
+        <form.AppForm form={form}>
+          <form.FieldGroup title={t('Add Secondary Emails')}>
+            <form.AppField name="email">
+              {field => (
+                <field.Layout.Row
+                  label={t('Additional Email')}
+                  hintText={t('Designate an alternative email for this account')}
+                >
+                  <field.Input
+                    type="email"
+                    value={field.state.value}
+                    onChange={field.handleChange}
+                    placeholder={t('e.g. secondary@example.com')}
+                  />
+                </field.Layout.Row>
+              )}
+            </form.AppField>
+          </form.FieldGroup>
+          <Flex justify="end">
+            <form.SubmitButton>{t('Add email')}</form.SubmitButton>
+          </Flex>
         </form.AppForm>
       </FormSearch>
 
diff --git a/static/app/views/settings/account/passwordForm.tsx b/static/app/views/settings/account/passwordForm.tsx
index 19c3880390b2ac..2cf72b3d1c23b4 100644
--- a/static/app/views/settings/account/passwordForm.tsx
+++ b/static/app/views/settings/account/passwordForm.tsx
@@ -62,57 +62,55 @@ export function PasswordForm() {
 
   return (
     <FormSearch route="/settings/account/security/">
-      <form.AppForm>
-        <form.FormWrapper>
-          <form.FieldGroup title={t('Password')}>
-            <Alert variant="info" system>
-              {t('Changing your password will invalidate all logged in sessions.')}
-            </Alert>
-            <form.AppField name="password">
-              {field => (
-                <field.Layout.Row label={t('Current Password')} required>
-                  <field.Password
-                    autoComplete="current-password"
-                    value={field.state.value}
-                    onChange={field.handleChange}
-                    placeholder={t('Your current password')}
-                  />
-                </field.Layout.Row>
-              )}
-            </form.AppField>
-            <form.AppField name="passwordNew">
-              {field => (
-                <field.Layout.Row label={t('New Password')} required>
-                  <field.Password
-                    autoComplete="new-password"
-                    value={field.state.value}
-                    onChange={field.handleChange}
-                    placeholder={t('Your new password')}
-                  />
-                </field.Layout.Row>
-              )}
-            </form.AppField>
-            <form.AppField name="passwordVerify">
-              {field => (
-                <field.Layout.Row
-                  label={t('Verify New Password')}
-                  hintText={t('Verify your new password')}
-                  required
-                >
-                  <field.Password
-                    autoComplete="new-password"
-                    value={field.state.value}
-                    onChange={field.handleChange}
-                    placeholder={t('Verify your new password')}
-                  />
-                </field.Layout.Row>
-              )}
-            </form.AppField>
-            <Flex justify="end">
-              <form.SubmitButton>{t('Change password')}</form.SubmitButton>
-            </Flex>
-          </form.FieldGroup>
-        </form.FormWrapper>
+      <form.AppForm form={form}>
+        <form.FieldGroup title={t('Password')}>
+          <Alert variant="info" system>
+            {t('Changing your password will invalidate all logged in sessions.')}
+          </Alert>
+          <form.AppField name="password">
+            {field => (
+              <field.Layout.Row label={t('Current Password')} required>
+                <field.Password
+                  autoComplete="current-password"
+                  value={field.state.value}
+                  onChange={field.handleChange}
+                  placeholder={t('Your current password')}
+                />
+              </field.Layout.Row>
+            )}
+          </form.AppField>
+          <form.AppField name="passwordNew">
+            {field => (
+              <field.Layout.Row label={t('New Password')} required>
+                <field.Password
+                  autoComplete="new-password"
+                  value={field.state.value}
+                  onChange={field.handleChange}
+                  placeholder={t('Your new password')}
+                />
+              </field.Layout.Row>
+            )}
+          </form.AppField>
+          <form.AppField name="passwordVerify">
+            {field => (
+              <field.Layout.Row
+                label={t('Verify New Password')}
+                hintText={t('Verify your new password')}
+                required
+              >
+                <field.Password
+                  autoComplete="new-password"
+                  value={field.state.value}
+                  onChange={field.handleChange}
+                  placeholder={t('Verify your new password')}
+                />
+              </field.Layout.Row>
+            )}
+          </form.AppField>
+          <Flex justify="end">
+            <form.SubmitButton>{t('Change password')}</form.SubmitButton>
+          </Flex>
+        </form.FieldGroup>
       </form.AppForm>
     </FormSearch>
   );
diff --git a/static/app/views/settings/organizationAuthTokens/authTokenDetails.tsx b/static/app/views/settings/organizationAuthTokens/authTokenDetails.tsx
index 1303e97f1c510f..a386365e8c23a8 100644
--- a/static/app/views/settings/organizationAuthTokens/authTokenDetails.tsx
+++ b/static/app/views/settings/organizationAuthTokens/authTokenDetails.tsx
@@ -140,39 +140,37 @@ function AuthTokenDetailsForm({token}: {token: OrgAuthToken}) {
   });
 
   return (
-    <form.AppForm>
-      <form.FormWrapper>
-        <form.AppField name="name">
-          {field => (
-            <field.Layout.Row
-              label={t('Name')}
-              hintText={t('A name to help you identify this token.')}
-              required
-            >
-              <field.Input value={field.state.value} onChange={field.handleChange} />
-            </field.Layout.Row>
-          )}
-        </form.AppField>
-
-        <FieldGroup
-          label={t('Token')}
-          help={t('You can only view the token once after creation.')}
-        >
-          <div>{tokenPreview(token.tokenLastCharacters || '****')}</div>
-        </FieldGroup>
-
-        <FieldGroup
-          label={t('Scopes')}
-          help={t('You cannot change the scopes of an existing token.')}
-        >
-          <div>{token.scopes.slice().sort().join(', ')}</div>
-        </FieldGroup>
-
-        <Flex justify="end" gap="md" padding="md">
-          <Button onClick={handleGoBack}>{t('Cancel')}</Button>
-          <form.SubmitButton>{t('Save Changes')}</form.SubmitButton>
-        </Flex>
-      </form.FormWrapper>
+    <form.AppForm form={form}>
+      <form.AppField name="name">
+        {field => (
+          <field.Layout.Row
+            label={t('Name')}
+            hintText={t('A name to help you identify this token.')}
+            required
+          >
+            <field.Input value={field.state.value} onChange={field.handleChange} />
+          </field.Layout.Row>
+        )}
+      </form.AppField>
+
+      <FieldGroup
+        label={t('Token')}
+        help={t('You can only view the token once after creation.')}
+      >
+        <div>{tokenPreview(token.tokenLastCharacters || '****')}</div>
+      </FieldGroup>
+
+      <FieldGroup
+        label={t('Scopes')}
+        help={t('You cannot change the scopes of an existing token.')}
+      >
+        <div>{token.scopes.slice().sort().join(', ')}</div>
+      </FieldGroup>
+
+      <Flex justify="end" gap="md" padding="md">
+        <Button onClick={handleGoBack}>{t('Cancel')}</Button>
+        <form.SubmitButton>{t('Save Changes')}</form.SubmitButton>
+      </Flex>
     </form.AppForm>
   );
 }
diff --git a/static/app/views/settings/organizationAuthTokens/newAuthToken.tsx b/static/app/views/settings/organizationAuthTokens/newAuthToken.tsx
index ca9f801f9075a7..419fc51eebe677 100644
--- a/static/app/views/settings/organizationAuthTokens/newAuthToken.tsx
+++ b/static/app/views/settings/organizationAuthTokens/newAuthToken.tsx
@@ -97,35 +97,33 @@ function AuthTokenCreateForm({
   });
 
   return (
-    <form.AppForm>
-      <form.FormWrapper>
-        <form.AppField name="name">
-          {field => (
-            <field.Layout.Row
-              label={t('Name')}
-              hintText={t('A name to help you identify this token.')}
-              required
-            >
-              <field.Input value={field.state.value} onChange={field.handleChange} />
-            </field.Layout.Row>
-          )}
-        </form.AppField>
-
-        <FieldGroup
-          label={t('Scopes')}
-          help={t('Organization tokens currently have a limited set of scopes.')}
-        >
-          <div>
-            <div>org:ci</div>
-            <ScopeHelpText>{t('Source Map Upload, Release Creation')}</ScopeHelpText>
-          </div>
-        </FieldGroup>
-
-        <Flex justify="end" gap="md" padding="md">
-          <Button onClick={handleGoBack}>{t('Cancel')}</Button>
-          <form.SubmitButton>{t('Create Token')}</form.SubmitButton>
-        </Flex>
-      </form.FormWrapper>
+    <form.AppForm form={form}>
+      <form.AppField name="name">
+        {field => (
+          <field.Layout.Row
+            label={t('Name')}
+            hintText={t('A name to help you identify this token.')}
+            required
+          >
+            <field.Input value={field.state.value} onChange={field.handleChange} />
+          </field.Layout.Row>
+        )}
+      </form.AppField>
+
+      <FieldGroup
+        label={t('Scopes')}
+        help={t('Organization tokens currently have a limited set of scopes.')}
+      >
+        <div>
+          <div>org:ci</div>
+          <ScopeHelpText>{t('Source Map Upload, Release Creation')}</ScopeHelpText>
+        </div>
+      </FieldGroup>
+
+      <Flex justify="end" gap="md" padding="md">
+        <Button onClick={handleGoBack}>{t('Cancel')}</Button>
+        <form.SubmitButton>{t('Create Token')}</form.SubmitButton>
+      </Flex>
     </form.AppForm>
   );
 }
diff --git a/static/app/views/settings/organizationGeneralSettings/organizationSettingsForm.tsx b/static/app/views/settings/organizationGeneralSettings/organizationSettingsForm.tsx
index c22d800b14ce65..fe6b8fb45cd9ea 100644
--- a/static/app/views/settings/organizationGeneralSettings/organizationSettingsForm.tsx
+++ b/static/app/views/settings/organizationGeneralSettings/organizationSettingsForm.tsx
@@ -454,55 +454,50 @@ function OrganizationSettingsForm({initialData, onSave}: Props) {
       <FormSearch route="/settings/organization/">
         <FieldGroup title={t('General')}>
           {/* Slug — explicit save with warning */}
-          <slugForm.AppForm>
-            <slugForm.FormWrapper>
-              <slugForm.AppField name="slug">
-                {field => (
-                  <field.Layout.Row
-                    label={t('Organization Slug')}
-                    hintText={t('A unique ID used to identify this organization')}
-                    required
-                  >
-                    <field.Input
-                      value={field.state.value}
-                      onChange={value => field.handleChange(slugify(value))}
-                      disabled={!hasWriteAccess}
-                    />
-                  </field.Layout.Row>
-                )}
-              </slugForm.AppField>
-              <slugForm.Subscribe
-                selector={state => state.values.slug !== initialData.slug}
-              >
-                {isDirty =>
-                  isDirty && (
-                    <Container paddingTop="lg">
-                      <Alert variant="info" showIcon={false}>
-                        {tct(
-                          'Changing your organization slug will break organization tokens, may impact integrations, and break links to your organization. You will be redirected to the new slug after saving. [link:Learn more]',
-                          {
-                            link: (
-                              <ExternalLink href="https://sentry.zendesk.com/hc/en-us/articles/22291009858971-Can-I-update-my-Sentry-Organization-slug" />
-                            ),
-                          }
-                        )}
-                      </Alert>
-                      <Flex gap="sm" justify="end" paddingTop="lg">
-                        <Button
-                          onClick={() => slugForm.reset()}
-                          disabled={!hasWriteAccess}
-                        >
-                          {t('Cancel')}
-                        </Button>
-                        <slugForm.SubmitButton disabled={!hasWriteAccess}>
-                          {t('Save')}
-                        </slugForm.SubmitButton>
-                      </Flex>
-                    </Container>
-                  )
-                }
-              </slugForm.Subscribe>
-            </slugForm.FormWrapper>
+          <slugForm.AppForm form={slugForm}>
+            <slugForm.AppField name="slug">
+              {field => (
+                <field.Layout.Row
+                  label={t('Organization Slug')}
+                  hintText={t('A unique ID used to identify this organization')}
+                  required
+                >
+                  <field.Input
+                    value={field.state.value}
+                    onChange={value => field.handleChange(slugify(value))}
+                    disabled={!hasWriteAccess}
+                  />
+                </field.Layout.Row>
+              )}
+            </slugForm.AppField>
+            <slugForm.Subscribe
+              selector={state => state.values.slug !== initialData.slug}
+            >
+              {isDirty =>
+                isDirty && (
+                  <Container paddingTop="lg">
+                    <Alert variant="info" showIcon={false}>
+                      {tct(
+                        'Changing your organization slug will break organization tokens, may impact integrations, and break links to your organization. You will be redirected to the new slug after saving. [link:Learn more]',
+                        {
+                          link: (
+                            <ExternalLink href="https://sentry.zendesk.com/hc/en-us/articles/22291009858971-Can-I-update-my-Sentry-Organization-slug" />
+                          ),
+                        }
+                      )}
+                    </Alert>
+                    <Flex gap="sm" justify="end" paddingTop="lg">
+                      <Button onClick={() => slugForm.reset()} disabled={!hasWriteAccess}>
+                        {t('Cancel')}
+                      </Button>
+                      <slugForm.SubmitButton disabled={!hasWriteAccess}>
+                        {t('Save')}
+                      </slugForm.SubmitButton>
+                    </Flex>
+                  </Container>
+                )
+              }
+            </slugForm.Subscribe>
           </slugForm.AppForm>
 
           {/* Display Name */}
diff --git a/static/app/views/settings/organizationSecurityAndPrivacy/index.tsx b/static/app/views/settings/organizationSecurityAndPrivacy/index.tsx
index c6d07a51ba862f..75540b2e82fbb4 100644
--- a/static/app/views/settings/organizationSecurityAndPrivacy/index.tsx
+++ b/static/app/views/settings/organizationSecurityAndPrivacy/index.tsx
@@ -425,80 +425,78 @@ function ScrubbingConfigurationFieldGroup({hasOrgWrite}: {hasOrgWrite: boolean})
 
   return (
     <FormSearch route="/settings/:orgId/security-and-privacy/">
-      <scrubbingConfiguration.AppForm>
-        <scrubbingConfiguration.FormWrapper>
-          <FieldGroup title={t('Scrubbing Configuration')}>
-            <scrubbingConfiguration.AppField name="sensitiveFields">
-              {field => (
-                <field.Layout.Row
-                  label={t('Global Sensitive Fields')}
-                  hintText={t(
-                    'Additional field names to match against when scrubbing data for all projects. Separate multiple entries with a newline.'
-                  )}
-                >
-                  <field.TextArea
-                    value={field.state.value}
-                    onChange={field.handleChange}
-                    placeholder="e.g. email"
-                    disabled={!hasOrgWrite}
-                    autosize
-                  />
-                </field.Layout.Row>
-              )}
-            </scrubbingConfiguration.AppField>
+      <scrubbingConfiguration.AppForm form={scrubbingConfiguration}>
+        <FieldGroup title={t('Scrubbing Configuration')}>
+          <scrubbingConfiguration.AppField name="sensitiveFields">
+            {field => (
+              <field.Layout.Row
+                label={t('Global Sensitive Fields')}
+                hintText={t(
+                  'Additional field names to match against when scrubbing data for all projects. Separate multiple entries with a newline.'
+                )}
+              >
+                <field.TextArea
+                  value={field.state.value}
+                  onChange={field.handleChange}
+                  placeholder="e.g. email"
+                  disabled={!hasOrgWrite}
+                  autosize
+                />
+              </field.Layout.Row>
+            )}
+          </scrubbingConfiguration.AppField>
 
-            <scrubbingConfiguration.AppField name="safeFields">
-              {field => (
-                <field.Layout.Row
-                  label={t('Global Safe Fields')}
-                  hintText={t(
-                    'Field names which data scrubbers should ignore. Separate multiple entries with a newline.'
-                  )}
-                >
-                  <field.TextArea
-                    value={field.state.value}
-                    onChange={field.handleChange}
-                    placeholder={t('e.g. business-email')}
-                    disabled={!hasOrgWrite}
-                    autosize
-                  />
-                </field.Layout.Row>
-              )}
-            </scrubbingConfiguration.AppField>
-            {hasOrgWrite ? (
-              <Flex gap="md" align="center" padding="sm">
-                <scrubbingConfiguration.Subscribe
-                  selector={state =>
-                    state.values.sensitiveFields !== initialSensitiveFields ||
-                    state.values.safeFields !== initialSafeFields
-                  }
-                >
-                  {hasChanged => (
-                    <Flex
-                      flex="1"
-                      minWidth={0}
-                      style={{visibility: hasChanged ? 'visible' : 'hidden'}}
-                    >
-                      <Alert variant="info">
-                        {t(
-                          'Changes to your scrubbing configuration will apply to all new events.'
-                        )}
-                      </Alert>
-                    </Flex>
-                  )}
-                </scrubbingConfiguration.Subscribe>
-                <Flex gap="sm" flexShrink={0}>
-                  <Button onClick={() => scrubbingConfiguration.reset()}>
-                    {t('Cancel')}
-                  </Button>
-                  <scrubbingConfiguration.SubmitButton>
-                    {t('Save')}
-                  </scrubbingConfiguration.SubmitButton>
-                </Flex>
+          <scrubbingConfiguration.AppField name="safeFields">
+            {field => (
+              <field.Layout.Row
+                label={t('Global Safe Fields')}
+                hintText={t(
+                  'Field names which data scrubbers should ignore. Separate multiple entries with a newline.'
+                )}
+              >
+                <field.TextArea
+                  value={field.state.value}
+                  onChange={field.handleChange}
+                  placeholder={t('e.g. business-email')}
+                  disabled={!hasOrgWrite}
+                  autosize
+                />
+              </field.Layout.Row>
+            )}
+          </scrubbingConfiguration.AppField>
+          {hasOrgWrite ? (
+            <Flex gap="md" align="center" padding="sm">
+              <scrubbingConfiguration.Subscribe
+                selector={state =>
+                  state.values.sensitiveFields !== initialSensitiveFields ||
+                  state.values.safeFields !== initialSafeFields
+                }
+              >
+                {hasChanged => (
+                  <Flex
+                    flex="1"
+                    minWidth={0}
+                    style={{visibility: hasChanged ? 'visible' : 'hidden'}}
+                  >
+                    <Alert variant="info">
+                      {t(
+                        'Changes to your scrubbing configuration will apply to all new events.'
+                      )}
+                    </Alert>
+                  </Flex>
+                )}
+              </scrubbingConfiguration.Subscribe>
+              <Flex gap="sm" flexShrink={0}>
+                <Button onClick={() => scrubbingConfiguration.reset()}>
+                  {t('Cancel')}
+                </Button>
+                <scrubbingConfiguration.SubmitButton>
+                  {t('Save')}
+                </scrubbingConfiguration.SubmitButton>
               </Flex>
-            ) : null}
-          </FieldGroup>
-        </scrubbingConfiguration.FormWrapper>
+            </Flex>
+          ) : null}
+        </FieldGroup>
       </scrubbingConfiguration.AppForm>
     </FormSearch>
   );
diff --git a/static/app/views/settings/organizationTeams/teamSettings/index.tsx b/static/app/views/settings/organizationTeams/teamSettings/index.tsx
index b89151f4d1ab48..bbc22a780caac7 100644
--- a/static/app/views/settings/organizationTeams/teamSettings/index.tsx
+++ b/static/app/views/settings/organizationTeams/teamSettings/index.tsx
@@ -101,65 +101,63 @@ export default function TeamSettings() {
         </Alert.Container>
       )}
 
-      <form.AppForm>
-        <form.FormWrapper>
-          <FieldGroup title={t('Team Settings')}>
-            <form.AppField name="slug">
-              {field => (
-                <field.Layout.Row
-                  label={t('Team Slug')}
-                  hintText={t('A unique ID used to identify the team')}
-                  required
-                >
-                  <field.Input
-                    value={field.state.value}
-                    onChange={value => field.handleChange(slugify(value))}
-                    placeholder="e.g. operations, web-frontend, mobile-ios"
-                    disabled={isDisabled}
-                  />
-                </field.Layout.Row>
-              )}
-            </form.AppField>
-            <form.AppField name="teamId">
-              {field => (
-                <field.Layout.Row
-                  label={t('Team ID')}
-                  hintText={t(
-                    'The unique identifier for this team. It cannot be modified.'
-                  )}
-                >
-                  <field.Input
-                    value={field.state.value}
-                    onChange={field.handleChange}
-                    disabled
-                  />
-                </field.Layout.Row>
-              )}
-            </form.AppField>
+      <form.AppForm form={form}>
+        <FieldGroup title={t('Team Settings')}>
+          <form.AppField name="slug">
+            {field => (
+              <field.Layout.Row
+                label={t('Team Slug')}
+                hintText={t('A unique ID used to identify the team')}
+                required
+              >
+                <field.Input
+                  value={field.state.value}
+                  onChange={value => field.handleChange(slugify(value))}
+                  placeholder="e.g. operations, web-frontend, mobile-ios"
+                  disabled={isDisabled}
+                />
+              </field.Layout.Row>
+            )}
+          </form.AppField>
+          <form.AppField name="teamId">
+            {field => (
+              <field.Layout.Row
+                label={t('Team ID')}
+                hintText={t(
+                  'The unique identifier for this team. It cannot be modified.'
+                )}
+              >
+                <field.Input
+                  value={field.state.value}
+                  onChange={field.handleChange}
+                  disabled
+                />
+              </field.Layout.Row>
+            )}
+          </form.AppField>
 
-            {isDisabled ? null : (
-              <Flex gap="md" align="center" padding="sm">
-                <form.Subscribe selector={state => state.values.slug !== team.slug}>
-                  {hasChanged => (
-                    <Flex
-                      flex="1"
-                      minWidth={0}
-                      style={{visibility: hasChanged ? 'visible' : 'hidden'}}
-                    >
-                      <Alert variant="info">
-                        {t('You will be redirected to the new team slug after saving.')}
-                      </Alert>
-                    </Flex>
-                  )}
-                </form.Subscribe>
-                <Flex gap="sm" flexShrink={0}>
-                  <Button onClick={() => form.reset()}>{t('Cancel')}</Button>
-                  <form.SubmitButton>{t('Save')}</form.SubmitButton>
-                </Flex>
+          {isDisabled ? null : (
+            <Flex gap="md" align="center" padding="sm">
+              <form.Subscribe selector={state => state.values.slug !== team.slug}>
+                {hasChanged => (
+                  <Flex
+                    flex="1"
+                    minWidth={0}
+                    style={{visibility: hasChanged ? 'visible' : 'hidden'}}
+                  >
+                    <Alert variant="info">
+                      {t('You will be redirected to the new team slug after saving.')}
+                    </Alert>
+                  </Flex>
+                )}
+              </form.Subscribe>
+              <Flex gap="sm" flexShrink={0}>
+                <Button onClick={() => form.reset()}>{t('Cancel')}</Button>
+                <form.SubmitButton>{t('Save')}</form.SubmitButton>
               </Flex>
-            )}
-          </FieldGroup>
-        </form.FormWrapper>
+            </Flex>
+          )}
+        </FieldGroup>
       </form.AppForm>
 
       <Panel>

From 1a286eacfbdff13e9bd271294af51f1fb56a763e Mon Sep 17 00:00:00 2001
From: TkDodo <dominik.dorfmeister@sentry.io>
Date: Thu, 26 Feb 2026 11:00:00 +0100
Subject: [PATCH 3/4] ref: update skills

---
 .../skills/generate-frontend-forms/SKILL.md   | 43 +++++++++----------
 .../skills/migrate-frontend-forms/SKILL.md    |  2 +-
 2 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/.agents/skills/generate-frontend-forms/SKILL.md b/.agents/skills/generate-frontend-forms/SKILL.md
index b3df4f63b4dc7c..ddfbf3f33e6f43 100644
--- a/.agents/skills/generate-frontend-forms/SKILL.md
+++ b/.agents/skills/generate-frontend-forms/SKILL.md
@@ -65,18 +65,16 @@ function MyForm() {
   });
 
   return (
-    <form.AppForm>
-      <form.FormWrapper>
-        <form.AppField name="email">
-          {field => (
-            <field.Layout.Stack label="Email" required>
-              <field.Input value={field.state.value} onChange={field.handleChange} />
-            </field.Layout.Stack>
-          )}
-        </form.AppField>
-
-        <form.SubmitButton>Submit</form.SubmitButton>
-      </form.FormWrapper>
+    <form.AppForm form={form}>
+      <form.AppField name="email">
+        {field => (
+          <field.Layout.Stack label="Email" required>
+            <field.Input value={field.state.value} onChange={field.handleChange} />
+          </field.Layout.Stack>
+        )}
+      </form.AppField>
+
+      <form.SubmitButton>Submit</form.SubmitButton>
     </form.AppForm>
   );
 }
@@ -86,16 +84,15 @@ function MyForm() {
 
 ### Returned Properties
 
-| Property         | Description                                    |
-| ---------------- | ---------------------------------------------- |
-| `AppForm`        | Root wrapper component (provides form context) |
-| `FormWrapper`    | Form element wrapper (handles submit)          |
-| `AppField`       | Field renderer component                       |
-| `FieldGroup`     | Section grouping with title                    |
-| `SubmitButton`   | Pre-wired submit button                        |
-| `Subscribe`      | Subscribe to form state changes                |
-| `reset()`        | Reset form to default values                   |
-| `handleSubmit()` | Manually trigger submission                    |
+| Property         | Description                                                                                                   |
+| ---------------- | ------------------------------------------------------------------------------------------------------------- |
+| `AppForm`        | Root wrapper component (provides form context and renders `<form>` element). Must receive `form={form}` prop. |
+| `AppField`       | Field renderer component                                                                                      |
+| `FieldGroup`     | Section grouping with title                                                                                   |
+| `SubmitButton`   | Pre-wired submit button                                                                                       |
+| `Subscribe`      | Subscribe to form state changes                                                                               |
+| `reset()`        | Reset form to default values                                                                                  |
+| `handleSubmit()` | Manually trigger submission                                                                                   |
 
 ---
 
@@ -772,7 +769,7 @@ When creating a new form:
 - [ ] Use `useScrapsForm` with `...defaultFormOptions`
 - [ ] Set `defaultValues` matching schema shape
 - [ ] Set `validators: {onDynamic: schema}`
-- [ ] Wrap with `<form.AppForm>` and `<form.FormWrapper>`
+- [ ] Wrap with `<form.AppForm form={form}>`
 - [ ] Use `<form.AppField>` for each field
 - [ ] Choose appropriate layout (Stack or Row)
 - [ ] Handle server errors with `setFieldErrors`
diff --git a/.agents/skills/migrate-frontend-forms/SKILL.md b/.agents/skills/migrate-frontend-forms/SKILL.md
index ec2f24e5f066b1..1a5a0d85bb9fb6 100644
--- a/.agents/skills/migrate-frontend-forms/SKILL.md
+++ b/.agents/skills/migrate-frontend-forms/SKILL.md
@@ -452,7 +452,7 @@ function SlugForm({project}: {project: Project}) {
   });
 
   return (
-    <form.AppForm>
+    <form.AppForm form={form}>
       <form.AppField name="slug">
         {field => (
           <field.Layout.Stack label="Project Slug">

From 1f9282d59978bef0184b72eaa724c4ff4713df68 Mon Sep 17 00:00:00 2001
From: TkDodo <office@dorfmeister.cc>
Date: Thu, 26 Feb 2026 14:04:41 +0100
Subject: [PATCH 4/4] fix: types

---
 static/app/components/core/form/field/radioField.spec.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/app/components/core/form/field/radioField.spec.tsx b/static/app/components/core/form/field/radioField.spec.tsx
index e0018995bc2a3d..0b49c0bfb5b543 100644
--- a/static/app/components/core/form/field/radioField.spec.tsx
+++ b/static/app/components/core/form/field/radioField.spec.tsx
@@ -27,7 +27,7 @@ function TestForm({
   });
 
   return (
-    <form.AppForm>
+    <form.AppForm form={form}>
       <form.AppField name="priority">
         {field => (
           <field.Radio.Group