From df48528443f9be6362497f628dbf03307a8d148d Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Thu, 27 Aug 2026 09:00:11 +0200
Subject: [PATCH] fix: FormItemLayout does not apply item id correctly (#49593)

## Problem

`<FormItemLayout>` does not apply item id correctly. This can be seen on
https://supabase.com/design-system/docs/ui-patterns/forms: open the
devtool and check the form items labels. They have no `for` attribute.
This makes it harder to correctly test and is an accessibility issue.

Axe devtool actually report it

## Solution

When inside React Hook Form, `<FormItemLayout>` actually generate an
`id` (via `<FormItem>`). However, this `id` is overridden in
`<FormLayout>` and read from context by `<FormLabel>`. Simply removing
this line fixes it and correctly binds the label to its input
---
 packages/ui-patterns/src/form/Layout/FormLayout.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ui-patterns/src/form/Layout/FormLayout.tsx b/packages/ui-patterns/src/form/Layout/FormLayout.tsx
index 37f67aa61a3..e944eab71a5 100644
--- a/packages/ui-patterns/src/form/Layout/FormLayout.tsx
+++ b/packages/ui-patterns/src/form/Layout/FormLayout.tsx
@@ -398,7 +398,6 @@ export const FormLayout = React.forwardRef<
                 <FormLabel
                   className="text-foreground flex gap-2 items-center wrap-break-word"
                   data-formlayout-id="formLabel"
-                  htmlFor={props.name || id}
                 >
                   <LabelContents />
                 </FormLabel>