Skip to content

ref(scraps): unify FormWrapper and AppForm #109474

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TkDodo merged 6 commits into from
Feb 26, 2026
Merged

ref(scraps): unify FormWrapper and AppForm #109474

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c0e48f3
ref: better AppForm
TkDodo Feb 26, 2026
b128cea
ref: unify FormWrapper and AppForm
TkDodo Feb 26, 2026
1a286ea
ref: update skills
TkDodo Feb 26, 2026
084c3ec
Merge branch 'master' into tkdodo/ref/appform-api
TkDodo Feb 26, 2026
5f41109
Merge branch 'master' into tkdodo/ref/appform-api
TkDodo Feb 26, 2026
1f9282d
fix: types
TkDodo Feb 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 20 additions & 23 deletions .agents/skills/generate-frontend-forms/SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand All @@ -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 |

---

Expand Down Expand Up @@ -810,7 +807,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`
Expand Down
2 changes: 1 addition & 1 deletion .agents/skills/migrate-frontend-forms/SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
6 changes: 2 additions & 4 deletions static/app/components/core/form/field/autoSaveField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions static/app/components/core/form/field/baseField.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand All @@ -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];
Expand Down
2 changes: 1 addition & 1 deletion static/app/components/core/form/field/passwordField.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
2 changes: 1 addition & 1 deletion static/app/components/core/form/field/radioField.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ function TestForm({
});

return (
<form.AppForm>
<form.AppForm form={form}>
<form.AppField name="priority">
{field => (
<field.Radio.Group
Expand Down
2 changes: 1 addition & 1 deletion static/app/components/core/form/field/rangeField.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
16 changes: 8 additions & 8 deletions static/app/components/core/form/field/selectField.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down Expand Up @@ -102,7 +102,7 @@ describe('SelectField', () => {
});

return (
<form.AppForm>
<form.AppForm form={form}>
<form.AppField name="fruit">
{field => (
<field.Select
Expand Down Expand Up @@ -132,7 +132,7 @@ describe('SelectField', () => {
});

return (
<form.AppForm>
<form.AppForm form={form}>
<form.AppField name="tags">
{field => (
<field.Select
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -214,7 +214,7 @@ describe('SelectField', () => {
});

return (
<form.AppForm>
<form.AppForm form={form}>
<form.AppField name="fruit">
{field => (
<field.Select
Expand Down Expand Up @@ -242,7 +242,7 @@ describe('SelectField', () => {
});

return (
<form.AppForm>
<form.AppForm form={form}>
<form.AppField name="fruit">
{field => (
<field.Select
Expand Down Expand Up @@ -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}>
Expand Down
2 changes: 1 addition & 1 deletion static/app/components/core/form/field/switchField.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
2 changes: 1 addition & 1 deletion static/app/components/core/form/field/textAreaField.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
Loading
Loading