From bfb0737d1447e37d65e7cae3f13e33841a01a2bb Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Tue, 8 Sep 2026 09:47:32 +0200
Subject: [PATCH] Fix to ensure labels, descriptions and validation errors are
 correctly linked to their inputs (#50080)

## Problem

`FormItemLayout` does not correctly binds inputs descriptions and
validation messages to their inputs. This is because the input ids are
generated and not correctly propagated to the `FormMessage` and
`FormDescription` components. Besides, we still pass `name` or `id`
directly to the inputs or `FormItemLayout` in some places.

## Solution

- Fix `FormItemLayout` to correctly binds inputs descriptions and
validation messages to their inputs
- Fix incorrect usages
- Fix Design System documentation

## How to test

The issue is visible in production:
- Open https://supabase.com/design-system/docs/ui-patterns/forms
- Open the devtool and check the labels `for`, the description `id` and
the input `id` or `aria-describedby` attributes. You'll see they often
don't match

Do the same on staging:
- Open
https://design-system-git-fix-a11y-form-input-descriptions-supabase.vercel.app/design-system/docs/ui-patterns/forms
- Open the devtool and check the labels `for`, the description `id` and
the input `id` or `aria-describedby` attributes. They now match

Dashboard fixes:
-
https://studio-staging-git-fix-a11y-form-input-descriptions-supabase.vercel.app/dashboard/account/tokens:
_Expires in_ select button is now correctly linked to its label
-
https://studio-staging-git-fix-a11y-form-input-descriptions-supabase.vercel.app/dashboard/account/me:
the switches are now correctly linked to their label
- In Database/Indexes: the select buttons when creating an index are now
correctly linked to their label
- All other changes are the same things
---
 .../default/example/date-picker-form.tsx      |  13 +-
 .../example/form-patterns-pagelayout.tsx      |  42 +--
 .../example/form-patterns-sidepanel.tsx       |  42 +--
 .../AccessTokens/Scoped/Form/TokenDetails.tsx |  32 +--
 .../Account/Preferences/DashboardToggle.tsx   |   8 +-
 .../Auth/AuthProvidersForm/FormField.tsx      | 109 ++++----
 .../Database/Indexes/CreateIndexSidePanel.tsx | 243 +++++++++---------
 .../Integrations/Wrappers/ColumnType.tsx      |  50 ++--
 .../ProjectCreation/OrganizationSelector.tsx  |  53 ++--
 .../ProjectCreation/ProjectNameInput.tsx      |   4 +-
 .../src/form/Layout/FormLayout.tsx            |   1 -
 11 files changed, 291 insertions(+), 306 deletions(-)

diff --git a/apps/design-system/registry/default/example/date-picker-form.tsx b/apps/design-system/registry/default/example/date-picker-form.tsx
index 52aa14fc345..129fc91412f 100644
--- a/apps/design-system/registry/default/example/date-picker-form.tsx
+++ b/apps/design-system/registry/default/example/date-picker-form.tsx
@@ -8,6 +8,7 @@ import {
   Button,
   Calendar,
   Form,
+  FormControl,
   FormDescription,
   FormField,
   FormItem,
@@ -53,11 +54,13 @@ export default function DatePickerForm() {
             <FormItem className="flex flex-col">
               <FormLabel>Date of birth</FormLabel>
               <DatePicker>
-                <DatePickerTrigger asChild>
-                  <DatePickerButton isInvalid={fieldState.invalid}>
-                    {field.value ? format(field.value, 'PPP') : 'Pick a date'}
-                  </DatePickerButton>
-                </DatePickerTrigger>
+                <FormControl>
+                  <DatePickerTrigger asChild>
+                    <DatePickerButton isInvalid={fieldState.invalid}>
+                      {field.value ? format(field.value, 'PPP') : 'Pick a date'}
+                    </DatePickerButton>
+                  </DatePickerTrigger>
+                </FormControl>
                 <DatePickerContent>
                   <Calendar
                     mode="single"
diff --git a/apps/design-system/registry/default/example/form-patterns-pagelayout.tsx b/apps/design-system/registry/default/example/form-patterns-pagelayout.tsx
index 59ba2b740fd..c228ab15c82 100644
--- a/apps/design-system/registry/default/example/form-patterns-pagelayout.tsx
+++ b/apps/design-system/registry/default/example/form-patterns-pagelayout.tsx
@@ -613,14 +613,16 @@ export default function FormPatternsPageLayout() {
                           values={field.value}
                           size="small"
                         >
-                          <MultiSelectorTrigger
-                            mode="inline-combobox"
-                            label="Select options..."
-                            badgeLimit="wrap"
-                            showIcon={false}
-                            deletableBadge
-                            className="w-full"
-                          />
+                          <FormControl>
+                            <MultiSelectorTrigger
+                              mode="inline-combobox"
+                              label="Select options..."
+                              badgeLimit="wrap"
+                              showIcon={false}
+                              deletableBadge
+                              className="w-full"
+                            />
+                          </FormControl>
                           <MultiSelectorContent>
                             <MultiSelectorList>
                               <MultiSelectorItem value="public">public</MultiSelectorItem>
@@ -675,23 +677,23 @@ export default function FormPatternsPageLayout() {
                         label="Date Picker"
                         description="Date selection with calendar popover"
                       >
-                        <FormControl>
-                          <DatePicker>
+                        <DatePicker>
+                          <FormControl>
                             <DatePickerTrigger asChild>
                               <DatePickerButton block isInvalid={fieldState.invalid}>
                                 {field.value ? format(field.value, 'PPP') : 'Pick a date'}
                               </DatePickerButton>
                             </DatePickerTrigger>
-                            <DatePickerContent>
-                              <Calendar
-                                mode="single"
-                                selected={field.value}
-                                onSelect={field.onChange}
-                                initialFocus
-                              />
-                            </DatePickerContent>
-                          </DatePicker>
-                        </FormControl>
+                          </FormControl>
+                          <DatePickerContent>
+                            <Calendar
+                              mode="single"
+                              selected={field.value}
+                              onSelect={field.onChange}
+                              initialFocus
+                            />
+                          </DatePickerContent>
+                        </DatePicker>
                       </FormItemLayout>
                     )}
                   />
diff --git a/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx b/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx
index c3e734a6d7e..090dce8da98 100644
--- a/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx
+++ b/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx
@@ -610,14 +610,16 @@ export default function FormPatternsSidePanel() {
                           size="small"
                           className="w-full"
                         >
-                          <MultiSelectorTrigger
-                            mode="inline-combobox"
-                            label="Select options..."
-                            badgeLimit="wrap"
-                            showIcon={false}
-                            deletableBadge
-                            className="w-full"
-                          />
+                          <FormControl>
+                            <MultiSelectorTrigger
+                              mode="inline-combobox"
+                              label="Select options..."
+                              badgeLimit="wrap"
+                              showIcon={false}
+                              deletableBadge
+                              className="w-full"
+                            />
+                          </FormControl>
                           <MultiSelectorContent>
                             <MultiSelectorList>
                               <MultiSelectorItem value="public">public</MultiSelectorItem>
@@ -677,23 +679,23 @@ export default function FormPatternsSidePanel() {
                       label="Date Picker"
                       description="Date selection with calendar popover"
                     >
-                      <FormControl className="col-span-6">
-                        <DatePicker>
+                      <DatePicker>
+                        <FormControl className="col-span-6">
                           <DatePickerTrigger asChild>
                             <DatePickerButton block isInvalid={fieldState.invalid}>
                               {field.value ? format(field.value, 'PPP') : 'Pick a date'}
                             </DatePickerButton>
                           </DatePickerTrigger>
-                          <DatePickerContent>
-                            <Calendar
-                              mode="single"
-                              selected={field.value}
-                              onSelect={field.onChange}
-                              initialFocus
-                            />
-                          </DatePickerContent>
-                        </DatePicker>
-                      </FormControl>
+                        </FormControl>
+                        <DatePickerContent>
+                          <Calendar
+                            mode="single"
+                            selected={field.value}
+                            onSelect={field.onChange}
+                            initialFocus
+                          />
+                        </DatePickerContent>
+                      </DatePicker>
                     </FormItemLayout>
                   )}
                 />
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 7ef6accc758..48d2897c301 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/TokenDetails.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/TokenDetails.tsx
@@ -72,25 +72,25 @@ export const TokenDetails = ({ control, setValue }: TokenDetailsProps) => {
         name="expiresAt"
         control={control}
         render={({ field }) => (
-          <FormItemLayout id="expiresAt" label="Expires in" layout="flex-row-reverse">
+          <FormItemLayout label="Expires in" layout="flex-row-reverse">
             <div className="flex gap-2 w-full">
-              <FormControl className="grow">
-                <Select value={field.value} onValueChange={handleExpiryChange}>
-                  <SelectTrigger id="expiresAt">
+              <Select value={field.value} onValueChange={handleExpiryChange}>
+                <FormControl className="grow">
+                  <SelectTrigger>
                     <SelectValue placeholder="Select an expiry" />
                   </SelectTrigger>
-                  <SelectContent>
-                    {EXPIRY_OPTIONS.map((option) => (
-                      <SelectItem key={option.value} value={option.value}>
-                        <span className="flex items-center gap-2">
-                          {option.label}
-                          {option.recommended && <Badge variant="success">Recommended</Badge>}
-                        </span>
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </FormControl>
+                </FormControl>
+                <SelectContent>
+                  {EXPIRY_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      <span className="flex items-center gap-2">
+                        {option.label}
+                        {option.recommended && <Badge variant="success">Recommended</Badge>}
+                      </span>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
 
               {field.value === 'custom' && (
                 <FormField
diff --git a/apps/studio/components/interfaces/Account/Preferences/DashboardToggle.tsx b/apps/studio/components/interfaces/Account/Preferences/DashboardToggle.tsx
index f770132e89a..6fd365221b5 100644
--- a/apps/studio/components/interfaces/Account/Preferences/DashboardToggle.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/DashboardToggle.tsx
@@ -26,15 +26,9 @@ export function DashboardToggle<T extends FieldValues>({
         control={form.control}
         name={name}
         render={({ field }) => (
-          <FormItemLayout
-            layout="flex-row-reverse"
-            label={label}
-            description={description}
-            id={name}
-          >
+          <FormItemLayout layout="flex-row-reverse" label={label} description={description}>
             <FormControl>
               <Switch
-                id={name}
                 checked={field.value}
                 onCheckedChange={(value) => {
                   field.onChange(value)
diff --git a/apps/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx b/apps/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
index f6520fc841d..8f480f2d05d 100644
--- a/apps/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
+++ b/apps/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
@@ -118,8 +118,8 @@ const FormField = ({
                     ) : null
                   }
                 >
-                  <FormControl>
-                    <Popover>
+                  <Popover>
+                    <FormControl>
                       <PopoverTrigger asChild>
                         <Button
                           variant="outline"
@@ -130,18 +130,18 @@ const FormField = ({
                           {field.value ? format(new Date(field.value), 'PPP') : 'Pick a date'}
                         </Button>
                       </PopoverTrigger>
-                      <PopoverContent className="w-auto p-0" align="start">
-                        <Calendar
-                          mode="single"
-                          selected={field.value}
-                          onSelect={(date) => {
-                            field.onChange(date?.toISOString())
-                          }}
-                          initialFocus
-                        />
-                      </PopoverContent>
-                    </Popover>
-                  </FormControl>
+                    </FormControl>
+                    <PopoverContent className="w-auto p-0" align="start">
+                      <Calendar
+                        mode="single"
+                        selected={field.value}
+                        onSelect={(date) => {
+                          field.onChange(date?.toISOString())
+                        }}
+                        initialFocus
+                      />
+                    </PopoverContent>
+                  </Popover>
                 </FormItemLayout>
               )}
             />
@@ -170,16 +170,9 @@ const FormField = ({
                 >
                   <FormControl className="col-span-6">
                     {properties.isSecret ? (
-                      <DataInput
-                        {...field}
-                        id={name}
-                        size="small"
-                        copy
-                        reveal
-                        readOnly={readOnly}
-                      />
+                      <DataInput {...field} size="small" copy reveal readOnly={readOnly} />
                     ) : (
-                      <Input {...field} id={name} readOnly={readOnly} />
+                      <Input {...field} readOnly={readOnly} />
                     )}
                   </FormControl>
                 </FormItemLayout>
@@ -211,7 +204,6 @@ const FormField = ({
                   <FormControl className="col-span-6">
                     <Textarea
                       {...field}
-                      id={name}
                       rows={4}
                       placeholder="Enter multi-line text"
                       className="resize-none"
@@ -244,12 +236,11 @@ const FormField = ({
                     ) : null
                   }
                 >
-                  <FormControl className="col-span-6">
-                    {properties.units ? (
+                  {properties.units ? (
+                    <FormControl className="col-span-6">
                       <InputGroup>
                         <FormInputGroupInput
                           {...field}
-                          id={name}
                           type="number"
                           onChange={(e) =>
                             field.onChange(e.target.value === '' ? '' : Number(e.target.value))
@@ -262,18 +253,19 @@ const FormField = ({
                           </ReactMarkdown>
                         </InputGroupAddon>
                       </InputGroup>
-                    ) : (
+                    </FormControl>
+                  ) : (
+                    <FormControl className="col-span-6">
                       <Input
                         {...field}
-                        id={name}
                         type="number"
                         onChange={(e) =>
                           field.onChange(e.target.value === '' ? '' : Number(e.target.value))
                         }
                         readOnly={readOnly}
                       />
-                    )}
-                  </FormControl>
+                    </FormControl>
+                  )}
                 </FormItemLayout>
               )}
             />
@@ -310,12 +302,7 @@ const FormField = ({
                   }
                 >
                   <FormControl className="col-span-6">
-                    <Switch
-                      id={name}
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
-                      size="small"
-                    />
+                    <Switch checked={field.value} onCheckedChange={field.onChange} size="small" />
                   </FormControl>
                 </FormItemLayout>
               )}
@@ -347,33 +334,33 @@ const FormField = ({
                     ) : null
                   }
                 >
-                  <FormControl className="col-span-6">
-                    <Select
-                      defaultValue={properties.enum[0]?.value}
-                      value={field.value}
-                      onValueChange={field.onChange}
-                    >
+                  <Select
+                    defaultValue={properties.enum[0]?.value}
+                    value={field.value}
+                    onValueChange={field.onChange}
+                  >
+                    <FormControl className="col-span-6">
                       <SelectTrigger>
                         <SelectValue placeholder="Select an option" />
                       </SelectTrigger>
-                      <SelectContent>
-                        {properties.enum.map((option: Enum) => (
-                          <SelectItem key={option.value} value={option.value}>
-                            <span className="flex gap-2 items-center">
-                              {option.icon ? (
-                                <img
-                                  alt={`${option.label} icon`}
-                                  className="h-6 w-6"
-                                  src={`${BASE_PATH}/img/icons/${option.icon}`}
-                                />
-                              ) : null}
-                              {option.label}
-                            </span>
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </FormControl>
+                    </FormControl>
+                    <SelectContent>
+                      {properties.enum.map((option: Enum) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          <span className="flex gap-2 items-center">
+                            {option.icon ? (
+                              <img
+                                alt={`${option.label} icon`}
+                                className="h-6 w-6"
+                                src={`${BASE_PATH}/img/icons/${option.icon}`}
+                              />
+                            ) : null}
+                            {option.label}
+                          </span>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
                 </FormItemLayout>
               )}
             />
diff --git a/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx b/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx
index 934d7e178a7..954f42ac690 100644
--- a/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx
+++ b/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx
@@ -201,16 +201,15 @@ CREATE INDEX ON "${selectedSchema}"."${selectedEntity}" USING ${selectedIndexTyp
                 control={form.control}
                 name="schema"
                 render={({ field }) => (
-                  <FormItemLayout layout="horizontal" label="Select a schema" id="schema">
-                    <FormControl className="col-span-6">
-                      <Popover
-                        modal={false}
-                        open={schemaDropdownOpen}
-                        onOpenChange={setSchemaDropdownOpen}
-                      >
+                  <FormItemLayout layout="horizontal" label="Select a schema">
+                    <Popover
+                      modal={false}
+                      open={schemaDropdownOpen}
+                      onOpenChange={setSchemaDropdownOpen}
+                    >
+                      <FormControl className="col-span-6">
                         <PopoverTrigger asChild>
                           <Button
-                            id="schema"
                             variant="default"
                             size={'medium'}
                             className={`w-full [&>span]:w-full text-left`}
@@ -225,56 +224,56 @@ CREATE INDEX ON "${selectedSchema}"."${selectedEntity}" USING ${selectedIndexTyp
                             {field.value || 'Choose a schema'}
                           </Button>
                         </PopoverTrigger>
-                        <PopoverContent
-                          className="p-0"
-                          side="bottom"
-                          align="start"
-                          sameWidthAsTrigger
-                        >
-                          <Command>
-                            <CommandInput
-                              placeholder="Find schema..."
-                              value={schemaSearchTerm}
-                              onValueChange={setSchemaSearchTerm}
-                            />
-                            <CommandList
-                              className={cn(
-                                (schemas ?? []).length > 7 && 'max-h-[210px]! overflow-y-auto'
-                              )}
-                              onWheel={(event) => event.stopPropagation()}
-                            >
-                              <CommandEmpty>No schemas found</CommandEmpty>
-                              <CommandGroup>
-                                {(schemas ?? []).map((schema) => (
-                                  <CommandItem
-                                    key={schema.name}
-                                    value={schema.name}
-                                    className="cursor-pointer flex items-center space-x-2 w-full"
-                                    onSelect={() => {
-                                      field.onChange(schema.name)
-                                      form.setValue('table', '')
-                                      form.setValue('columns', [])
-                                      form.setValue('type', INDEX_TYPES[0].value)
-                                      setSearchTerm('')
-                                    }}
-                                  >
-                                    <Check
-                                      className={cn(
-                                        'text-brand',
-                                        schema.name === field.value ? 'opacity-100' : 'opacity-0'
-                                      )}
-                                      strokeWidth={2}
-                                      size={16}
-                                    />
-                                    <span>{schema.name}</span>
-                                  </CommandItem>
-                                ))}
-                              </CommandGroup>
-                            </CommandList>
-                          </Command>
-                        </PopoverContent>
-                      </Popover>
-                    </FormControl>
+                      </FormControl>
+                      <PopoverContent
+                        className="p-0"
+                        side="bottom"
+                        align="start"
+                        sameWidthAsTrigger
+                      >
+                        <Command>
+                          <CommandInput
+                            placeholder="Find schema..."
+                            value={schemaSearchTerm}
+                            onValueChange={setSchemaSearchTerm}
+                          />
+                          <CommandList
+                            className={cn(
+                              (schemas ?? []).length > 7 && 'max-h-[210px]! overflow-y-auto'
+                            )}
+                            onWheel={(event) => event.stopPropagation()}
+                          >
+                            <CommandEmpty>No schemas found</CommandEmpty>
+                            <CommandGroup>
+                              {(schemas ?? []).map((schema) => (
+                                <CommandItem
+                                  key={schema.name}
+                                  value={schema.name}
+                                  className="cursor-pointer flex items-center space-x-2 w-full"
+                                  onSelect={() => {
+                                    field.onChange(schema.name)
+                                    form.setValue('table', '')
+                                    form.setValue('columns', [])
+                                    form.setValue('type', INDEX_TYPES[0].value)
+                                    setSearchTerm('')
+                                  }}
+                                >
+                                  <Check
+                                    className={cn(
+                                      'text-brand',
+                                      schema.name === field.value ? 'opacity-100' : 'opacity-0'
+                                    )}
+                                    strokeWidth={2}
+                                    size={16}
+                                  />
+                                  <span>{schema.name}</span>
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
                   </FormItemLayout>
                 )}
               />
@@ -290,25 +289,23 @@ CREATE INDEX ON "${selectedSchema}"."${selectedEntity}" USING ${selectedIndexTyp
                   <FormItemLayout
                     layout="horizontal"
                     label="Select a table"
-                    id="table"
                     description={
                       isSelectEntityDisabled &&
                       !isLoadingEntities &&
                       'Create a table in this schema via the Table or SQL editor first'
                     }
                   >
-                    <FormControl className="col-span-6">
-                      <Popover
-                        modal={false}
-                        open={tableDropdownOpen}
-                        onOpenChange={setTableDropdownOpen}
-                      >
+                    <Popover
+                      modal={false}
+                      open={tableDropdownOpen}
+                      onOpenChange={setTableDropdownOpen}
+                    >
+                      <FormControl className="col-span-6">
                         <PopoverTrigger
                           asChild
                           disabled={isSelectEntityDisabled || isLoadingEntities}
                         >
                           <Button
-                            id="table"
                             variant="default"
                             size="medium"
                             className={cn(
@@ -330,65 +327,65 @@ CREATE INDEX ON "${selectedSchema}"."${selectedEntity}" USING ${selectedIndexTyp
                                 : 'Choose a table'}
                           </Button>
                         </PopoverTrigger>
-                        <PopoverContent
-                          className="p-0"
-                          side="bottom"
-                          align="start"
-                          sameWidthAsTrigger
-                        >
-                          {/* [Terry] shouldFilter context:
+                      </FormControl>
+                      <PopoverContent
+                        className="p-0"
+                        side="bottom"
+                        align="start"
+                        sameWidthAsTrigger
+                      >
+                        {/* [Terry] shouldFilter context:
                           https://github.com/pacocoursey/cmdk/issues/267#issuecomment-2252717107 */}
-                          <Command shouldFilter={false}>
-                            <CommandInput
-                              placeholder="Find table..."
-                              value={searchTerm}
-                              onValueChange={handleSearchChange}
-                            />
-                            <CommandList
-                              className={cn(
-                                entityTypes.length > 7 && 'max-h-[210px]! overflow-y-auto'
+                        <Command shouldFilter={false}>
+                          <CommandInput
+                            placeholder="Find table..."
+                            value={searchTerm}
+                            onValueChange={handleSearchChange}
+                          />
+                          <CommandList
+                            className={cn(
+                              entityTypes.length > 7 && 'max-h-[210px]! overflow-y-auto'
+                            )}
+                            onWheel={(event) => event.stopPropagation()}
+                          >
+                            <CommandEmpty>
+                              {isLoadingEntities ? (
+                                <div className="flex items-center gap-2 text-center justify-center">
+                                  <Loader2 size={12} className="animate-spin" />
+                                  Loading...
+                                </div>
+                              ) : (
+                                'No tables found'
                               )}
-                              onWheel={(event) => event.stopPropagation()}
-                            >
-                              <CommandEmpty>
-                                {isLoadingEntities ? (
-                                  <div className="flex items-center gap-2 text-center justify-center">
-                                    <Loader2 size={12} className="animate-spin" />
-                                    Loading...
-                                  </div>
-                                ) : (
-                                  'No tables found'
-                                )}
-                              </CommandEmpty>
-                              <CommandGroup>
-                                {entityTypes.map((entity) => (
-                                  <CommandItem
-                                    key={entity.name}
-                                    className="cursor-pointer flex items-center space-x-2 w-full"
-                                    onSelect={() => {
-                                      field.onChange(entity.name)
-                                      setTableDropdownOpen(false)
-                                      form.setValue('columns', [])
-                                      form.setValue('type', INDEX_TYPES[0].value)
-                                    }}
-                                  >
-                                    <Check
-                                      className={cn(
-                                        'text-brand',
-                                        entity.name === field.value ? 'opacity-100' : 'opacity-0'
-                                      )}
-                                      strokeWidth={2}
-                                      size={16}
-                                    />
-                                    <span>{entity.name}</span>
-                                  </CommandItem>
-                                ))}
-                              </CommandGroup>
-                            </CommandList>
-                          </Command>
-                        </PopoverContent>
-                      </Popover>
-                    </FormControl>
+                            </CommandEmpty>
+                            <CommandGroup>
+                              {entityTypes.map((entity) => (
+                                <CommandItem
+                                  key={entity.name}
+                                  className="cursor-pointer flex items-center space-x-2 w-full"
+                                  onSelect={() => {
+                                    field.onChange(entity.name)
+                                    setTableDropdownOpen(false)
+                                    form.setValue('columns', [])
+                                    form.setValue('type', INDEX_TYPES[0].value)
+                                  }}
+                                >
+                                  <Check
+                                    className={cn(
+                                      'text-brand',
+                                      entity.name === field.value ? 'opacity-100' : 'opacity-0'
+                                    )}
+                                    strokeWidth={2}
+                                    size={16}
+                                  />
+                                  <span>{entity.name}</span>
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
                   </FormItemLayout>
                 )}
               />
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/ColumnType.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/ColumnType.tsx
index e317a199c98..6038d82f155 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/ColumnType.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/ColumnType.tsx
@@ -124,7 +124,7 @@ export const ColumnType = ({
               className={className}
             >
               <FormControl>
-                <Input {...field} id={name} disabled readOnly />
+                <Input {...field} disabled readOnly />
               </FormControl>
             </FormItemLayout>
           )
@@ -135,29 +135,31 @@ export const ColumnType = ({
               Type
             </FormLabel>
             <Popover modal open={open} onOpenChange={setOpen}>
-              <PopoverTrigger asChild>
-                <Button
-                  role="combobox"
-                  size={'small'}
-                  aria-expanded={open}
-                  aria-controls={listboxId}
-                  className={cn(
-                    'w-full justify-between bg-background-control',
-                    !field.value && 'text-foreground-lighter'
-                  )}
-                  iconRight={<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />}
-                  title={field.value && field.value.replaceAll('"', '')}
-                >
-                  {field.value ? (
-                    <div className="flex gap-2 items-center">
-                      <span>{inferIcon(getOptionByName(field.value)?.type ?? '')}</span>
-                      <span className="block truncate">{field.value.replaceAll('"', '')}</span>
-                    </div>
-                  ) : (
-                    'Choose a column type...'
-                  )}
-                </Button>
-              </PopoverTrigger>
+              <FormControl>
+                <PopoverTrigger asChild>
+                  <Button
+                    role="combobox"
+                    size={'small'}
+                    aria-expanded={open}
+                    aria-controls={listboxId}
+                    className={cn(
+                      'w-full justify-between bg-background-control',
+                      !field.value && 'text-foreground-lighter'
+                    )}
+                    iconRight={<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />}
+                    title={field.value && field.value.replaceAll('"', '')}
+                  >
+                    {field.value ? (
+                      <div className="flex gap-2 items-center">
+                        <span>{inferIcon(getOptionByName(field.value)?.type ?? '')}</span>
+                        <span className="block truncate">{field.value.replaceAll('"', '')}</span>
+                      </div>
+                    ) : (
+                      'Choose a column type...'
+                    )}
+                  </Button>
+                </PopoverTrigger>
+              </FormControl>
               <PopoverContent id={listboxId} className="w-[460px] p-0" side="bottom" align="center">
                 <Command>
                   <CommandInput
diff --git a/apps/studio/components/interfaces/ProjectCreation/OrganizationSelector.tsx b/apps/studio/components/interfaces/ProjectCreation/OrganizationSelector.tsx
index 13effc013d9..5d127d30892 100644
--- a/apps/studio/components/interfaces/ProjectCreation/OrganizationSelector.tsx
+++ b/apps/studio/components/interfaces/ProjectCreation/OrganizationSelector.tsx
@@ -58,36 +58,35 @@ export const OrganizationSelector = ({
         control={form.control}
         name="organization"
         render={({ field }) => (
-          <FormItemLayout id="organization" label="Organization" layout="horizontal">
+          <FormItemLayout label="Organization" layout="horizontal">
             {(organizations?.length ?? 0) > 0 && (
-              <FormControl>
-                <Select
-                  name="organization"
-                  onValueChange={(slug) => {
-                    field.onChange(slug)
-                    router.push(`/new/${slug}`)
-                  }}
-                  value={field.value}
-                  defaultValue={field.value}
-                  disabled={disableOrganizationSelection}
-                >
-                  <SelectTrigger id="organization">
+              <Select
+                onValueChange={(slug) => {
+                  field.onChange(slug)
+                  router.push(`/new/${slug}`)
+                }}
+                value={field.value}
+                defaultValue={field.value}
+                disabled={disableOrganizationSelection}
+              >
+                <FormControl>
+                  <SelectTrigger>
                     <SelectValue placeholder="Select an organization" />
                   </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      {organizations?.map((x) => (
-                        <SelectItem key={x.id} value={x.slug}>
-                          <div className="flex justify-between items-center gap-2 w-full">
-                            <span>{x.name}</span>
-                            <Badge className="mt-px">{x.plan.name}</Badge>
-                          </div>
-                        </SelectItem>
-                      ))}
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-              </FormControl>
+                </FormControl>
+                <SelectContent>
+                  <SelectGroup>
+                    {organizations?.map((x) => (
+                      <SelectItem key={x.id} value={x.slug}>
+                        <div className="flex justify-between items-center gap-2 w-full">
+                          <span>{x.name}</span>
+                          <Badge className="mt-px">{x.plan.name}</Badge>
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
             )}
           </FormItemLayout>
         )}
diff --git a/apps/studio/components/interfaces/ProjectCreation/ProjectNameInput.tsx b/apps/studio/components/interfaces/ProjectCreation/ProjectNameInput.tsx
index c415cd64d6f..a8f53ec33af 100644
--- a/apps/studio/components/interfaces/ProjectCreation/ProjectNameInput.tsx
+++ b/apps/studio/components/interfaces/ProjectCreation/ProjectNameInput.tsx
@@ -16,9 +16,9 @@ export const ProjectNameInput = ({ form }: ProjectNameInputProps) => {
         control={form.control}
         name="projectName"
         render={({ field }) => (
-          <FormItemLayout id="projectName" label="Project name" layout="horizontal">
+          <FormItemLayout label="Project name" layout="horizontal">
             <FormControl>
-              <Input {...field} id="projectName" placeholder="Project name" />
+              <Input {...field} placeholder="Project name" />
             </FormControl>
           </FormItemLayout>
         )}
diff --git a/packages/ui-patterns/src/form/Layout/FormLayout.tsx b/packages/ui-patterns/src/form/Layout/FormLayout.tsx
index 284e6a9faaf..a9973bed9a8 100644
--- a/packages/ui-patterns/src/form/Layout/FormLayout.tsx
+++ b/packages/ui-patterns/src/form/Layout/FormLayout.tsx
@@ -333,7 +333,6 @@ export const FormLayout = React.forwardRef<
         <FormDescription
           className={cn(DescriptionVariants({ size, layout }))}
           data-formlayout-id={'description'}
-          id={`${id}-description`}
         >
           {description}
         </FormDescription>