From 4f92790587cf39faa26ee7b5463ff18bb72477ac Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Mon, 31 Aug 2026 10:32:45 +0200
Subject: [PATCH] fix: FormItemLayout does not apply item id correctly (#49637)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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>`. Ensure we use the
generated id unless one was provided.

Also updated the paths filters for the CI check so that any changes in
either `ui` or `ui-patterns` triggers the studio unit and e2e tests.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Bug Fixes**
- Improved form accessibility by ensuring labels consistently connect to
their corresponding input fields.
- React-based forms now correctly preserve field-specific identifiers
when associating labels with inputs.
- Added support for explicitly specifying a label’s input target,
improving compatibility with customized form layouts.
- Updated Studio forms to use consistent control identifiers and
labeling behavior.

- **Quality Improvements**
- Automated validation now also runs when shared UI components and
patterns are updated.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .github/workflows/studio-e2e-test.yml         |  2 +
 .github/workflows/studio-unit-tests.yml       |  4 ++
 .../AccessTokens/Scoped/Form/TokenDetails.tsx |  6 +--
 .../SessionsAuthSettingsForm.tsx              | 12 ------
 .../Vault/Secrets/EditSecretModal.tsx         | 31 +++++++---------
 .../Wrappers/CreateWrapperSheet.tsx           |  3 +-
 .../Integrations/Wrappers/InputField.tsx      |  7 ++--
 .../Wrappers/WrapperTableEditor.tsx           | 22 ++++-------
 .../interfaces/SQLEditor/RenameQueryModal.tsx |  2 +-
 .../interfaces/Storage/CreateBucketModal.tsx  | 37 +++----------------
 .../interfaces/Storage/EditBucketModal.tsx    | 24 ++----------
 .../Support/DashboardLogsToggle.tsx           | 19 ++++++----
 .../Support/SupportAccessToggle.tsx           | 20 ++++++----
 .../src/form/Layout/FormLayout.tsx            |  2 +-
 packages/ui/src/components/shadcn/ui/form.tsx |  4 +-
 15 files changed, 70 insertions(+), 125 deletions(-)

diff --git a/.github/workflows/studio-e2e-test.yml b/.github/workflows/studio-e2e-test.yml
index 9573189273d..67da2f67312 100644
--- a/.github/workflows/studio-e2e-test.yml
+++ b/.github/workflows/studio-e2e-test.yml
@@ -44,6 +44,8 @@ jobs:
           filters: |
             studio:
               - 'packages/pg-meta/**'
+              - 'packages/ui/**'
+              - 'packages/ui-patterns/**'
               - 'apps/studio/**'
               - 'apps/ui-library/**'
               - 'apps/design-system/**'
diff --git a/.github/workflows/studio-unit-tests.yml b/.github/workflows/studio-unit-tests.yml
index bed6790239f..65e65dabcf4 100644
--- a/.github/workflows/studio-unit-tests.yml
+++ b/.github/workflows/studio-unit-tests.yml
@@ -8,6 +8,8 @@ on:
     branches: [master, studio]
     paths:
       - 'apps/studio/**'
+      - 'packages/ui/**'
+      - 'packages/ui-patterns/**'
       - 'pnpm-lock.yaml'
   pull_request:
     branches: [master, studio]
@@ -44,6 +46,8 @@ jobs:
         with:
           filters: |
             relevant:
+              - 'packages/ui/**'
+              - 'packages/ui-patterns/**'
               - 'apps/studio/**'
               - 'pnpm-lock.yaml'
       - uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/TokenDetails.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/TokenDetails.tsx
index 64a91e603df..a57127f6b65 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/TokenDetails.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/TokenDetails.tsx
@@ -61,7 +61,7 @@ export const TokenDetails = ({ control, setValue }: TokenDetailsProps) => {
         render={({ field }) => (
           <FormItemLayout name="tokenName" label="Name" layout="flex-row-reverse">
             <FormControl>
-              <Input id="tokenName" {...field} placeholder="e.g. CI deploy token" />
+              <Input {...field} placeholder="e.g. CI deploy token" />
             </FormControl>
           </FormItemLayout>
         )}
@@ -72,11 +72,11 @@ export const TokenDetails = ({ control, setValue }: TokenDetailsProps) => {
         name="expiresAt"
         control={control}
         render={({ field }) => (
-          <FormItemLayout name="expiresAt" label="Expires in" layout="flex-row-reverse">
+          <FormItemLayout id="expiresAt" label="Expires in" layout="flex-row-reverse">
             <div className="flex gap-2 w-full">
               <FormControl className="grow">
                 <Select value={field.value} onValueChange={handleExpiryChange}>
-                  <SelectTrigger>
+                  <SelectTrigger id="expiresAt">
                     <SelectValue placeholder="Select an expiry" />
                   </SelectTrigger>
                   <SelectContent>
diff --git a/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx
index 8e8c21e29c2..a312551064b 100644
--- a/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx
@@ -276,13 +276,11 @@ export const SessionsAuthSettingsForm = () => {
                     render={({ field }) => (
                       <FormItemLayout
                         layout="flex-row-reverse"
-                        name="SESSIONS_SINGLE_PER_USER"
                         label="Enforce single session per user"
                         description="If enabled, all but a user's most recently active session will be terminated."
                       >
                         <FormControl>
                           <Switch
-                            id="SESSIONS_SINGLE_PER_USER"
                             checked={field.value}
                             onCheckedChange={field.onChange}
                             disabled={!canUpdateConfig || !hasUserSessionsEntitlement}
@@ -300,14 +298,12 @@ export const SessionsAuthSettingsForm = () => {
                     render={({ field }) => (
                       <FormItemLayout
                         layout="flex-row-reverse"
-                        name="SESSIONS_TIMEBOX"
                         label="Time-box user sessions"
                         description={`The amount of time before a user is forced to sign in again. Use 0 for never. Maximum ${MAX_SESSIONS_TIMEBOX_HOURS} hours (1 year).`}
                       >
                         <FormControl className="w-full">
                           <InputGroup>
                             <FormInputGroupInput
-                              id="SESSIONS_TIMEBOX"
                               type="number"
                               min={0}
                               {...field}
@@ -332,14 +328,12 @@ export const SessionsAuthSettingsForm = () => {
                     render={({ field }) => (
                       <FormItemLayout
                         layout="flex-row-reverse"
-                        name="SESSIONS_INACTIVITY_TIMEOUT"
                         label="Inactivity timeout"
                         description={`The amount of time a user needs to be inactive to be forced to sign in again. Use 0 for never. Maximum ${MAX_SESSIONS_INACTIVITY_TIMEOUT_HOURS} hours (1 year).`}
                       >
                         <FormControl className="w-full">
                           <InputGroup>
                             <FormInputGroupInput
-                              id="SESSIONS_INACTIVITY_TIMEOUT"
                               type="number"
                               min={0}
                               {...field}
@@ -413,14 +407,12 @@ export const SessionsAuthSettingsForm = () => {
                     render={({ field }) => (
                       <FormItemLayout
                         layout="flex-row-reverse"
-                        name="JWT_EXP"
                         label="Access token expiry time"
                         description="How long access tokens are valid for before they must be refreshed. Recommendation: 3600 seconds."
                       >
                         <FormControl className="w-full">
                           <InputGroup>
                             <FormInputGroupInput
-                              id="JWT_EXP"
                               type="number"
                               min={1}
                               {...field}
@@ -480,13 +472,11 @@ export const SessionsAuthSettingsForm = () => {
                     render={({ field }) => (
                       <FormItemLayout
                         layout="flex-row-reverse"
-                        name="REFRESH_TOKEN_ROTATION_ENABLED"
                         label="Detect and revoke potentially compromised refresh tokens"
                         description="Prevent replay attacks from potentially compromised refresh tokens."
                       >
                         <FormControl>
                           <Switch
-                            id="REFRESH_TOKEN_ROTATION_ENABLED"
                             checked={field.value}
                             onCheckedChange={field.onChange}
                             disabled={!canUpdateConfig}
@@ -503,14 +493,12 @@ export const SessionsAuthSettingsForm = () => {
                     render={({ field }) => (
                       <FormItemLayout
                         layout="flex-row-reverse"
-                        name="SECURITY_REFRESH_TOKEN_REUSE_INTERVAL"
                         label="Refresh token reuse interval"
                         description={`Time interval where the same refresh token can be used multiple times to request for an access token. Recommendation: 10 seconds. Maximum ${MAX_REFRESH_TOKEN_REUSE_INTERVAL_SECONDS} seconds (5 minutes).`}
                       >
                         <FormControl className="w-full">
                           <InputGroup>
                             <FormInputGroupInput
-                              id="SECURITY_REFRESH_TOKEN_REUSE_INTERVAL"
                               type="number"
                               min={0}
                               {...field}
diff --git a/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx b/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx
index aaa1bbbd6ce..d23c09d6e3c 100644
--- a/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx
+++ b/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx
@@ -146,7 +146,7 @@ export const EditSecretModal = () => {
                     render={({ field }) => (
                       <FormItemLayout name="name" label="Name">
                         <FormControl>
-                          <Input id="name" {...field} />
+                          <Input {...field} />
                         </FormControl>
                       </FormItemLayout>
                     )}
@@ -162,7 +162,7 @@ export const EditSecretModal = () => {
                         labelOptional="Optional"
                       >
                         <FormControl>
-                          <Input id="description" {...field} data-lpignore="true" />
+                          <Input {...field} data-lpignore="true" />
                         </FormControl>
                       </FormItemLayout>
                     )}
@@ -173,10 +173,9 @@ export const EditSecretModal = () => {
                     control={form.control}
                     render={({ field }) => (
                       <FormItemLayout name="secret" label="Secret value">
-                        <FormControl>
-                          <div className="relative">
+                        <div className="relative">
+                          <FormControl>
                             <Textarea
-                              id="secret"
                               {...field}
                               rows={1}
                               ref={(el) => {
@@ -200,18 +199,16 @@ export const EditSecretModal = () => {
                                   Math.max(40, e.currentTarget.scrollHeight) + 'px'
                               }}
                             />
-                            <Button
-                              variant="default"
-                              title={showSecretValue ? `Hide secret value` : `Show secret value`}
-                              aria-label={
-                                showSecretValue ? `Hide secret value` : `Show secret value`
-                              }
-                              className="absolute right-1 top-1 w-7"
-                              icon={showSecretValue ? <EyeOff /> : <Eye />}
-                              onClick={() => setShowSecretValue(!showSecretValue)}
-                            />
-                          </div>
-                        </FormControl>
+                          </FormControl>
+                          <Button
+                            variant="default"
+                            title={showSecretValue ? `Hide secret value` : `Show secret value`}
+                            aria-label={showSecretValue ? `Hide secret value` : `Show secret value`}
+                            className="absolute right-1 top-1 w-7"
+                            icon={showSecretValue ? <EyeOff /> : <Eye />}
+                            onClick={() => setShowSecretValue(!showSecretValue)}
+                          />
+                        </div>
                       </FormItemLayout>
                     )}
                   />
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx
index c4a38b2e5ed..dc95a80bbd1 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx
@@ -282,7 +282,6 @@ export const CreateWrapperSheet = ({
                       <FormItemLayout
                         layout="vertical"
                         label="Wrapper Name"
-                        name="wrapper_name"
                         description={
                           wrapper_name.length > 0 ? (
                             <>
@@ -295,7 +294,7 @@ export const CreateWrapperSheet = ({
                         }
                       >
                         <FormControl>
-                          <Input id="wrapper_name" {...field} />
+                          <Input {...field} />
                         </FormControl>
                       </FormItemLayout>
                     )}
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/InputField.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/InputField.tsx
index 9a17a2828a7..664fb36f4df 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/InputField.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/InputField.tsx
@@ -29,7 +29,6 @@ const InputField = <
       defaultValue={(option.defaultValue ?? '') as any}
       render={({ field }) => (
         <FormItemLayout
-          name={option.name}
           layout="vertical"
           label={
             <div className="flex items-center space-x-2">
@@ -55,11 +54,11 @@ const InputField = <
                 Fetching value from Vault...
               </span>
             ) : option.isTextArea ? (
-              <Textarea {...field} id={option.name} rows={6} className="input-mono resize-none" />
+              <Textarea {...field} rows={6} className="input-mono resize-none" />
             ) : option.secureEntry ? (
-              <PasswordInput copy reveal {...field} id={option.name} />
+              <PasswordInput copy reveal {...field} />
             ) : (
-              <Input {...field} id={option.name} />
+              <Input {...field} />
             )}
           </FormControl>
         </FormItemLayout>
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx
index c052e9551c2..0d7ccbcd348 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx
@@ -192,7 +192,7 @@ const Option = ({ option, control }: { option: TableOption; control: Control<Fie
         name={option.name}
         defaultValue={option.defaultValue}
         render={({ field }) => (
-          <FormItemLayout layout="vertical" label={option.label} name={option.name}>
+          <FormItemLayout layout="vertical" label={option.label}>
             <FormControl>
               <Select value={field.value} onValueChange={field.onChange}>
                 <SelectTrigger>
@@ -220,9 +220,9 @@ const Option = ({ option, control }: { option: TableOption; control: Control<Fie
       name={option.name}
       defaultValue={option.defaultValue ?? ''}
       render={({ field }) => (
-        <FormItemLayout layout="vertical" label={option.label} name={option.name}>
+        <FormItemLayout layout="vertical" label={option.label}>
           <FormControl>
-            <Input {...field} id={option.name} placeholder={option.placeholder ?? ''} />
+            <Input {...field} placeholder={option.placeholder ?? ''} />
           </FormControl>
         </FormItemLayout>
       )}
@@ -349,7 +349,6 @@ const TableForm = ({
             <FormItemLayout layout="vertical" label="Select a schema for the foreign table">
               <FormControl>
                 <Select
-                  name="schema"
                   value={field.value}
                   onValueChange={(schema) => {
                     field.onChange(schema)
@@ -380,9 +379,9 @@ const TableForm = ({
             control={form.control}
             name="schema_name"
             render={({ field }) => (
-              <FormItemLayout name="schema_name" layout="vertical" label="Schema name">
+              <FormItemLayout layout="vertical" label="Schema name">
                 <FormControl>
-                  <Input {...field} id="schema_name" />
+                  <Input {...field} />
                 </FormControl>
               </FormItemLayout>
             )}
@@ -395,12 +394,11 @@ const TableForm = ({
           render={({ field }) => (
             <FormItemLayout
               layout="vertical"
-              name="table_name"
               label="Table name"
               description="You can query from this table after the wrapper is enabled."
             >
               <FormControl>
-                <Input {...field} id="table_name" />
+                <Input {...field} />
               </FormControl>
             </FormItemLayout>
           )}
@@ -472,13 +470,9 @@ const TableForm = ({
                   control={form.control}
                   name={`columns.${columnIndex}.name`}
                   render={({ field }) => (
-                    <FormItemLayout
-                      layout="vertical"
-                      name={`columns.${columnIndex}.name`}
-                      label="Name"
-                    >
+                    <FormItemLayout layout="vertical" label="Name">
                       <FormControl>
-                        <Input {...field} id={`columns.${columnIndex}.name`} />
+                        <Input {...field} />
                       </FormControl>
                     </FormItemLayout>
                   )}
diff --git a/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx b/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx
index 8041ebe9b7d..b3273b870c2 100644
--- a/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx
@@ -171,7 +171,7 @@ const RenameQueryForm = ({ snippet, onCancel, onComplete }: RenameQueryFormProps
             render={({ field }) => (
               <FormItemLayout name="name" layout="vertical" label="Name">
                 <FormControl>
-                  <Input {...field} id="name" />
+                  <Input {...field} />
                 </FormControl>
               </FormItemLayout>
             )}
diff --git a/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx b/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
index 38c9cc76269..793038eb43b 100644
--- a/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
+++ b/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
@@ -198,13 +198,11 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                 control={form.control}
                 render={({ field }) => (
                   <FormItemLayout
-                    name="name"
                     label="Bucket name"
                     labelOptional="Cannot be changed after creation"
                   >
                     <FormControl>
                       <Input
-                        id="name"
                         data-1p-ignore
                         data-lpignore="true"
                         data-form-type="other"
@@ -228,18 +226,12 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                 render={({ field }) => (
                   <FormItemLayout
                     hideMessage
-                    name="public"
                     label="Public bucket"
                     description="Allow anyone to read objects without authorization"
                     layout="flex"
                   >
                     <FormControl>
-                      <Switch
-                        id="public"
-                        size="large"
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                      />
+                      <Switch size="large" checked={field.value} onCheckedChange={field.onChange} />
                     </FormControl>
                   </FormItemLayout>
                 )}
@@ -262,18 +254,12 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                 control={form.control}
                 render={({ field }) => (
                   <FormItemLayout
-                    name="has_file_size_limit"
                     label="Restrict file size"
                     description="Prevent uploading of files larger than a specified limit"
                     layout="flex"
                   >
                     <FormControl>
-                      <Switch
-                        id="has_file_size_limit"
-                        size="large"
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                      />
+                      <Switch size="large" checked={field.value} onCheckedChange={field.onChange} />
                     </FormControl>
                   </FormItemLayout>
                 )}
@@ -286,22 +272,11 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                     name="formatted_size_limit"
                     control={form.control}
                     render={({ field }) => (
-                      <FormItemLayout
-                        hideMessage
-                        name="formatted_size_limit"
-                        label="File size limit"
-                      >
+                      <FormItemLayout hideMessage label="File size limit">
                         <div className="grid grid-cols-12 gap-x-2">
                           <div className="col-span-8">
                             <FormControl>
-                              <Input
-                                id="formatted_size_limit"
-                                aria-label="File size limit"
-                                type="number"
-                                min={0}
-                                placeholder="0"
-                                {...field}
-                              />
+                              <Input type="number" min={0} placeholder="0" {...field} />
                             </FormControl>
                           </div>
                           <div className="col-span-4">
@@ -357,7 +332,7 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
 
             <DialogSection className="space-y-2">
               <FormItemLayout
-                name="has_allowed_mime_types"
+                id="has_allowed_mime_types"
                 label="Restrict MIME types"
                 description="Allow only certain types of files to be uploaded"
                 layout="flex"
@@ -378,14 +353,12 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                   control={form.control}
                   render={({ field }) => (
                     <FormItemLayout
-                      name="allowed_mime_types"
                       label="Allowed MIME types"
                       labelOptional="Comma separated values"
                       description="Wildcards are allowed, e.g. image/*."
                     >
                       <FormControl>
                         <Input
-                          id="allowed_mime_types"
                           {...field}
                           placeholder="e.g image/jpeg, image/png, audio/mpeg, video/mp4, etc"
                         />
diff --git a/apps/studio/components/interfaces/Storage/EditBucketModal.tsx b/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
index 125d45e2d09..a2a723364ae 100644
--- a/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
+++ b/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
@@ -212,12 +212,11 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                 render={({ field }) => (
                   <FormItemLayout
                     hideMessage
-                    name="name"
                     label="Bucket name"
                     labelOptional="Cannot be changed after creation"
                   >
                     <FormControl>
-                      <Input id="name" {...field} disabled />
+                      <Input {...field} disabled />
                     </FormControl>
                   </FormItemLayout>
                 )}
@@ -231,14 +230,12 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                   render={({ field }) => (
                     <FormItemLayout
                       hideMessage
-                      name="public"
                       label="Public bucket"
                       description="Allow anyone to read objects without authorization"
                       layout="flex"
                     >
                       <FormControl>
                         <Switch
-                          id="public"
                           size="large"
                           checked={field.value}
                           onCheckedChange={field.onChange}
@@ -292,18 +289,12 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                 control={form.control}
                 render={({ field }) => (
                   <FormItemLayout
-                    name="has_file_size_limit"
                     label="Restrict file size"
                     description="Prevent uploading of files larger than a specified limit"
                     layout="flex"
                   >
                     <FormControl>
-                      <Switch
-                        id="has_file_size_limit"
-                        size="large"
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                      />
+                      <Switch size="large" checked={field.value} onCheckedChange={field.onChange} />
                     </FormControl>
                   </FormItemLayout>
                 )}
@@ -315,16 +306,11 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                     name="formatted_size_limit"
                     control={form.control}
                     render={({ field }) => (
-                      <FormItemLayout
-                        hideMessage
-                        name="formatted_size_limit"
-                        label="File size limit"
-                      >
+                      <FormItemLayout hideMessage label="File size limit">
                         <div className="grid grid-cols-12 gap-x-2">
                           <div className="col-span-8">
                             <FormControl>
                               <Input
-                                id="formatted_size_limit"
                                 aria-label="File size limit"
                                 type="number"
                                 min={0}
@@ -386,14 +372,12 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
 
             <DialogSection className="space-y-2">
               <FormItemLayout
-                name="has_allowed_mime_types"
                 label="Restrict MIME types"
                 description="Allow only certain types of files to be uploaded"
                 layout="flex"
               >
                 <FormControl>
                   <Switch
-                    id="has_allowed_mime_types"
                     size="large"
                     checked={hasAllowedMimeTypes}
                     onCheckedChange={setHasAllowedMimeTypes}
@@ -407,14 +391,12 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                   control={form.control}
                   render={({ field }) => (
                     <FormItemLayout
-                      name="allowed_mime_types"
                       label="Allowed MIME types"
                       labelOptional="Comma separated values"
                       description="Wildcards are allowed, e.g. image/*."
                     >
                       <FormControl>
                         <Input
-                          id="allowed_mime_types"
                           {...field}
                           placeholder="e.g image/jpeg, image/png, audio/mpeg, video/mp4, etc"
                         />
diff --git a/apps/studio/components/interfaces/Support/DashboardLogsToggle.tsx b/apps/studio/components/interfaces/Support/DashboardLogsToggle.tsx
index 35f20e34840..3aa8056790b 100644
--- a/apps/studio/components/interfaces/Support/DashboardLogsToggle.tsx
+++ b/apps/studio/components/interfaces/Support/DashboardLogsToggle.tsx
@@ -1,7 +1,14 @@
 import { ChevronRight } from 'lucide-react'
 import { useMemo, useState } from 'react'
 import type { UseFormReturn } from 'react-hook-form'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger, FormField, Switch } from 'ui'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  FormControl,
+  FormField,
+  Switch,
+} from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import { DASHBOARD_LOG_CATEGORIES } from './dashboard-logs'
@@ -33,7 +40,6 @@ export function DashboardLogsToggle({
       render={({ field }) => (
         <FormItemLayout
           hideMessage
-          name="attachDashboardLogs"
           className={className}
           layout="flex"
           align={align}
@@ -68,12 +74,9 @@ export function DashboardLogsToggle({
             </div>
           }
         >
-          <Switch
-            size="large"
-            id="attachDashboardLogs"
-            checked={field.value}
-            onCheckedChange={field.onChange}
-          />
+          <FormControl>
+            <Switch size="large" checked={field.value} onCheckedChange={field.onChange} />
+          </FormControl>
         </FormItemLayout>
       )}
     />
diff --git a/apps/studio/components/interfaces/Support/SupportAccessToggle.tsx b/apps/studio/components/interfaces/Support/SupportAccessToggle.tsx
index 674ed5a11d2..0d3ba10a5df 100644
--- a/apps/studio/components/interfaces/Support/SupportAccessToggle.tsx
+++ b/apps/studio/components/interfaces/Support/SupportAccessToggle.tsx
@@ -3,7 +3,15 @@
 import { ChevronRight } from 'lucide-react'
 import Link from 'next/link'
 import type { UseFormReturn } from 'react-hook-form'
-import { Badge, Collapsible, CollapsibleContent, CollapsibleTrigger, FormField, Switch } from 'ui'
+import {
+  Badge,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  FormControl,
+  FormField,
+  Switch,
+} from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import type { SupportFormValues } from './SupportForm.schema'
@@ -23,7 +31,6 @@ export function SupportAccessToggle({ form, align = 'left', className }: Support
         return (
           <FormItemLayout
             hideMessage
-            name="allowSupportAccess"
             className={className}
             layout="flex"
             align={align}
@@ -75,12 +82,9 @@ export function SupportAccessToggle({ form, align = 'left', className }: Support
               </div>
             }
           >
-            <Switch
-              size="large"
-              id="allowSupportAccess"
-              checked={field.value}
-              onCheckedChange={field.onChange}
-            />
+            <FormControl>
+              <Switch size="large" checked={field.value} onCheckedChange={field.onChange} />
+            </FormControl>
           </FormItemLayout>
         )
       }}
diff --git a/packages/ui-patterns/src/form/Layout/FormLayout.tsx b/packages/ui-patterns/src/form/Layout/FormLayout.tsx
index 37f67aa61a3..2b2db87dca1 100644
--- a/packages/ui-patterns/src/form/Layout/FormLayout.tsx
+++ b/packages/ui-patterns/src/form/Layout/FormLayout.tsx
@@ -398,7 +398,7 @@ 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}
+                  htmlFor={id}
                 >
                   <LabelContents />
                 </FormLabel>
diff --git a/packages/ui/src/components/shadcn/ui/form.tsx b/packages/ui/src/components/shadcn/ui/form.tsx
index 25db5a4ff66..f1bfd096cbb 100644
--- a/packages/ui/src/components/shadcn/ui/form.tsx
+++ b/packages/ui/src/components/shadcn/ui/form.tsx
@@ -91,7 +91,7 @@ FormItem.displayName = 'FormItem'
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & { enableSelection?: boolean }
->(({ className, enableSelection = false, ...props }, ref) => {
+>(({ className, enableSelection = false, htmlFor, ...props }, ref) => {
   const { error, formItemId } = useFormField()
 
   const Comp = enableSelection ? 'label' : Label
@@ -106,7 +106,7 @@ const FormLabel = React.forwardRef<
         className,
         'leading-normal'
       )}
-      htmlFor={formItemId}
+      htmlFor={htmlFor ?? formItemId}
       {...props}
     />
   )