From 7331a2e8c323f693bf84c90d0cabe610502553cc Mon Sep 17 00:00:00 2001
From: Luminessa Starlight <git@samsch.org>
Date: Thu, 21 Aug 2025 15:23:23 -0400
Subject: [PATCH] Revert: "Accessibility: Ensure dashboard edit panel inputs
 have accessible labels" (#109984)

* Revert "Accessibility: Ensure dashboard edit panel inputs have accessible labels (#109546)"

This reverts commit 4d067059c945f19c0429bd59b20c9b2e92a18908.

* kick CI
---
 ...shboards-edit-panel-transparent-bg.spec.ts |  2 +-
 .../panels-suite/table-kitchenSink.spec.ts    |  4 +-
 .../panels-suite/geomap-map-controls.spec.ts  | 10 ++---
 .../components/ColorPicker/ColorPicker.tsx    |  3 +-
 .../ColorPicker/ColorPickerPopover.tsx        |  1 -
 .../components/MatchersUI/FieldNamePicker.tsx |  3 +-
 .../MatchersUI/FieldsByFrameRefIdMatcher.tsx  |  8 +---
 .../src/components/UnitPicker/UnitPicker.tsx  |  4 +-
 .../NestedFolderPicker/NestedFolderPicker.tsx |  5 ---
 .../core/components/OptionsUI/NumberInput.tsx |  2 -
 .../app/core/components/OptionsUI/color.tsx   |  4 +-
 .../core/components/OptionsUI/multiSelect.tsx |  3 +-
 .../app/core/components/OptionsUI/number.tsx  |  3 +-
 .../app/core/components/OptionsUI/select.tsx  |  3 +-
 .../app/core/components/OptionsUI/slider.tsx  |  4 +-
 .../app/core/components/OptionsUI/string.tsx  |  3 +-
 .../app/core/components/OptionsUI/units.tsx   |  6 +--
 .../ConditionalRenderingEditor.tsx            |  3 --
 .../edit-pane/DashboardEditableElement.tsx    |  5 +--
 .../edit-pane/VizPanelEditableElement.tsx     | 12 +++---
 .../panel-edit/getPanelFrameOptions.tsx       |  8 ++--
 .../layout-auto-grid/AutoGridItemEditor.tsx   |  4 +-
 .../DashboardGridItemEditor.tsx               |  9 ++--
 .../SceneGridRowEditableElement.tsx           | 14 +++----
 .../scene/layout-rows/RowItemEditor.tsx       | 24 ++++-------
 .../scene/layout-tabs/TabItemEditor.tsx       | 13 ++----
 .../variables/VariableEditableElement.tsx     | 18 +++-----
 .../components/CustomVariableForm.tsx         |  7 +---
 .../editors/ConstantVariableEditor.tsx        |  7 +---
 .../editors/CustomVariableEditor.tsx          |  7 +---
 .../editors/DataSourceVariableEditor.tsx      | 18 ++------
 .../editors/SystemVariableEditor.tsx          |  1 +
 .../useVariableSelectionOptionsCategory.tsx   | 41 +++++-------------
 .../PanelEditor/OptionsPaneItemDescriptor.tsx |  6 ++-
 .../PanelEditor/getFieldOverrideElements.tsx  | 42 ++++++++++++++-----
 .../PanelEditor/getLibraryPanelOptions.tsx    |  8 +---
 .../PanelEditor/getPanelFrameOptions.tsx      | 22 ++++------
 .../PanelEditor/getVisualizationOptions.tsx   | 21 +++-------
 .../state/OptionSearchEngine.test.ts          | 14 -------
 .../editors/ColorDimensionEditor.tsx          |  3 +-
 .../editors/ScalarDimensionEditor.tsx         |  5 +--
 .../editors/ScaleDimensionEditor.tsx          | 15 +++----
 .../editors/TextDimensionEditor.tsx           |  9 +---
 .../geo/editor/locationModeEditor.tsx         |  2 -
 public/app/plugins/panel/alertlist/module.tsx |  3 +-
 .../geomap/editor/FrameSelectionEditor.tsx    |  3 +-
 .../panel/geomap/editor/MapViewEditor.tsx     |  8 +---
 .../panel/geomap/editor/StyleEditor.tsx       | 31 +-------------
 .../plugins/panel/table/PaginationEditor.tsx  |  4 +-
 .../panel/table/TableCellOptionEditor.tsx     |  5 +--
 .../table/cells/AutoCellOptionsEditor.tsx     |  6 +--
 .../ColorBackgroundCellOptionsEditor.tsx      | 10 +----
 .../table/cells/ImageCellOptionsEditor.tsx    |  9 ++--
 .../cells/SparklineCellOptionsEditor.tsx      |  5 +--
 .../table/table-new/PaginationEditor.tsx      |  3 +-
 .../table/table-new/TableCellOptionEditor.tsx |  5 +--
 .../ColorBackgroundCellOptionsEditor.tsx      |  5 ---
 .../cells/ImageCellOptionsEditor.tsx          |  9 ++--
 .../cells/SparklineCellOptionsEditor.tsx      |  5 +--
 .../table-new/cells/TextWrapOptionsEditor.tsx |  5 ---
 .../plugins/panel/xychart/SeriesEditor.tsx    | 13 +-----
 61 files changed, 166 insertions(+), 369 deletions(-)

diff --git a/e2e-playwright/dashboard-new-layouts/dashboards-edit-panel-transparent-bg.spec.ts b/e2e-playwright/dashboard-new-layouts/dashboards-edit-panel-transparent-bg.spec.ts
index a7ef95b1f4d..d483b7b8005 100644
--- a/e2e-playwright/dashboard-new-layouts/dashboards-edit-panel-transparent-bg.spec.ts
+++ b/e2e-playwright/dashboard-new-layouts/dashboards-edit-panel-transparent-bg.spec.ts
@@ -34,7 +34,7 @@ test.describe(
       const initialBackground = await panelTitle.evaluate((el) => getComputedStyle(el).background);
       expect(initialBackground).not.toMatch(/rgba\(0, 0, 0, 0\)/);
 
-      await page.getByRole('switch', { name: 'Transparent background' }).click({ force: true });
+      await page.locator('#transparent-background').click({ force: true });
 
       const transparentBackground = await panelTitle.evaluate((el) => getComputedStyle(el).background);
       expect(transparentBackground).toMatch(/rgba\(0, 0, 0, 0\)/);
diff --git a/e2e-playwright/panels-suite/table-kitchenSink.spec.ts b/e2e-playwright/panels-suite/table-kitchenSink.spec.ts
index 739646813f8..7b5f1d84967 100644
--- a/e2e-playwright/panels-suite/table-kitchenSink.spec.ts
+++ b/e2e-playwright/panels-suite/table-kitchenSink.spec.ts
@@ -95,8 +95,8 @@ test.describe('Panels test: Table - Kitchen Sink', { tag: ['@panels', '@table']
     await dashboardPage
       .getByGrafanaSelector(selectors.components.PanelEditor.OptionsPane.fieldLabel('Cell options Cell value inspect'))
       .first()
-      .getByRole('switch', { name: 'Cell value inspect' })
-      .click({ force: true });
+      .locator('label[for="custom.inspect"]')
+      .click();
     await loremIpsumCell.hover();
     await expect(getCellHeight(page, 1, longTextColIdx)).resolves.toBeLessThan(100);
 
diff --git a/e2e/old-arch/panels-suite/geomap-map-controls.spec.ts b/e2e/old-arch/panels-suite/geomap-map-controls.spec.ts
index fcadcb55a47..b344dae5abe 100644
--- a/e2e/old-arch/panels-suite/geomap-map-controls.spec.ts
+++ b/e2e/old-arch/panels-suite/geomap-map-controls.spec.ts
@@ -17,35 +17,35 @@ describe('Geomap layer controls options', () => {
     e2e.components.PanelEditor.showZoomField()
       .should('be.visible')
       .within(() => {
-        cy.get('input[type="checkbox"]').check({ force: true });
+        cy.get('input[type="checkbox"]').check({ force: true }).should('be.checked');
       });
 
     // Show attribution
     e2e.components.PanelEditor.showAttributionField()
       .should('be.visible')
       .within(() => {
-        cy.get('input[type="checkbox"]').check({ force: true });
+        cy.get('input[type="checkbox"]').check({ force: true }).should('be.checked');
       });
 
     // Show scale
     e2e.components.PanelEditor.showScaleField()
       .should('be.visible')
       .within(() => {
-        cy.get('input[type="checkbox"]').check({ force: true });
+        cy.get('input[type="checkbox"]').check({ force: true }).should('be.checked');
       });
 
     // Show measure tool
     e2e.components.PanelEditor.showMeasureField()
       .should('be.visible')
       .within(() => {
-        cy.get('input[type="checkbox"]').check({ force: true });
+        cy.get('input[type="checkbox"]').check({ force: true }).should('be.checked');
       });
 
     // Show debug
     e2e.components.PanelEditor.showDebugField()
       .should('be.visible')
       .within(() => {
-        cy.get('input[type="checkbox"]').check({ force: true });
+        cy.get('input[type="checkbox"]').check({ force: true }).should('be.checked');
       });
 
     e2e.components.Panels.Panel.content({ timeout: TIMEOUT })
diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
index 43daedcbdb6..5b23a4fefa6 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
@@ -37,7 +37,7 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
     pickerTriggerRef = createRef<any>();
 
     render() {
-      const { theme, children, onChange, color, id } = this.props;
+      const { theme, children, onChange, color } = this.props;
       const styles = getStyles(theme);
       const popoverElement = React.createElement(popover, {
         ...{ ...this.props, children: null },
@@ -67,7 +67,6 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
                   })
                 ) : (
                   <ColorSwatch
-                    id={id}
                     ref={this.pickerTriggerRef}
                     onClick={showPopper}
                     onMouseLeave={hidePopper}
diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
index a8204411b24..c8c9f441978 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
@@ -22,7 +22,6 @@ export interface ColorPickerProps extends Themeable2 {
   color: string;
   onChange: ColorPickerChangeHandler;
   enableNamedColors?: boolean;
-  id?: string;
 }
 
 export interface Props<T> extends ColorPickerProps, PopoverContentProps {
diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldNamePicker.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldNamePicker.tsx
index cce936f01f7..63240a9b0eb 100644
--- a/packages/grafana-ui/src/components/MatchersUI/FieldNamePicker.tsx
+++ b/packages/grafana-ui/src/components/MatchersUI/FieldNamePicker.tsx
@@ -10,7 +10,7 @@ import { useFieldDisplayNames, useSelectOptions, frameHasName } from './utils';
 type Props = StandardEditorProps<string, FieldNamePickerConfigSettings>;
 
 // Pick a field name out of the fields
-export const FieldNamePicker = ({ value, onChange, context, item, id }: Props) => {
+export const FieldNamePicker = ({ value, onChange, context, item }: Props) => {
   const settings: FieldNamePickerConfigSettings = item.settings ?? {};
   const names = useFieldDisplayNames(context.data, settings?.filter);
   const selectOptions = useSelectOptions(names, value, undefined, undefined, settings.baseNameMode);
@@ -29,7 +29,6 @@ export const FieldNamePicker = ({ value, onChange, context, item, id }: Props) =
   return (
     <>
       <Select
-        inputId={id}
         value={selectedOption}
         placeholder={
           settings.placeholderText ?? t('grafana-ui.matchers-ui.field-name-picker.placeholder', 'Select field')
diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.tsx
index 2fc492d4f22..30899db375a 100644
--- a/packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.tsx
+++ b/packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.tsx
@@ -41,11 +41,10 @@ export interface Props {
   data: DataFrame[];
   onChange: (value: string) => void;
   placeholder?: string;
-  id?: string;
 }
 
 // Not exported globally... but used in grafana core
-export function RefIDPicker({ value, data, onChange, placeholder, id }: Props) {
+export function RefIDPicker({ value, data, onChange, placeholder }: Props) {
   const listOfRefIds = useMemo(() => getListOfQueryRefIds(data), [data]);
 
   const [priorSelectionState, updatePriorSelectionState] = useState<{
@@ -78,7 +77,6 @@ export function RefIDPicker({ value, data, onChange, placeholder, id }: Props) {
   }
   return (
     <Select
-      inputId={id}
       options={listOfRefIds}
       onChange={onFilterChange}
       isClearable={true}
@@ -116,10 +114,9 @@ export interface MultiProps {
   data: DataFrame[];
   onChange: (value: string[]) => void;
   placeholder?: string;
-  id?: string;
 }
 
-export function RefIDMultiPicker({ value, data, onChange, placeholder, id }: MultiProps) {
+export function RefIDMultiPicker({ value, data, onChange, placeholder }: MultiProps) {
   const listOfRefIds = useMemo(() => getListOfQueryRefIds(data), [data]);
 
   const [priorSelectionState, updatePriorSelectionState] = useState<{
@@ -175,7 +172,6 @@ export function RefIDMultiPicker({ value, data, onChange, placeholder, id }: Mul
   }
   return (
     <MultiSelect
-      inputId={id}
       options={listOfRefIds}
       onChange={onFilterChange}
       isClearable={true}
diff --git a/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx b/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx
index dff45cb2a18..2709bfa067c 100644
--- a/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx
+++ b/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx
@@ -9,7 +9,6 @@ export interface UnitPickerProps {
   onChange: (item?: string) => void;
   value?: string;
   width?: number;
-  id?: string;
 }
 
 function formatCreateLabel(input: string) {
@@ -22,7 +21,7 @@ export class UnitPicker extends PureComponent<UnitPickerProps> {
   };
 
   render() {
-    const { value, width, id } = this.props;
+    const { value, width } = this.props;
 
     // Set the current selection
     let current: SelectableValue<string> | undefined = undefined;
@@ -57,7 +56,6 @@ export class UnitPicker extends PureComponent<UnitPickerProps> {
 
     return (
       <Cascader
-        id={id}
         width={width}
         initialValue={current && current.label}
         allowCustomValue
diff --git a/public/app/core/components/NestedFolderPicker/NestedFolderPicker.tsx b/public/app/core/components/NestedFolderPicker/NestedFolderPicker.tsx
index 27b34e2f41e..042ec10f9ce 100644
--- a/public/app/core/components/NestedFolderPicker/NestedFolderPicker.tsx
+++ b/public/app/core/components/NestedFolderPicker/NestedFolderPicker.tsx
@@ -44,9 +44,6 @@ export interface NestedFolderPickerProps {
 
   /* Whether the picker should be clearable */
   clearable?: boolean;
-
-  /* HTML ID for the button element for form labels */
-  id?: string;
 }
 
 const debouncedSearch = debounce(getSearchResults, 300);
@@ -71,7 +68,6 @@ export function NestedFolderPicker({
   excludeUIDs,
   permission = 'edit',
   onChange,
-  id,
 }: NestedFolderPickerProps) {
   const styles = useStyles2(getStyles);
   const selectedFolder = useGetFolderQueryFacade(value);
@@ -287,7 +283,6 @@ export function NestedFolderPicker({
   if (!overlayOpen) {
     return (
       <Trigger
-        id={id}
         label={labelComponent}
         handleClearSelection={clearable && value !== undefined ? handleClearSelection : undefined}
         invalid={invalid}
diff --git a/public/app/core/components/OptionsUI/NumberInput.tsx b/public/app/core/components/OptionsUI/NumberInput.tsx
index b96893096d8..f5ba98492b7 100644
--- a/public/app/core/components/OptionsUI/NumberInput.tsx
+++ b/public/app/core/components/OptionsUI/NumberInput.tsx
@@ -5,7 +5,6 @@ import * as React from 'react';
 import { Field, Input } from '@grafana/ui';
 
 interface Props {
-  id?: string;
   value?: number;
   placeholder?: string;
   autoFocus?: boolean;
@@ -102,7 +101,6 @@ export class NumberInput extends PureComponent<Props, State> {
     return (
       <Input
         type="number"
-        id={this.props.id}
         ref={this.inputRef}
         min={this.props.min}
         max={this.props.max}
diff --git a/public/app/core/components/OptionsUI/color.tsx b/public/app/core/components/OptionsUI/color.tsx
index 0ffc4e7b1aa..ff9c13faa53 100644
--- a/public/app/core/components/OptionsUI/color.tsx
+++ b/public/app/core/components/OptionsUI/color.tsx
@@ -14,7 +14,6 @@ export interface ColorValueEditorSettings {
 }
 
 interface Props {
-  id?: string;
   value?: string;
   onChange: (value: string | undefined) => void;
   settings?: ColorValueEditorSettings;
@@ -26,7 +25,7 @@ interface Props {
 /**
  * @alpha
  * */
-export const ColorValueEditor = ({ value, settings, onChange, details, id }: Props) => {
+export const ColorValueEditor = ({ value, settings, onChange, details }: Props) => {
   const theme = useTheme2();
   const styles = useStyles2(getStyles);
 
@@ -38,7 +37,6 @@ export const ColorValueEditor = ({ value, settings, onChange, details, id }: Pro
             <div className={styles.colorPicker}>
               <ColorSwatch
                 ref={ref}
-                id={id}
                 onClick={showColorPicker}
                 onMouseLeave={hideColorPicker}
                 color={value ? theme.visualization.getColorByName(value) : theme.components.input.borderColor}
diff --git a/public/app/core/components/OptionsUI/multiSelect.tsx b/public/app/core/components/OptionsUI/multiSelect.tsx
index 41cbecb5ca9..bf2b5b9e5eb 100644
--- a/public/app/core/components/OptionsUI/multiSelect.tsx
+++ b/public/app/core/components/OptionsUI/multiSelect.tsx
@@ -55,12 +55,11 @@ export class MultiSelectValueEditor<T> extends PureComponent<Props<T>, State<T>>
 
   render() {
     const { options, isLoading } = this.state;
-    const { value, onChange, item, id } = this.props;
+    const { value, onChange, item } = this.props;
 
     const { settings } = item;
     return (
       <MultiSelect<T>
-        inputId={id}
         isLoading={isLoading}
         value={value}
         defaultValue={value}
diff --git a/public/app/core/components/OptionsUI/number.tsx b/public/app/core/components/OptionsUI/number.tsx
index cd69f2b0370..e7b0db58bbe 100644
--- a/public/app/core/components/OptionsUI/number.tsx
+++ b/public/app/core/components/OptionsUI/number.tsx
@@ -6,7 +6,7 @@ import { NumberInput } from './NumberInput';
 
 type Props = StandardEditorProps<number, NumberFieldConfigSettings>;
 
-export const NumberValueEditor = ({ value, onChange, item, id }: Props) => {
+export const NumberValueEditor = ({ value, onChange, item }: Props) => {
   const { settings } = item;
 
   const onValueChange = useCallback(
@@ -18,7 +18,6 @@ export const NumberValueEditor = ({ value, onChange, item, id }: Props) => {
 
   return (
     <NumberInput
-      id={id}
       value={value}
       min={settings?.min}
       max={settings?.max}
diff --git a/public/app/core/components/OptionsUI/select.tsx b/public/app/core/components/OptionsUI/select.tsx
index 9f3f2767b1c..f3fc4a5439b 100644
--- a/public/app/core/components/OptionsUI/select.tsx
+++ b/public/app/core/components/OptionsUI/select.tsx
@@ -51,7 +51,7 @@ export class SelectValueEditor<T> extends PureComponent<Props<T>, State<T>> {
 
   render() {
     const { options, isLoading } = this.state;
-    const { value, onChange, item, id } = this.props;
+    const { value, onChange, item } = this.props;
 
     const { settings } = item;
     let current = options.find((v) => v.value === value);
@@ -63,7 +63,6 @@ export class SelectValueEditor<T> extends PureComponent<Props<T>, State<T>> {
     }
     return (
       <Select<T>
-        inputId={id}
         isLoading={isLoading}
         value={current}
         defaultValue={value}
diff --git a/public/app/core/components/OptionsUI/slider.tsx b/public/app/core/components/OptionsUI/slider.tsx
index 01835ea9a38..b9bb41bbd90 100644
--- a/public/app/core/components/OptionsUI/slider.tsx
+++ b/public/app/core/components/OptionsUI/slider.tsx
@@ -11,7 +11,7 @@ import { NumberInput } from './NumberInput';
 
 type Props = StandardEditorProps<number, SliderFieldConfigSettings>;
 
-export const SliderValueEditor = ({ value, onChange, item, id }: Props) => {
+export const SliderValueEditor = ({ value, onChange, item }: Props) => {
   // Input reference
   const inputRef = useRef<HTMLSpanElement>(null);
 
@@ -109,7 +109,7 @@ export const SliderValueEditor = ({ value, onChange, item, id }: Props) => {
           included={included}
         />
         <span className={stylesSlider.numberInputWrapper} ref={inputRef}>
-          <NumberInput id={id} value={sliderValue} onChange={onSliderInputChange} max={max} min={min} step={step} />
+          <NumberInput value={sliderValue} onChange={onSliderInputChange} max={max} min={min} step={step} />
         </span>
       </div>
     </div>
diff --git a/public/app/core/components/OptionsUI/string.tsx b/public/app/core/components/OptionsUI/string.tsx
index 7ec4635f7c8..8001bf096af 100644
--- a/public/app/core/components/OptionsUI/string.tsx
+++ b/public/app/core/components/OptionsUI/string.tsx
@@ -8,7 +8,7 @@ interface Props extends StandardEditorProps<string, StringFieldConfigSettings> {
   suffix?: ReactNode;
 }
 
-export const StringValueEditor = ({ value, onChange, item, suffix, id }: Props) => {
+export const StringValueEditor = ({ value, onChange, item, suffix }: Props) => {
   const Component = item.settings?.useTextarea ? TextArea : Input;
   const onValueChange = useCallback(
     (
@@ -36,7 +36,6 @@ export const StringValueEditor = ({ value, onChange, item, suffix, id }: Props)
 
   return (
     <Component
-      id={id}
       placeholder={item.settings?.placeholder}
       defaultValue={value || ''}
       rows={(item.settings?.useTextarea && item.settings.rows) || 5}
diff --git a/public/app/core/components/OptionsUI/units.tsx b/public/app/core/components/OptionsUI/units.tsx
index 070864e1c48..93731b715f6 100644
--- a/public/app/core/components/OptionsUI/units.tsx
+++ b/public/app/core/components/OptionsUI/units.tsx
@@ -6,14 +6,14 @@ import { IconButton, UnitPicker, useStyles2 } from '@grafana/ui';
 
 type Props = StandardEditorProps<string, UnitFieldConfigSettings>;
 
-export function UnitValueEditor({ value, onChange, item, id }: Props) {
+export function UnitValueEditor({ value, onChange, item }: Props) {
   const styles = useStyles2(getStyles);
 
   if (item?.settings?.isClearable && value != null) {
     return (
       <div className={styles.wrapper}>
         <span className={styles.first}>
-          <UnitPicker value={value} onChange={onChange} id={id} />
+          <UnitPicker value={value} onChange={onChange} />
         </span>
         <IconButton
           name="times"
@@ -23,7 +23,7 @@ export function UnitValueEditor({ value, onChange, item, id }: Props) {
       </div>
     );
   }
-  return <UnitPicker value={value} onChange={onChange} id={id} />;
+  return <UnitPicker value={value} onChange={onChange} />;
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({
diff --git a/public/app/features/dashboard-scene/conditional-rendering/ConditionalRenderingEditor.tsx b/public/app/features/dashboard-scene/conditional-rendering/ConditionalRenderingEditor.tsx
index 8d0a0614778..796987d8773 100644
--- a/public/app/features/dashboard-scene/conditional-rendering/ConditionalRenderingEditor.tsx
+++ b/public/app/features/dashboard-scene/conditional-rendering/ConditionalRenderingEditor.tsx
@@ -1,5 +1,3 @@
-import { v4 as uuidv4 } from 'uuid';
-
 import { t } from '@grafana/i18n';
 import { Icon, Stack, Tooltip } from '@grafana/ui';
 import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor';
@@ -56,7 +54,6 @@ export function useConditionalRenderingEditor(
   }).addItem(
     new OptionsPaneItemDescriptor({
       title,
-      id: uuidv4(),
       render: () => <conditionalRenderingToRender.Component model={conditionalRenderingToRender} />,
     })
   );
diff --git a/public/app/features/dashboard-scene/edit-pane/DashboardEditableElement.tsx b/public/app/features/dashboard-scene/edit-pane/DashboardEditableElement.tsx
index 730c16aa410..93e5ec503d8 100644
--- a/public/app/features/dashboard-scene/edit-pane/DashboardEditableElement.tsx
+++ b/public/app/features/dashboard-scene/edit-pane/DashboardEditableElement.tsx
@@ -1,5 +1,4 @@
 import { ReactNode, useMemo, useRef } from 'react';
-import { v4 as uuidv4 } from 'uuid';
 
 import { Trans, t } from '@grafana/i18n';
 import { SceneObject } from '@grafana/scenes';
@@ -39,8 +38,8 @@ export class DashboardEditableElement implements EditableDashboardElement {
     const { body } = dashboard.useState();
 
     const dashboardOptions = useMemo(() => {
-      const dashboardTitleInputId = uuidv4();
-      const dashboardDescriptionInputId = uuidv4();
+      const dashboardTitleInputId = 'dashboard-title-input';
+      const dashboardDescriptionInputId = 'dashboard-description-input';
       const editPaneHeaderOptions = new OptionsPaneCategoryDescriptor({ title: '', id: 'dashboard-options' })
         .addItem(
           new OptionsPaneItemDescriptor({
diff --git a/public/app/features/dashboard-scene/edit-pane/VizPanelEditableElement.tsx b/public/app/features/dashboard-scene/edit-pane/VizPanelEditableElement.tsx
index c5c55bbaf61..574028a75d8 100644
--- a/public/app/features/dashboard-scene/edit-pane/VizPanelEditableElement.tsx
+++ b/public/app/features/dashboard-scene/edit-pane/VizPanelEditableElement.tsx
@@ -1,5 +1,4 @@
 import { useMemo } from 'react';
-import { v4 as uuidv4 } from 'uuid';
 
 import { Trans, t } from '@grafana/i18n';
 import { locationService } from '@grafana/runtime';
@@ -49,14 +48,13 @@ export class VizPanelEditableElement implements EditableDashboardElement, BulkAc
         .addItem(
           new OptionsPaneItemDescriptor({
             title: '',
-            id: uuidv4(),
             render: () => <OpenPanelEditViz panel={this.panel} />,
           })
         )
         .addItem(
           new OptionsPaneItemDescriptor({
             title: t('dashboard.viz-panel.options.title-option', 'Title'),
-            id: uuidv4(),
+            id: 'PanelFrameTitle',
             value: panel.state.title,
             popularRank: 1,
             render: (descriptor) => (
@@ -67,7 +65,7 @@ export class VizPanelEditableElement implements EditableDashboardElement, BulkAc
         .addItem(
           new OptionsPaneItemDescriptor({
             title: t('dashboard.viz-panel.options.description', 'Description'),
-            id: uuidv4(),
+            id: 'description-text-area',
             value: panel.state.description,
             render: (descriptor) => <PanelDescriptionTextArea id={descriptor.props.id} panel={panel} />,
           })
@@ -75,7 +73,7 @@ export class VizPanelEditableElement implements EditableDashboardElement, BulkAc
         .addItem(
           new OptionsPaneItemDescriptor({
             title: t('dashboard.viz-panel.options.transparent-background', 'Transparent background'),
-            id: uuidv4(),
+            id: 'transparent-background',
             render: (descriptor) => <PanelBackgroundSwitch id={descriptor.props.id} panel={panel} />,
           })
         );
@@ -135,7 +133,9 @@ export class VizPanelEditableElement implements EditableDashboardElement, BulkAc
   }
 }
 
-type OpenPanelEditVizProps = { panel: VizPanel };
+type OpenPanelEditVizProps = {
+  panel: VizPanel;
+};
 
 const OpenPanelEditViz = ({ panel }: OpenPanelEditVizProps) => {
   return (
diff --git a/public/app/features/dashboard-scene/panel-edit/getPanelFrameOptions.tsx b/public/app/features/dashboard-scene/panel-edit/getPanelFrameOptions.tsx
index a46c113c7c9..366fcdc81e4 100644
--- a/public/app/features/dashboard-scene/panel-edit/getPanelFrameOptions.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/getPanelFrameOptions.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { v4 as uuidv4 } from 'uuid';
 
 import { CoreApp } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -38,7 +37,7 @@ export function getPanelFrameOptions(panel: VizPanel): OptionsPaneCategoryDescri
     .addItem(
       new OptionsPaneItemDescriptor({
         title: t('dashboard-scene.get-panel-frame-options.title.title', 'Title'),
-        id: uuidv4(),
+        id: 'PanelFrameTitle',
         value: panel.state.title,
         popularRank: 1,
         render: function renderTitle(descriptor) {
@@ -56,7 +55,7 @@ export function getPanelFrameOptions(panel: VizPanel): OptionsPaneCategoryDescri
     .addItem(
       new OptionsPaneItemDescriptor({
         title: t('dashboard-scene.get-panel-frame-options.title.description', 'Description'),
-        id: uuidv4(),
+        id: 'description-text-area',
         value: panel.state.description,
         render: function renderDescription(descriptor) {
           return <PanelDescriptionTextArea id={descriptor.props.id} panel={panel} />;
@@ -72,7 +71,7 @@ export function getPanelFrameOptions(panel: VizPanel): OptionsPaneCategoryDescri
     .addItem(
       new OptionsPaneItemDescriptor({
         title: t('dashboard-scene.get-panel-frame-options.title.transparent-background', 'Transparent background'),
-        id: uuidv4(),
+        id: 'transparent-background',
         render: function renderTransparent(descriptor) {
           return <PanelBackgroundSwitch id={descriptor.props.id} panel={panel} />;
         },
@@ -87,7 +86,6 @@ export function getPanelFrameOptions(panel: VizPanel): OptionsPaneCategoryDescri
       }).addItem(
         new OptionsPaneItemDescriptor({
           title: t('dashboard-scene.get-panel-frame-options.title.panel-links', 'Panel links'),
-          id: uuidv4(),
           render: () => <ScenePanelLinksEditor panelLinks={panelLinksObject ?? undefined} />,
         })
       )
diff --git a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItemEditor.tsx b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItemEditor.tsx
index 93804685fcb..dc20ec7a8bd 100644
--- a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItemEditor.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItemEditor.tsx
@@ -1,5 +1,3 @@
-import { v4 as uuidv4 } from 'uuid';
-
 import { t } from '@grafana/i18n';
 import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor';
 import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor';
@@ -18,7 +16,7 @@ export function getOptions(model: AutoGridItem): OptionsPaneCategoryDescriptor[]
   }).addItem(
     new OptionsPaneItemDescriptor({
       title: t('dashboard.auto-grid.item-options.repeat.variable.title', 'Repeat by variable'),
-      id: uuidv4(),
+      id: 'repeat-by-variable-select',
       description: t(
         'dashboard.auto-grid.item-options.repeat.variable.description',
         'Repeat this panel for each value in the selected variable. This is not visible while in edit mode. You need to go back to dashboard and then update the variable or reload the dashboard.'
diff --git a/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx b/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx
index 9f822fe01e7..43929dd09c6 100644
--- a/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx
@@ -1,5 +1,4 @@
 import { useCallback } from 'react';
-import { v4 as uuidv4 } from 'uuid';
 
 import { SelectableValue } from '@grafana/data';
 import { t } from '@grafana/i18n';
@@ -23,7 +22,7 @@ export function getDashboardGridItemOptions(gridItem: DashboardGridItem): Option
     .addItem(
       new OptionsPaneItemDescriptor({
         title: t('dashboard.default-layout.item-options.repeat.variable.title', 'Repeat by variable'),
-        id: uuidv4(),
+        id: 'repeat-by-variable-select',
         description: t(
           'dashboard.default-layout.item-options.repeat.variable.description',
           'Repeat this panel for each value in the selected variable. This is not visible while in edit mode. You need to go back to dashboard and then update the variable or reload the dashboard.'
@@ -44,12 +43,11 @@ export function getDashboardGridItemOptions(gridItem: DashboardGridItem): Option
     .addItem(
       new OptionsPaneItemDescriptor({
         title: t('dashboard.default-layout.item-options.repeat.max', 'Max per row'),
-        id: uuidv4(),
         useShowIf: () => {
           const { variableName, repeatDirection } = gridItem.useState();
           return Boolean(variableName) && repeatDirection === 'h';
         },
-        render: (descriptor) => <MaxPerRowOption id={descriptor.props.id} gridItem={gridItem} />,
+        render: () => <MaxPerRowOption gridItem={gridItem} />,
       })
     );
 
@@ -92,7 +90,7 @@ function RepeatDirectionOption({ gridItem }: OptionComponentProps) {
   );
 }
 
-function MaxPerRowOption({ gridItem, id }: OptionComponentProps & { id?: string }) {
+function MaxPerRowOption({ gridItem }: OptionComponentProps) {
   const { maxPerRow } = gridItem.useState();
   const maxPerRowOptions: Array<SelectableValue<number>> = [2, 3, 4, 6, 8, 12].map((value) => ({
     label: value.toString(),
@@ -101,7 +99,6 @@ function MaxPerRowOption({ gridItem, id }: OptionComponentProps & { id?: string
 
   return (
     <Select
-      id={id}
       options={maxPerRowOptions}
       value={maxPerRow ?? 4}
       onChange={(value) => {
diff --git a/public/app/features/dashboard-scene/scene/layout-default/SceneGridRowEditableElement.tsx b/public/app/features/dashboard-scene/scene/layout-default/SceneGridRowEditableElement.tsx
index 58db7ebb8da..17be830a0bd 100644
--- a/public/app/features/dashboard-scene/scene/layout-default/SceneGridRowEditableElement.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-default/SceneGridRowEditableElement.tsx
@@ -1,5 +1,4 @@
 import { useMemo } from 'react';
-import { v4 as uuidv4 } from 'uuid';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
@@ -47,8 +46,7 @@ export class SceneGridRowEditableElement implements EditableDashboardElement, Bu
       }).addItem(
         new OptionsPaneItemDescriptor({
           title: t('dashboard.default-layout.row-options.form.title', 'Title'),
-          id: uuidv4(),
-          render: (descriptor) => <RowTitleInput id={descriptor.props.id} row={row} />,
+          render: () => <RowTitleInput row={row} />,
         })
       );
     }, [row]);
@@ -63,8 +61,7 @@ export class SceneGridRowEditableElement implements EditableDashboardElement, Bu
       }).addItem(
         new OptionsPaneItemDescriptor({
           title: t('dashboard.default-layout.row-options.repeat.variable.title', 'Variable'),
-          id: uuidv4(),
-          render: (descriptor) => <RowRepeatSelect id={descriptor.props.id} row={row} dashboard={dashboard} />,
+          render: () => <RowRepeatSelect row={row} dashboard={dashboard} />,
         })
       );
     }, [row]);
@@ -81,13 +78,13 @@ export class SceneGridRowEditableElement implements EditableDashboardElement, Bu
   }
 }
 
-function RowTitleInput({ row, id }: { row: SceneGridRow; id?: string }) {
+function RowTitleInput({ row }: { row: SceneGridRow }) {
   const { title } = row.useState();
 
-  return <Input id={id} value={title} onChange={(e) => row.setState({ title: e.currentTarget.value })} />;
+  return <Input value={title} onChange={(e) => row.setState({ title: e.currentTarget.value })} />;
 }
 
-function RowRepeatSelect({ row, dashboard, id }: { row: SceneGridRow; dashboard: DashboardScene; id?: string }) {
+function RowRepeatSelect({ row, dashboard }: { row: SceneGridRow; dashboard: DashboardScene }) {
   const { $behaviors, children } = row.useState();
   let repeatBehavior = $behaviors?.find((b) => b instanceof RowRepeaterBehavior);
   const vizPanels = useMemo(
@@ -107,7 +104,6 @@ function RowRepeatSelect({ row, dashboard, id }: { row: SceneGridRow; dashboard:
   return (
     <>
       <RepeatRowSelect2
-        id={id}
         sceneContext={dashboard}
         repeat={repeatBehavior?.state.variableName}
         onChange={(repeat) => {
diff --git a/public/app/features/dashboard-scene/scene/layout-rows/RowItemEditor.tsx b/public/app/features/dashboard-scene/scene/layout-rows/RowItemEditor.tsx
index a05393bca37..396e4075587 100644
--- a/public/app/features/dashboard-scene/scene/layout-rows/RowItemEditor.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-rows/RowItemEditor.tsx
@@ -1,5 +1,4 @@
-import { useId, useMemo } from 'react';
-import { v4 as uuidv4 } from 'uuid';
+import { useMemo } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
@@ -33,15 +32,13 @@ export function useEditOptions(model: RowItem, isNewElement: boolean): OptionsPa
         .addItem(
           new OptionsPaneItemDescriptor({
             title: t('dashboard.rows-layout.row-options.row.fill-screen', 'Fill screen'),
-            id: uuidv4(),
-            render: (descriptor) => <FillScreenSwitch id={descriptor.props.id} row={model} />,
+            render: () => <FillScreenSwitch row={model} />,
           })
         )
         .addItem(
           new OptionsPaneItemDescriptor({
             title: t('dashboard.rows-layout.row-options.row.hide-header', 'Hide row header'),
-            id: uuidv4(),
-            render: (descriptor) => <RowHeaderSwitch id={descriptor.props.id} row={model} />,
+            render: () => <RowHeaderSwitch row={model} />,
           })
         ),
     [model, isNewElement]
@@ -56,12 +53,11 @@ export function useEditOptions(model: RowItem, isNewElement: boolean): OptionsPa
       }).addItem(
         new OptionsPaneItemDescriptor({
           title: t('dashboard.rows-layout.row-options.repeat.variable.title', 'Repeat by variable'),
-          id: uuidv4(),
           description: t(
             'dashboard.rows-layout.row-options.repeat.variable.description',
             'Repeat this row for each value in the selected variable.'
           ),
-          render: (descriptor) => <RowRepeatSelect id={descriptor.props.id} row={model} />,
+          render: () => <RowRepeatSelect row={model} />,
         })
       ),
     [model]
@@ -98,7 +94,6 @@ function RowTitleInput({ row, isNewElement }: { row: RowItem; isNewElement: bool
       }
     >
       <Input
-        id={useId()}
         ref={ref}
         title={t('dashboard.rows-layout.row-options.title-option', 'Title')}
         value={title}
@@ -108,19 +103,19 @@ function RowTitleInput({ row, isNewElement }: { row: RowItem; isNewElement: bool
   );
 }
 
-function RowHeaderSwitch({ row, id }: { row: RowItem; id?: string }) {
+function RowHeaderSwitch({ row }: { row: RowItem }) {
   const { hideHeader: isHeaderHidden = false } = row.useState();
 
-  return <Switch id={id} value={isHeaderHidden} onChange={() => row.onHeaderHiddenToggle()} />;
+  return <Switch value={isHeaderHidden} onChange={() => row.onHeaderHiddenToggle()} />;
 }
 
-function FillScreenSwitch({ row, id }: { row: RowItem; id?: string }) {
+function FillScreenSwitch({ row }: { row: RowItem }) {
   const { fillScreen } = row.useState();
 
-  return <Switch id={id} value={fillScreen} onChange={() => row.onChangeFillScreen(!fillScreen)} />;
+  return <Switch value={fillScreen} onChange={() => row.onChangeFillScreen(!fillScreen)} />;
 }
 
-function RowRepeatSelect({ row, id }: { row: RowItem; id?: string }) {
+function RowRepeatSelect({ row }: { row: RowItem }) {
   const { layout } = row.useState();
   const dashboard = useDashboard(row);
 
@@ -136,7 +131,6 @@ function RowRepeatSelect({ row, id }: { row: RowItem; id?: string }) {
   return (
     <>
       <RepeatRowSelect2
-        id={id}
         sceneContext={dashboard}
         repeat={row.state.repeatByVariable}
         onChange={(repeat) => row.onChangeRepeat(repeat)}
diff --git a/public/app/features/dashboard-scene/scene/layout-tabs/TabItemEditor.tsx b/public/app/features/dashboard-scene/scene/layout-tabs/TabItemEditor.tsx
index 0c34c8a7776..0a2b0b3f30e 100644
--- a/public/app/features/dashboard-scene/scene/layout-tabs/TabItemEditor.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-tabs/TabItemEditor.tsx
@@ -1,5 +1,4 @@
 import { useMemo } from 'react';
-import { v4 as uuidv4 } from 'uuid';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
@@ -25,8 +24,7 @@ export function useEditOptions(model: TabItem, isNewElement: boolean): OptionsPa
       new OptionsPaneCategoryDescriptor({ title: '', id: 'tab-item-options' }).addItem(
         new OptionsPaneItemDescriptor({
           title: t('dashboard.tabs-layout.tab-options.title-option', 'Title'),
-          id: uuidv4(),
-          render: (descriptor) => <TabTitleInput id={descriptor.props.id} tab={model} isNewElement={isNewElement} />,
+          render: () => <TabTitleInput tab={model} isNewElement={isNewElement} />,
         })
       ),
     [model, isNewElement]
@@ -41,12 +39,11 @@ export function useEditOptions(model: TabItem, isNewElement: boolean): OptionsPa
       }).addItem(
         new OptionsPaneItemDescriptor({
           title: t('dashboard.tabs-layout.tab-options.repeat.variable.title', 'Repeat by variable'),
-          id: uuidv4(),
           description: t(
             'dashboard.tabs-layout.tab-options.repeat.variable.description',
             'Repeat this tab for each value in the selected variable.'
           ),
-          render: (descriptor) => <TabRepeatSelect id={descriptor.props.id} tab={model} />,
+          render: () => <TabRepeatSelect tab={model} />,
         })
       ),
     [model]
@@ -68,7 +65,7 @@ export function useEditOptions(model: TabItem, isNewElement: boolean): OptionsPa
   return editOptions;
 }
 
-function TabTitleInput({ tab, isNewElement, id }: { tab: TabItem; isNewElement: boolean; id?: string }) {
+function TabTitleInput({ tab, isNewElement }: { tab: TabItem; isNewElement: boolean }) {
   const { title } = tab.useState();
 
   const ref = useEditPaneInputAutoFocus({ autoFocus: isNewElement });
@@ -82,7 +79,6 @@ function TabTitleInput({ tab, isNewElement, id }: { tab: TabItem; isNewElement:
       }
     >
       <Input
-        id={id}
         ref={ref}
         title={t('dashboard.tabs-layout.tab-options.title-option', 'Title')}
         value={title}
@@ -92,7 +88,7 @@ function TabTitleInput({ tab, isNewElement, id }: { tab: TabItem; isNewElement:
   );
 }
 
-function TabRepeatSelect({ tab, id }: { tab: TabItem; id?: string }) {
+function TabRepeatSelect({ tab }: { tab: TabItem }) {
   const { layout } = tab.useState();
   const dashboard = useDashboard(tab);
 
@@ -108,7 +104,6 @@ function TabRepeatSelect({ tab, id }: { tab: TabItem; id?: string }) {
   return (
     <>
       <RepeatRowSelect2
-        id={id}
         sceneContext={dashboard}
         repeat={tab.state.repeatByVariable}
         onChange={(repeat) => tab.onChangeRepeat(repeat)}
diff --git a/public/app/features/dashboard-scene/settings/variables/VariableEditableElement.tsx b/public/app/features/dashboard-scene/settings/variables/VariableEditableElement.tsx
index 862a51ee1ac..86450b91f92 100644
--- a/public/app/features/dashboard-scene/settings/variables/VariableEditableElement.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/VariableEditableElement.tsx
@@ -1,5 +1,4 @@
-import { FormEvent, useId, useMemo, useRef, useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
+import { FormEvent, useMemo, useRef, useState } from 'react';
 
 import { VariableHide } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -64,16 +63,14 @@ export class VariableEditableElement implements EditableDashboardElement, BulkAc
         .addItem(
           new OptionsPaneItemDescriptor({
             title: t('dashboard.edit-pane.variable.label', 'Label'),
-            id: uuidv4(),
             description: t('dashboard.edit-pane.variable.label-description', 'Optional display name'),
-            render: (descriptor) => <VariableLabelInput id={descriptor.props.id} variable={variable} />,
+            render: () => <VariableLabelInput variable={variable} />,
           })
         )
         .addItem(
           new OptionsPaneItemDescriptor({
             title: t('dashboard.edit-pane.variable.description', 'Description'),
-            id: uuidv4(),
-            render: (descriptor) => <VariableDescriptionTextArea id={descriptor.props.id} variable={variable} />,
+            render: () => <VariableDescriptionTextArea variable={variable} />,
           })
         )
         .addItem(
@@ -120,7 +117,6 @@ export class VariableEditableElement implements EditableDashboardElement, BulkAc
 
 interface VariableInputProps {
   variable: SceneVariable;
-  id?: string;
 }
 
 function VariableNameInput({ variable, isNewElement }: { variable: SceneVariable; isNewElement: boolean }) {
@@ -142,7 +138,6 @@ function VariableNameInput({ variable, isNewElement }: { variable: SceneVariable
   return (
     <Field label={t('dashboard.edit-pane.variable.name', 'Name')} invalid={!!nameError} error={nameError}>
       <Input
-        id={useId()}
         ref={ref}
         value={name}
         onFocus={() => {
@@ -176,13 +171,12 @@ function VariableNameInput({ variable, isNewElement }: { variable: SceneVariable
   );
 }
 
-function VariableLabelInput({ variable, id }: VariableInputProps) {
+function VariableLabelInput({ variable }: VariableInputProps) {
   const { label } = variable.useState();
   const oldLabel = useRef(label ?? '');
 
   return (
     <Input
-      id={id}
       value={label}
       onFocus={() => {
         oldLabel.current = label ?? '';
@@ -207,13 +201,13 @@ function VariableLabelInput({ variable, id }: VariableInputProps) {
   );
 }
 
-function VariableDescriptionTextArea({ variable, id }: VariableInputProps) {
+function VariableDescriptionTextArea({ variable }: VariableInputProps) {
   const { description } = variable.useState();
   const oldDescription = useRef(description ?? '');
 
   return (
     <TextArea
-      id={id}
+      id="description-text-area"
       value={description ?? ''}
       placeholder={t('dashboard.edit-pane.variable.description-placeholder', 'Descriptive text')}
       onFocus={() => {
diff --git a/public/app/features/dashboard-scene/settings/variables/components/CustomVariableForm.tsx b/public/app/features/dashboard-scene/settings/variables/components/CustomVariableForm.tsx
index 71e001ddd84..bdc98b74a94 100644
--- a/public/app/features/dashboard-scene/settings/variables/components/CustomVariableForm.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/components/CustomVariableForm.tsx
@@ -1,6 +1,5 @@
 import { FormEvent } from 'react';
 import { lastValueFrom } from 'rxjs';
-import { v4 as uuidv4 } from 'uuid';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
@@ -81,13 +80,12 @@ export function getCustomVariableOptions(variable: SceneVariable): OptionsPaneIt
   return [
     new OptionsPaneItemDescriptor({
       title: t('dashboard.edit-pane.variable.custom-options.values', 'Values separated by comma'),
-      id: uuidv4(),
-      render: (descriptor) => <ValuesTextField id={descriptor.props.id} variable={variable} />,
+      render: () => <ValuesTextField variable={variable} />,
     }),
   ];
 }
 
-function ValuesTextField({ variable, id }: { variable: CustomVariable; id?: string }) {
+function ValuesTextField({ variable }: { variable: CustomVariable }) {
   const { query } = variable.useState();
 
   const onBlur = async (event: FormEvent<HTMLTextAreaElement>) => {
@@ -97,7 +95,6 @@ function ValuesTextField({ variable, id }: { variable: CustomVariable; id?: stri
 
   return (
     <TextArea
-      id={id}
       rows={2}
       defaultValue={query}
       onBlur={onBlur}
diff --git a/public/app/features/dashboard-scene/settings/variables/editors/ConstantVariableEditor.tsx b/public/app/features/dashboard-scene/settings/variables/editors/ConstantVariableEditor.tsx
index dac8fddbf33..6801eaf04fb 100644
--- a/public/app/features/dashboard-scene/settings/variables/editors/ConstantVariableEditor.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/editors/ConstantVariableEditor.tsx
@@ -1,6 +1,5 @@
 import { FormEvent } from 'react';
 import { lastValueFrom } from 'rxjs';
-import { v4 as uuidv4 } from 'uuid';
 
 import { t } from '@grafana/i18n';
 import { ConstantVariable, SceneVariable } from '@grafana/scenes';
@@ -32,13 +31,12 @@ export function getConstantVariableOptions(variable: SceneVariable): OptionsPane
   return [
     new OptionsPaneItemDescriptor({
       title: t('dashboard-scene.constant-variable-form.label-value', 'Value'),
-      id: uuidv4(),
-      render: (descriptor) => <ConstantValueInput id={descriptor.props.id} variable={variable} />,
+      render: () => <ConstantValueInput variable={variable} />,
     }),
   ];
 }
 
-function ConstantValueInput({ variable, id }: { variable: ConstantVariable; id?: string }) {
+function ConstantValueInput({ variable }: { variable: ConstantVariable }) {
   const { value } = variable.useState();
 
   const onBlur = async (event: FormEvent<HTMLInputElement>) => {
@@ -48,7 +46,6 @@ function ConstantValueInput({ variable, id }: { variable: ConstantVariable; id?:
 
   return (
     <Input
-      id={id}
       defaultValue={value.toString()}
       onBlur={onBlur}
       placeholder={t('dashboard-scene.constant-variable-form.placeholder-your-metric-prefix', 'Your metric prefix')}
diff --git a/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor.tsx b/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor.tsx
index 3068607597f..e262a49a2c5 100644
--- a/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor.tsx
@@ -1,6 +1,5 @@
 import { FormEvent } from 'react';
 import { lastValueFrom } from 'rxjs';
-import { v4 as uuidv4 } from 'uuid';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { t } from '@grafana/i18n';
@@ -59,13 +58,12 @@ export function getCustomVariableOptions(variable: SceneVariable): OptionsPaneIt
   return [
     new OptionsPaneItemDescriptor({
       title: t('dashboard.edit-pane.variable.custom-options.values', 'Values separated by comma'),
-      id: uuidv4(),
-      render: ({ props }) => <ValuesTextField id={props.id} variable={variable} />,
+      render: () => <ValuesTextField variable={variable} />,
     }),
   ];
 }
 
-function ValuesTextField({ variable, id }: { variable: CustomVariable; id?: string }) {
+function ValuesTextField({ variable }: { variable: CustomVariable }) {
   const { query } = variable.useState();
 
   const onBlur = async (event: FormEvent<HTMLTextAreaElement>) => {
@@ -75,7 +73,6 @@ function ValuesTextField({ variable, id }: { variable: CustomVariable; id?: stri
 
   return (
     <TextArea
-      id={id}
       rows={2}
       defaultValue={query}
       onBlur={onBlur}
diff --git a/public/app/features/dashboard-scene/settings/variables/editors/DataSourceVariableEditor.tsx b/public/app/features/dashboard-scene/settings/variables/editors/DataSourceVariableEditor.tsx
index 249ad3b2f6c..85248358c43 100644
--- a/public/app/features/dashboard-scene/settings/variables/editors/DataSourceVariableEditor.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/editors/DataSourceVariableEditor.tsx
@@ -1,6 +1,5 @@
 import React, { FormEvent } from 'react';
 import { lastValueFrom } from 'rxjs';
-import { v4 as uuidv4 } from 'uuid';
 
 import { SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -81,27 +80,20 @@ export function getDataSourceVariableOptions(variable: SceneVariable): OptionsPa
   return [
     new OptionsPaneItemDescriptor({
       title: t('dashboard.edit-pane.variable.datasource-options.type', 'Type'),
-      id: uuidv4(),
-      render: ({ props }) => <DataSourceTypeSelect id={props.id} variable={variable} />,
+      render: () => <DataSourceTypeSelect variable={variable} />,
     }),
     new OptionsPaneItemDescriptor({
       title: t('dashboard.edit-pane.variable.datasource-options.name-filter', 'Name filter'),
-      id: uuidv4(),
       description: t(
         'dashboard.edit-pane.variable.datasource-options.name-filter-description',
         'Regex filter for which data source instances to include. Leave empty for all.'
       ),
-      render: ({ props }) => <DataSourceNameFilter id={props.id} variable={variable} />,
+      render: () => <DataSourceNameFilter variable={variable} />,
     }),
   ];
 }
 
-interface InputProps {
-  variable: DataSourceVariable;
-  id?: string;
-}
-
-function DataSourceTypeSelect({ variable, id }: InputProps) {
+function DataSourceTypeSelect({ variable }: { variable: DataSourceVariable }) {
   const { pluginId } = variable.useState();
   const options = getOptionDataSourceTypes();
 
@@ -112,7 +104,6 @@ function DataSourceTypeSelect({ variable, id }: InputProps) {
 
   return (
     <Combobox
-      id={id}
       options={options}
       value={pluginId}
       onChange={onChange}
@@ -122,7 +113,7 @@ function DataSourceTypeSelect({ variable, id }: InputProps) {
   );
 }
 
-function DataSourceNameFilter({ variable, id }: InputProps) {
+function DataSourceNameFilter({ variable }: { variable: DataSourceVariable }) {
   const { regex } = variable.useState();
 
   const onBlur = async (evt: React.FormEvent<HTMLInputElement>) => {
@@ -132,7 +123,6 @@ function DataSourceNameFilter({ variable, id }: InputProps) {
 
   return (
     <Input
-      id={id}
       defaultValue={regex}
       onBlur={onBlur}
       data-testid={selectors.pages.Dashboard.Settings.Variables.Edit.DatasourceVariable.nameFilter}
diff --git a/public/app/features/dashboard-scene/settings/variables/editors/SystemVariableEditor.tsx b/public/app/features/dashboard-scene/settings/variables/editors/SystemVariableEditor.tsx
index c0c958c21a8..d7a55ae5dad 100644
--- a/public/app/features/dashboard-scene/settings/variables/editors/SystemVariableEditor.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/editors/SystemVariableEditor.tsx
@@ -9,6 +9,7 @@ export function getSystemVariableOptions(variable: SceneVariable): OptionsPaneIt
 
   return [
     new OptionsPaneItemDescriptor({
+      title: '',
       render: () => {
         return (
           <Stack direction="column">
diff --git a/public/app/features/dashboard-scene/settings/variables/useVariableSelectionOptionsCategory.tsx b/public/app/features/dashboard-scene/settings/variables/useVariableSelectionOptionsCategory.tsx
index 21fffe38917..cb64f93a829 100644
--- a/public/app/features/dashboard-scene/settings/variables/useVariableSelectionOptionsCategory.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/useVariableSelectionOptionsCategory.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useMemo, useRef } from 'react';
-import { v4 as uuidv4 } from 'uuid';
 
 import { t } from '@grafana/i18n';
 import { MultiValueVariable, SceneVariableValueChangedEvent } from '@grafana/scenes';
@@ -17,25 +16,22 @@ export function useVariableSelectionOptionsCategory(variable: MultiValueVariable
       .addItem(
         new OptionsPaneItemDescriptor({
           title: t('dashboard.edit-pane.variable.selection-options.multi-value', 'Multi-value'),
-          id: uuidv4(),
-          render: (descriptor) => <MultiValueSwitch id={descriptor.props.id} variable={variable} />,
+          render: () => <MultiValueSwitch variable={variable} />,
         })
       )
       .addItem(
         new OptionsPaneItemDescriptor({
           title: t('dashboard.edit-pane.variable.selection-options.include-all', 'Include All value'),
-          id: uuidv4(),
           description: t(
             'dashboard.edit-pane.variable.selection-options.include-all-description',
             'Enables a single option that represent all values'
           ),
-          render: (descriptor) => <IncludeAllSwitch id={descriptor.props.id} variable={variable} />,
+          render: () => <IncludeAllSwitch variable={variable} />,
         })
       )
       .addItem(
         new OptionsPaneItemDescriptor({
           title: t('dashboard.edit-pane.variable.selection-options.custom-all-value', 'Custom all value'),
-          id: uuidv4(),
           description: t(
             'dashboard.edit-pane.variable.selection-options.custom-all-value-description',
             'A wildcard regex or other value to represent All'
@@ -43,61 +39,46 @@ export function useVariableSelectionOptionsCategory(variable: MultiValueVariable
           useShowIf: () => {
             return variable.useState().includeAll ?? false;
           },
-          render: (descriptor) => <CustomAllValueInput id={descriptor.props.id} variable={variable} />,
+          render: () => <CustomAllValueInput variable={variable} />,
         })
       )
       .addItem(
         new OptionsPaneItemDescriptor({
           title: t('dashboard.edit-pane.variable.selection-options.allow-custom-values', 'Allow custom values'),
-          id: uuidv4(),
           description: t(
             'dashboard.edit-pane.variable.selection-options.allow-custom-values-description',
             'Enables users to enter values'
           ),
-          render: (descriptor) => <AllowCustomSwitch id={descriptor.props.id} variable={variable} />,
+          render: () => <AllowCustomSwitch variable={variable} />,
         })
       );
   }, [variable]);
 }
 
-interface InputProps {
-  variable: MultiValueVariable;
-  id?: string;
-}
-
-function MultiValueSwitch({ variable, id }: InputProps) {
+function MultiValueSwitch({ variable }: { variable: MultiValueVariable }) {
   const { isMulti } = variable.useState();
 
-  return (
-    <Switch id={id} value={isMulti} onChange={(evt) => variable.setState({ isMulti: evt.currentTarget.checked })} />
-  );
+  return <Switch value={isMulti} onChange={(evt) => variable.setState({ isMulti: evt.currentTarget.checked })} />;
 }
 
-function IncludeAllSwitch({ variable, id }: InputProps) {
+function IncludeAllSwitch({ variable }: { variable: MultiValueVariable }) {
   const { includeAll } = variable.useState();
 
-  return (
-    <Switch
-      id={id}
-      value={includeAll}
-      onChange={(evt) => variable.setState({ includeAll: evt.currentTarget.checked })}
-    />
-  );
+  return <Switch value={includeAll} onChange={(evt) => variable.setState({ includeAll: evt.currentTarget.checked })} />;
 }
 
-function AllowCustomSwitch({ variable, id }: InputProps) {
+function AllowCustomSwitch({ variable }: { variable: MultiValueVariable }) {
   const { allowCustomValue } = variable.useState();
 
   return (
     <Switch
-      id={id}
       value={allowCustomValue}
       onChange={(evt) => variable.setState({ allowCustomValue: evt.currentTarget.checked })}
     />
   );
 }
 
-function CustomAllValueInput({ variable, id }: InputProps) {
+function CustomAllValueInput({ variable }: { variable: MultiValueVariable }) {
   const { allValue } = variable.useState();
   const ref = useRef<HTMLInputElement>(null);
 
@@ -116,5 +97,5 @@ function CustomAllValueInput({ variable, id }: InputProps) {
     [variable]
   );
 
-  return <Input id={id} ref={ref} defaultValue={allValue ?? ''} onBlur={onInputBlur} />;
+  return <Input ref={ref} defaultValue={allValue ?? ''} onBlur={onInputBlur} />;
 }
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
index 0b0154628f6..b512ee41b1b 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
@@ -24,7 +24,6 @@ export interface OptionsPaneItemInfo {
   useShowIf?: () => boolean;
   overrides?: OptionPaneItemOverrideInfo[];
   addon?: ReactNode;
-  /** Must be unique on the page! */
   id?: string;
 }
 
@@ -36,7 +35,10 @@ export class OptionsPaneItemDescriptor {
   props: OptionsPaneItemInfo;
 
   constructor(props: OptionsPaneItemInfo) {
-    this.props = { ...props, id: props.id || uniqueId() };
+    this.props = { ...props, id: props.id ?? props.title };
+    if (this.props.id === '') {
+      this.props.id = uniqueId();
+    }
   }
 
   render(searchQuery?: string) {
diff --git a/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx b/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx
index 637adecffb1..ce2bb20f8e8 100644
--- a/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx
@@ -1,7 +1,6 @@
 import { css } from '@emotion/css';
 import { cloneDeep } from 'lodash';
 import * as React from 'react';
-import { v4 as uuidv4 } from 'uuid';
 
 import {
   FieldConfigOptionsRegistry,
@@ -60,7 +59,13 @@ export function getFieldOverrideCategories(
       ...currentFieldConfig,
       overrides: [
         ...currentFieldConfig.overrides,
-        { matcher: { id: info.id, options: info.defaultOptions }, properties: [] },
+        {
+          matcher: {
+            id: info.id,
+            options: info.defaultOptions,
+          },
+          properties: [],
+        },
       ],
     });
   };
@@ -104,12 +109,18 @@ export function getFieldOverrideCategories(
     });
 
     const onMatcherConfigChange = (options: unknown) => {
-      onOverrideChange(idx, { ...override, matcher: { ...override.matcher, options } });
+      onOverrideChange(idx, {
+        ...override,
+        matcher: { ...override.matcher, options },
+      });
     };
 
     const onDynamicConfigValueAdd = (override: ConfigOverrideRule, value: SelectableValue<string>) => {
       const registryItem = registry.get(value.value!);
-      const propertyConfig: DynamicConfigValue = { id: registryItem.id, value: registryItem.defaultValue };
+      const propertyConfig: DynamicConfigValue = {
+        id: registryItem.id,
+        value: registryItem.defaultValue,
+      };
 
       const properties = override.properties ?? [];
       properties.push(propertyConfig);
@@ -120,15 +131,13 @@ export function getFieldOverrideCategories(
     /**
      * Add override matcher UI element
      */
-    const htmlId = uuidv4();
     category.addItem(
       new OptionsPaneItemDescriptor({
-        id: htmlId,
         title: matcherUi.name,
         render: function renderMatcherUI() {
           return (
             <matcherUi.component
-              id={htmlId}
+              id={`${matcherUi.matcher.id}-${idx}`}
               matcher={matcherUi.matcher}
               data={data ?? []}
               options={override.matcher.options}
@@ -164,7 +173,10 @@ export function getFieldOverrideCategories(
       };
 
       const onPropertyRemove = () => {
-        onOverrideChange(idx, { ...override, properties: override.properties.filter((_, i) => i !== propIdx) });
+        onOverrideChange(idx, {
+          ...override,
+          properties: override.properties.filter((_, i) => i !== propIdx),
+        });
       };
 
       /**
@@ -172,6 +184,7 @@ export function getFieldOverrideCategories(
        */
       category.addItem(
         new OptionsPaneItemDescriptor({
+          title: registryItemForProperty.name,
           skipField: true,
           render: function renderPropertyEditor() {
             return (
@@ -197,6 +210,7 @@ export function getFieldOverrideCategories(
     if (!isSystemOverride && override.matcher.options) {
       category.addItem(
         new OptionsPaneItemDescriptor({
+          title: '----------',
           skipField: true,
           render: function renderAddPropertyButton() {
             return (
@@ -260,7 +274,11 @@ function getOverrideProperties(registry: FieldConfigOptionsRegistry) {
       if (item.category) {
         label = [...item.category, item.name].join(' > ');
       }
-      return { label, value: item.id, description: item.description };
+      return {
+        label,
+        value: item.id,
+        description: item.description,
+      };
     });
 }
 
@@ -270,5 +288,9 @@ function AddOverrideButtonContainer({ children }: { children: React.ReactNode })
 }
 
 function getBorderTopStyles(theme: GrafanaTheme2) {
-  return css({ borderTop: `1px solid ${theme.colors.border.weak}`, padding: `${theme.spacing(2)}`, display: 'flex' });
+  return css({
+    borderTop: `1px solid ${theme.colors.border.weak}`,
+    padding: `${theme.spacing(2)}`,
+    display: 'flex',
+  });
 }
diff --git a/public/app/features/dashboard/components/PanelEditor/getLibraryPanelOptions.tsx b/public/app/features/dashboard/components/PanelEditor/getLibraryPanelOptions.tsx
index 019d0d79d10..9d3f6793e73 100644
--- a/public/app/features/dashboard/components/PanelEditor/getLibraryPanelOptions.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/getLibraryPanelOptions.tsx
@@ -1,5 +1,3 @@
-import { v4 as uuidv4 } from 'uuid';
-
 import { t } from '@grafana/i18n';
 import { Input } from '@grafana/ui';
 import { LibraryPanelInformation } from 'app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo';
@@ -26,13 +24,12 @@ export function getLibraryPanelOptionsCategory(props: OptionPaneRenderProps): Op
       .addItem(
         new OptionsPaneItemDescriptor({
           title: t('dashboard.get-library-panel-options-category.title.name', 'Name'),
-          id: uuidv4(),
           value: panel.libraryPanel.name,
           popularRank: 1,
-          render: function renderName(descriptor) {
+          render: function renderName() {
             return (
               <Input
-                id={descriptor.props.id}
+                id="LibraryPanelFrameName"
                 defaultValue={panel.libraryPanel.name}
                 onBlur={(e) =>
                   onPanelConfigChange('libraryPanel', { ...panel.libraryPanel, name: e.currentTarget.value })
@@ -45,7 +42,6 @@ export function getLibraryPanelOptionsCategory(props: OptionPaneRenderProps): Op
       .addItem(
         new OptionsPaneItemDescriptor({
           title: t('dashboard.get-library-panel-options-category.title.information', 'Information'),
-          id: uuidv4(),
           render: function renderLibraryPanelInformation() {
             return <LibraryPanelInformation panel={panel} formatDate={dashboard.formatDate} />;
           },
diff --git a/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx b/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx
index ebe82ed0223..c87c50f1429 100644
--- a/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx
@@ -1,5 +1,3 @@
-import { v4 as uuidv4 } from 'uuid';
-
 import { selectors } from '@grafana/e2e-selectors';
 import { t } from '@grafana/i18n';
 import { config } from '@grafana/runtime';
@@ -22,11 +20,8 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
     isOpenDefault: true,
   });
 
-  const panelFrameTitleId = uuidv4();
-  const descriptionId = uuidv4();
-
   const setPanelTitle = (title: string) => {
-    const input = document.getElementById(panelFrameTitleId);
+    const input = document.getElementById('PanelFrameTitle');
     if (input instanceof HTMLInputElement) {
       input.value = title;
       onPanelConfigChange('title', title);
@@ -34,7 +29,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
   };
 
   const setPanelDescription = (description: string) => {
-    const input = document.getElementById(descriptionId);
+    const input = document.getElementById('description-text-area');
     if (input instanceof HTMLTextAreaElement) {
       input.value = description;
       onPanelConfigChange('description', description);
@@ -45,7 +40,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
     .addItem(
       new OptionsPaneItemDescriptor({
         title: t('dashboard.get-panel-frame-category.title.title', 'Title'),
-        id: panelFrameTitleId,
+        id: 'PanelFrameTitle',
         value: panel.title,
         popularRank: 1,
         render: function renderTitle(descriptor) {
@@ -70,7 +65,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
     .addItem(
       new OptionsPaneItemDescriptor({
         title: t('dashboard.get-panel-frame-category.title.description', 'Description'),
-        id: descriptionId,
+        id: 'description-text-area',
         description: panel.description,
         value: panel.description,
         render: function renderDescription(descriptor) {
@@ -91,7 +86,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
     .addItem(
       new OptionsPaneItemDescriptor({
         title: t('dashboard.get-panel-frame-category.title.transparent-background', 'Transparent background'),
-        id: uuidv4(),
+        id: 'transparent-background',
         render: function renderTransparent(descriptor) {
           return (
             <Switch
@@ -113,7 +108,6 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
       }).addItem(
         new OptionsPaneItemDescriptor({
           title: t('dashboard.get-panel-frame-category.title.panel-links', 'Panel links'),
-          id: uuidv4(),
           render: function renderLinks() {
             return (
               <DataLinksInlineEditor
@@ -136,7 +130,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
         .addItem(
           new OptionsPaneItemDescriptor({
             title: t('dashboard.get-panel-frame-category.title.repeat-by-variable', 'Repeat by variable'),
-            id: uuidv4(),
+            id: 'repeat-by-variable-select',
             description:
               'Repeat this panel for each value in the selected variable. This is not visible while in edit mode. You need to go back to dashboard and then update the variable or reload the dashboard.',
             render: function renderRepeatOptions(descriptor) {
@@ -181,13 +175,11 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
         .addItem(
           new OptionsPaneItemDescriptor({
             title: t('dashboard.get-panel-frame-category.title.max-per-row', 'Max per row'),
-            id: uuidv4(),
             showIf: () => Boolean(panel.repeat && panel.repeatDirection === 'h'),
-            render: function renderOption(descriptor) {
+            render: function renderOption() {
               const maxPerRowOptions = [2, 3, 4, 6, 8, 12].map((value) => ({ label: value.toString(), value }));
               return (
                 <Select
-                  id={descriptor.props.id}
                   options={maxPerRowOptions}
                   value={panel.maxPerRow}
                   onChange={(value) => onPanelConfigChange('maxPerRow', value.value)}
diff --git a/public/app/features/dashboard/components/PanelEditor/getVisualizationOptions.tsx b/public/app/features/dashboard/components/PanelEditor/getVisualizationOptions.tsx
index c5fd5ba8a0b..843bf0700bd 100644
--- a/public/app/features/dashboard/components/PanelEditor/getVisualizationOptions.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/getVisualizationOptions.tsx
@@ -1,5 +1,4 @@
 import { get as lodashGet } from 'lodash';
-import { v4 as uuiv4 } from 'uuid';
 
 import {
   EventBus,
@@ -131,12 +130,9 @@ export function getVisualizationOptions(props: OptionPaneRenderProps): OptionsPa
       category.props.itemsCount = fieldOption.getItemsCount(value);
     }
 
-    const htmlId = uuiv4();
-
     category.addItem(
       new OptionsPaneItemDescriptor({
         title: fieldOption.name,
-        id: htmlId,
         description: fieldOption.description,
         overrides: getOptionOverrides(fieldOption, currentFieldConfig, data?.series),
         render: function renderEditor() {
@@ -146,7 +142,7 @@ export function getVisualizationOptions(props: OptionPaneRenderProps): OptionsPa
             );
           };
 
-          return <Editor value={value} onChange={onChange} item={fieldOption} context={context} id={htmlId} />;
+          return <Editor value={value} onChange={onChange} item={fieldOption} context={context} id={fieldOption.id} />;
         },
       })
     );
@@ -169,13 +165,12 @@ export function getLibraryVizPanelOptionsCategory(libraryPanel: LibraryPanelBeha
     .addItem(
       new OptionsPaneItemDescriptor({
         title: t('dashboard.get-library-viz-panel-options-category.title.name', 'Name'),
-        id: uuiv4(),
         value: libraryPanel,
         popularRank: 1,
-        render: function renderName(descriptor) {
+        render: function renderName() {
           return (
             <Input
-              id={descriptor.props.id}
+              id="LibraryPanelFrameName"
               data-testid="library panel name input"
               defaultValue={libraryPanel.state.name}
               onBlur={(e) => libraryPanel.setState({ name: e.currentTarget.value })}
@@ -269,12 +264,9 @@ export function getVisualizationOptions2(props: OptionPaneRenderProps2): Options
       category.props.itemsCount = fieldOption.getItemsCount(value);
     }
 
-    const htmlId = uuiv4();
-
     category.addItem(
       new OptionsPaneItemDescriptor({
         title: fieldOption.name,
-        id: htmlId,
         description: fieldOption.description,
         overrides: getOptionOverrides(fieldOption, currentFieldConfig, data?.series),
         render: function renderEditor() {
@@ -285,7 +277,7 @@ export function getVisualizationOptions2(props: OptionPaneRenderProps2): Options
             );
           };
 
-          return <Editor value={value} onChange={onChange} item={fieldOption} context={context} id={htmlId} />;
+          return <Editor value={value} onChange={onChange} item={fieldOption} context={context} id={fieldOption.id} />;
         },
       })
     );
@@ -338,13 +330,10 @@ export function fillOptionsPaneItems(
       continue;
     }
 
-    const htmlId = uuiv4();
-
     const Editor = pluginOption.editor;
     category.addItem(
       new OptionsPaneItemDescriptor({
         title: pluginOption.name,
-        id: htmlId,
         description: pluginOption.description,
         render: function renderEditor() {
           return (
@@ -355,7 +344,7 @@ export function fillOptionsPaneItems(
               }}
               item={pluginOption}
               context={context}
-              id={htmlId}
+              id={pluginOption.id}
             />
           );
         },
diff --git a/public/app/features/dashboard/components/PanelEditor/state/OptionSearchEngine.test.ts b/public/app/features/dashboard/components/PanelEditor/state/OptionSearchEngine.test.ts
index 6165901fcde..43787af8f58 100644
--- a/public/app/features/dashboard/components/PanelEditor/state/OptionSearchEngine.test.ts
+++ b/public/app/features/dashboard/components/PanelEditor/state/OptionSearchEngine.test.ts
@@ -1,5 +1,3 @@
-import { v4 as uuiv4 } from 'uuid';
-
 import { OptionsPaneCategoryDescriptor } from '../OptionsPaneCategoryDescriptor';
 import { OptionsPaneItemDescriptor } from '../OptionsPaneItemDescriptor';
 
@@ -53,21 +51,18 @@ function getOptionCategories(): OptionsPaneCategoryDescriptor[] {
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'Title',
-          id: uuiv4(),
           render: jest.fn(),
         })
       )
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'Min',
-          id: uuiv4(),
           render: jest.fn(),
         })
       )
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'ASDSADASDSADA',
-          id: uuiv4(),
           description: 'DescriptionMatch',
           render: jest.fn(),
         })
@@ -79,21 +74,18 @@ function getOptionCategories(): OptionsPaneCategoryDescriptor[] {
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'Min',
-          id: uuiv4(),
           render: jest.fn(),
         })
       )
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'DescriptionMatch',
-          id: uuiv4(),
           render: jest.fn(),
         })
       )
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'Frame',
-          id: uuiv4(),
           render: jest.fn(),
         })
       ),
@@ -109,21 +101,18 @@ function getOverrides(): OptionsPaneCategoryDescriptor[] {
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'Match by name',
-          id: uuiv4(),
           render: jest.fn(),
         })
       )
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'Min',
-          id: uuiv4(),
           render: jest.fn(),
         })
       )
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'Max',
-          id: uuiv4(),
           render: jest.fn(),
         })
       ),
@@ -134,21 +123,18 @@ function getOverrides(): OptionsPaneCategoryDescriptor[] {
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'Match by name',
-          id: uuiv4(),
           render: jest.fn(),
         })
       )
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'Threshold',
-          id: uuiv4(),
           render: jest.fn(),
         })
       )
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'Max',
-          id: uuiv4(),
           render: jest.fn(),
         })
       ),
diff --git a/public/app/features/dimensions/editors/ColorDimensionEditor.tsx b/public/app/features/dimensions/editors/ColorDimensionEditor.tsx
index 1b991bdd668..a8c7d5af8c5 100644
--- a/public/app/features/dimensions/editors/ColorDimensionEditor.tsx
+++ b/public/app/features/dimensions/editors/ColorDimensionEditor.tsx
@@ -21,7 +21,7 @@ export const ColorDimensionEditor = (props: StandardEditorProps<ColorDimensionCo
     }),
     []
   );
-  const { value, context, onChange, item, id } = props;
+  const { value, context, onChange, item } = props;
 
   const defaultColor = 'dark-green';
 
@@ -71,7 +71,6 @@ export const ColorDimensionEditor = (props: StandardEditorProps<ColorDimensionCo
     <>
       <div className={styles.container}>
         <Select
-          inputId={id}
           value={selectedOption}
           options={selectOptions}
           onChange={onSelectChange}
diff --git a/public/app/features/dimensions/editors/ScalarDimensionEditor.tsx b/public/app/features/dimensions/editors/ScalarDimensionEditor.tsx
index 13b0843dcd5..a88c7334571 100644
--- a/public/app/features/dimensions/editors/ScalarDimensionEditor.tsx
+++ b/public/app/features/dimensions/editors/ScalarDimensionEditor.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { useCallback, useId, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { FieldType, GrafanaTheme2, SelectableValue, StandardEditorProps } from '@grafana/data';
 import { t } from '@grafana/i18n';
@@ -92,8 +92,6 @@ export const ScalarDimensionEditor = ({ value, context, onChange, item }: Props)
     [onChange, value]
   );
 
-  const valueInputId = useId();
-
   const val = value ?? {};
   const mode = value?.mode ?? ScalarDimensionMode.Mod;
   const selectedOption = isFixed ? fixedValueOption : selectOptions.find((v) => v.value === fieldName);
@@ -121,7 +119,6 @@ export const ScalarDimensionEditor = ({ value, context, onChange, item }: Props)
               grow={true}
             >
               <NumberInput
-                id={valueInputId}
                 value={val?.fixed ?? DEFAULT_VALUE}
                 onChange={onValueChange}
                 max={settings?.max}
diff --git a/public/app/features/dimensions/editors/ScaleDimensionEditor.tsx b/public/app/features/dimensions/editors/ScaleDimensionEditor.tsx
index 52b8a333f6a..d5eb712d47d 100644
--- a/public/app/features/dimensions/editors/ScaleDimensionEditor.tsx
+++ b/public/app/features/dimensions/editors/ScaleDimensionEditor.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { useCallback, useId, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { GrafanaTheme2, SelectableValue, StandardEditorProps } from '@grafana/data';
 import { t } from '@grafana/i18n';
@@ -12,7 +12,7 @@ import { validateScaleOptions, validateScaleConfig } from '../scale';
 import { ScaleDimensionOptions } from '../types';
 
 export const ScaleDimensionEditor = (props: StandardEditorProps<ScaleDimensionConfig, ScaleDimensionOptions>) => {
-  const { value, context, onChange, item, id } = props;
+  const { value, context, onChange, item } = props;
   const { settings } = item;
   const styles = useStyles2(getStyles);
 
@@ -95,17 +95,12 @@ export const ScaleDimensionEditor = (props: StandardEditorProps<ScaleDimensionCo
     [validateAndDoChange, value]
   );
 
-  const valueInputId = useId();
-  const minInputId = useId();
-  const maxInputId = useId();
-
   const val = value ?? {};
   const selectedOption = isFixed ? fixedValueOption : selectOptions.find((v) => v.value === fieldName);
   return (
     <>
       <div>
         <Select
-          inputId={id}
           value={selectedOption}
           options={selectOptions}
           onChange={onSelectChange}
@@ -116,7 +111,7 @@ export const ScaleDimensionEditor = (props: StandardEditorProps<ScaleDimensionCo
         {isFixed && (
           <InlineFieldRow>
             <InlineField label={t('dimensions.scale-dimension-editor.label-value', 'Value')} labelWidth={8} grow={true}>
-              <NumberInput id={valueInputId} value={val.fixed} {...minMaxStep} onChange={onValueChange} />
+              <NumberInput value={val.fixed} {...minMaxStep} onChange={onValueChange} />
             </InlineField>
           </InlineFieldRow>
         )}
@@ -124,12 +119,12 @@ export const ScaleDimensionEditor = (props: StandardEditorProps<ScaleDimensionCo
           <>
             <InlineFieldRow>
               <InlineField label={t('dimensions.scale-dimension-editor.label-min', 'Min')} labelWidth={8} grow={true}>
-                <NumberInput id={minInputId} value={val.min} {...minMaxStep} onChange={onMinChange} />
+                <NumberInput value={val.min} {...minMaxStep} onChange={onMinChange} />
               </InlineField>
             </InlineFieldRow>
             <InlineFieldRow>
               <InlineField label={t('dimensions.scale-dimension-editor.label-max', 'Max')} labelWidth={8} grow={true}>
-                <NumberInput id={maxInputId} value={val.max} {...minMaxStep} onChange={onMaxChange} />
+                <NumberInput value={val.max} {...minMaxStep} onChange={onMaxChange} />
               </InlineField>
             </InlineFieldRow>
           </>
diff --git a/public/app/features/dimensions/editors/TextDimensionEditor.tsx b/public/app/features/dimensions/editors/TextDimensionEditor.tsx
index 65f4f2f9aaa..325af4b0c4b 100644
--- a/public/app/features/dimensions/editors/TextDimensionEditor.tsx
+++ b/public/app/features/dimensions/editors/TextDimensionEditor.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useId } from 'react';
+import { useCallback } from 'react';
 
 import {
   FieldNamePickerConfigSettings,
@@ -74,10 +74,6 @@ export const TextDimensionEditor = ({ value, context, onChange }: Props) => {
     onFixedChange('');
   };
 
-  const fieldInputId = useId();
-  const valueInputId = useId();
-  const templateInputId = useId();
-
   const mode = value?.mode ?? TextDimensionMode.Fixed;
   return (
     <>
@@ -98,7 +94,6 @@ export const TextDimensionEditor = ({ value, context, onChange }: Props) => {
             grow={true}
           >
             <FieldNamePicker
-              id={fieldInputId}
               context={context}
               value={value.field ?? ''}
               onChange={onFieldChange}
@@ -115,7 +110,6 @@ export const TextDimensionEditor = ({ value, context, onChange }: Props) => {
             grow={true}
           >
             <StringValueEditor
-              id={valueInputId}
               context={context}
               value={value?.fixed}
               onChange={onFixedChange}
@@ -144,7 +138,6 @@ export const TextDimensionEditor = ({ value, context, onChange }: Props) => {
             grow={true}
           >
             <StringValueEditor // This could be a code editor
-              id={templateInputId}
               context={context}
               value={value?.fixed}
               onChange={onFixedChange}
diff --git a/public/app/features/geo/editor/locationModeEditor.tsx b/public/app/features/geo/editor/locationModeEditor.tsx
index 758a99b6f4f..b151b9f4b53 100644
--- a/public/app/features/geo/editor/locationModeEditor.tsx
+++ b/public/app/features/geo/editor/locationModeEditor.tsx
@@ -21,7 +21,6 @@ export const LocationModeEditor = ({
   onChange,
   context,
   item,
-  id,
 }: StandardEditorProps<string, ModeEditorSettings, unknown, unknown>) => {
   const [info, setInfo] = useState<FrameGeometryField>();
 
@@ -98,7 +97,6 @@ export const LocationModeEditor = ({
   return (
     <>
       <Select
-        inputId={id}
         options={MODE_OPTIONS}
         value={value}
         onChange={(v) => {
diff --git a/public/app/plugins/panel/alertlist/module.tsx b/public/app/plugins/panel/alertlist/module.tsx
index 180089d0ad5..9e8df21539e 100644
--- a/public/app/plugins/panel/alertlist/module.tsx
+++ b/public/app/plugins/panel/alertlist/module.tsx
@@ -128,12 +128,11 @@ const unifiedAlertList = new PanelPlugin<UnifiedAlertListOptions>(UnifiedAlertLi
       description: t('alertlist.description-datasource', 'Filter from alert source'),
       id: 'datasource',
       defaultValue: null,
-      editor: function RenderDatasourcePicker({ id, ...props }) {
+      editor: function RenderDatasourcePicker(props) {
         return (
           <Stack gap={1}>
             <DataSourcePicker
               {...props}
-              inputId={id}
               type={SUPPORTED_RULE_SOURCE_TYPES}
               noDefault
               current={props.value}
diff --git a/public/app/plugins/panel/geomap/editor/FrameSelectionEditor.tsx b/public/app/plugins/panel/geomap/editor/FrameSelectionEditor.tsx
index 597aeb657bd..a5a920ce3d1 100644
--- a/public/app/plugins/panel/geomap/editor/FrameSelectionEditor.tsx
+++ b/public/app/plugins/panel/geomap/editor/FrameSelectionEditor.tsx
@@ -6,7 +6,7 @@ import { RefIDMultiPicker, RefIDPicker, stringsToRegexp } from '@grafana/ui/inte
 
 type Props = StandardEditorProps<MatcherConfig>;
 
-export const FrameSelectionEditor = ({ value, context, onChange, id }: Props) => {
+export const FrameSelectionEditor = ({ value, context, onChange }: Props) => {
   const onFilterChange = useCallback(
     (v: string) => {
       onChange(
@@ -23,7 +23,6 @@ export const FrameSelectionEditor = ({ value, context, onChange, id }: Props) =>
 
   return (
     <RefIDPicker
-      id={id}
       value={value?.options}
       onChange={onFilterChange}
       data={context.data}
diff --git a/public/app/plugins/panel/geomap/editor/MapViewEditor.tsx b/public/app/plugins/panel/geomap/editor/MapViewEditor.tsx
index addce95621e..6a6d172eff5 100644
--- a/public/app/plugins/panel/geomap/editor/MapViewEditor.tsx
+++ b/public/app/plugins/panel/geomap/editor/MapViewEditor.tsx
@@ -1,5 +1,5 @@
 import { toLonLat } from 'ol/proj';
-import { useMemo, useCallback, useId } from 'react';
+import { useMemo, useCallback } from 'react';
 
 import { StandardEditorProps, SelectableValue } from '@grafana/data';
 import { Trans, t } from '@grafana/i18n';
@@ -63,14 +63,11 @@ export const MapViewEditor = ({
     [value, onChange]
   );
 
-  const viewInputId = useId();
-  const zoomInputId = useId();
-
   return (
     <>
       <InlineFieldRow>
         <InlineField label={t('geomap.map-view-editor.label-view', 'View')} labelWidth={labelWidth} grow={true}>
-          <Select inputId={viewInputId} options={views.options} value={views.current} onChange={onSelectView} />
+          <Select options={views.options} value={views.current} onChange={onSelectView} />
         </InlineField>
       </InlineFieldRow>
       {value.id === MapCenterID.Coordinates && (
@@ -91,7 +88,6 @@ export const MapViewEditor = ({
           grow={true}
         >
           <NumberInput
-            id={zoomInputId}
             value={value?.zoom ?? 1}
             min={1}
             max={18}
diff --git a/public/app/plugins/panel/geomap/editor/StyleEditor.tsx b/public/app/plugins/panel/geomap/editor/StyleEditor.tsx
index a880846f2b1..31eae0e9566 100644
--- a/public/app/plugins/panel/geomap/editor/StyleEditor.tsx
+++ b/public/app/plugins/panel/geomap/editor/StyleEditor.tsx
@@ -1,5 +1,5 @@
 import { capitalize } from 'lodash';
-import { useId, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useObservable } from 'react-use';
 import { Observable, of } from 'rxjs';
 
@@ -113,21 +113,6 @@ export const StyleEditor = (props: Props) => {
   const hasTextLabel = styleUsesText(value);
   const maxFiles = 2000;
 
-  const symbolId = useId();
-  const rotationAngleId = useId();
-  const colorId = useId();
-  const opacityId = useId();
-  const sizeId = useId();
-  const symbol1Id = useId();
-  const symbolVertId = useId();
-  const color1Id = useId();
-  const fillOpacityId = useId();
-  const rotationAngle1Id = useId();
-  const textId = useId();
-  const fontSizeId = useId();
-  const xOffsetId = useId();
-  const yOffsetId = useId();
-
   // Simple fixed value display
   if (settings?.simpleFixedValues) {
     return (
@@ -137,7 +122,6 @@ export const StyleEditor = (props: Props) => {
             <InlineFieldRow>
               <InlineField label={t('geomap.style-editor.label-symbol', 'Symbol')}>
                 <ResourceDimensionEditor
-                  id={symbolId}
                   value={value?.symbol ?? defaultStyleConfig.symbol}
                   context={context}
                   onChange={onSymbolChange}
@@ -163,7 +147,6 @@ export const StyleEditor = (props: Props) => {
             </InlineFieldRow>
             <Field label={t('geomap.style-editor.label-rotation-angle', 'Rotation angle')}>
               <ScalarDimensionEditor
-                id={rotationAngleId}
                 value={value?.rotation ?? defaultStyleConfig.rotation}
                 context={context}
                 onChange={onRotationChange}
@@ -183,7 +166,6 @@ export const StyleEditor = (props: Props) => {
           <InlineField label={t('geomap.style-editor.label-color', 'Color')} labelWidth={10}>
             <InlineLabel width={4}>
               <ColorPicker
-                id={colorId}
                 color={value?.color?.fixed ?? defaultStyleConfig.color.fixed}
                 onChange={(v) => {
                   onColorChange({ fixed: v });
@@ -195,7 +177,6 @@ export const StyleEditor = (props: Props) => {
         <InlineFieldRow>
           <InlineField label={t('geomap.style-editor.label-opacity', 'Opacity')} labelWidth={10} grow>
             <SliderValueEditor
-              id={opacityId}
               value={value?.opacity ?? defaultStyleConfig.opacity}
               context={context}
               onChange={onOpacityChange}
@@ -219,7 +200,6 @@ export const StyleEditor = (props: Props) => {
     <>
       <Field label={t('geomap.style-editor.label-size', 'Size')}>
         <ScaleDimensionEditor
-          id={sizeId}
           value={value?.size ?? defaultStyleConfig.size}
           context={context}
           onChange={onSizeChange}
@@ -237,7 +217,6 @@ export const StyleEditor = (props: Props) => {
         <>
           <Field label={t('geomap.style-editor.label-symbol', 'Symbol')}>
             <ResourceDimensionEditor
-              id={symbol1Id}
               value={value?.symbol ?? defaultStyleConfig.symbol}
               context={context}
               onChange={onSymbolChange}
@@ -262,7 +241,6 @@ export const StyleEditor = (props: Props) => {
           </Field>
           <Field label={t('geomap.style-editor.label-symbol-vertical-align', 'Symbol vertical align')}>
             <RadioButtonGroup
-              id={symbolVertId}
               value={value?.symbolAlign?.vertical ?? defaultStyleConfig.symbolAlign.vertical}
               onChange={onAlignVerticalChange}
               options={[
@@ -302,7 +280,6 @@ export const StyleEditor = (props: Props) => {
       )}
       <Field label={t('geomap.style-editor.label-color', 'Color')}>
         <ColorDimensionEditor
-          id={color1Id}
           value={value?.color ?? defaultStyleConfig.color}
           context={context}
           onChange={onColorChange}
@@ -311,7 +288,6 @@ export const StyleEditor = (props: Props) => {
       </Field>
       <Field label={t('geomap.style-editor.label-fill-opacity', 'Fill opacity')}>
         <SliderValueEditor
-          id={fillOpacityId}
           value={value?.opacity ?? defaultStyleConfig.opacity}
           context={context}
           onChange={onOpacityChange}
@@ -329,7 +305,6 @@ export const StyleEditor = (props: Props) => {
       {settings?.displayRotation && (
         <Field label={t('geomap.style-editor.label-rotation-angle', 'Rotation angle')}>
           <ScalarDimensionEditor
-            id={rotationAngle1Id}
             value={value?.rotation ?? defaultStyleConfig.rotation}
             context={context}
             onChange={onRotationChange}
@@ -346,7 +321,6 @@ export const StyleEditor = (props: Props) => {
       )}
       <Field label={t('geomap.style-editor.label-text-label', 'Text label')}>
         <TextDimensionEditor
-          id={textId}
           value={value?.text ?? defaultTextConfig}
           context={context}
           onChange={onTextChange}
@@ -359,7 +333,6 @@ export const StyleEditor = (props: Props) => {
           <Stack>
             <Field label={t('geomap.style-editor.label-font-size', 'Font size')}>
               <NumberValueEditor
-                id={fontSizeId}
                 value={value?.textConfig?.fontSize ?? defaultStyleConfig.textConfig.fontSize}
                 context={context}
                 onChange={onTextFontSizeChange}
@@ -368,7 +341,6 @@ export const StyleEditor = (props: Props) => {
             </Field>
             <Field label={t('geomap.style-editor.label-x-offset', 'X offset')}>
               <NumberValueEditor
-                id={xOffsetId}
                 value={value?.textConfig?.offsetX ?? defaultStyleConfig.textConfig.offsetX}
                 context={context}
                 onChange={onTextOffsetXChange}
@@ -377,7 +349,6 @@ export const StyleEditor = (props: Props) => {
             </Field>
             <Field label={t('geomap.style-editor.label-y-offset', 'Y offset')}>
               <NumberValueEditor
-                id={yOffsetId}
                 value={value?.textConfig?.offsetY ?? defaultStyleConfig.textConfig.offsetY}
                 context={context}
                 onChange={onTextOffsetYChange}
diff --git a/public/app/plugins/panel/table/PaginationEditor.tsx b/public/app/plugins/panel/table/PaginationEditor.tsx
index b13d3f8bee4..0bfa20b565b 100644
--- a/public/app/plugins/panel/table/PaginationEditor.tsx
+++ b/public/app/plugins/panel/table/PaginationEditor.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { StandardEditorProps } from '@grafana/data';
 import { Switch } from '@grafana/ui';
 
-export function PaginationEditor({ onChange, value, context, id }: StandardEditorProps<boolean>) {
+export function PaginationEditor({ onChange, value, context }: StandardEditorProps<boolean>) {
   const changeValue = (event: React.FormEvent<HTMLInputElement> | undefined) => {
     if (event?.currentTarget.checked) {
       context.options.footer.show = false;
@@ -11,5 +11,5 @@ export function PaginationEditor({ onChange, value, context, id }: StandardEdito
     onChange(event?.currentTarget.checked);
   };
 
-  return <Switch value={Boolean(value)} onChange={changeValue} id={id} />;
+  return <Switch value={Boolean(value)} onChange={changeValue} />;
 }
diff --git a/public/app/plugins/panel/table/TableCellOptionEditor.tsx b/public/app/plugins/panel/table/TableCellOptionEditor.tsx
index a28996a2b6d..c0fd5e0e5ea 100644
--- a/public/app/plugins/panel/table/TableCellOptionEditor.tsx
+++ b/public/app/plugins/panel/table/TableCellOptionEditor.tsx
@@ -23,10 +23,9 @@ export interface TableCellEditorProps<T> {
 interface Props {
   value: TableCellOptions;
   onChange: (v: TableCellOptions) => void;
-  id?: string;
 }
 
-export const TableCellOptionEditor = ({ value, onChange, id }: Props) => {
+export const TableCellOptionEditor = ({ value, onChange }: Props) => {
   const cellType = value.type;
   const styles = useStyles2(getStyles);
   const currentMode = cellDisplayModeOptions.find((o) => o.value!.type === cellType)!;
@@ -61,7 +60,7 @@ export const TableCellOptionEditor = ({ value, onChange, id }: Props) => {
   return (
     <div className={styles.fixBottomMargin}>
       <Field>
-        <Select inputId={id} options={cellDisplayModeOptions} value={currentMode} onChange={onCellTypeChange} />
+        <Select options={cellDisplayModeOptions} value={currentMode} onChange={onCellTypeChange} />
       </Field>
       {(cellType === TableCellDisplayMode.Auto || cellType === TableCellDisplayMode.ColorText) && (
         <AutoCellOptionsEditor cellOptions={value} onChange={onCellOptionsChange} />
diff --git a/public/app/plugins/panel/table/cells/AutoCellOptionsEditor.tsx b/public/app/plugins/panel/table/cells/AutoCellOptionsEditor.tsx
index a6b75e47e2e..e97d481e0b3 100644
--- a/public/app/plugins/panel/table/cells/AutoCellOptionsEditor.tsx
+++ b/public/app/plugins/panel/table/cells/AutoCellOptionsEditor.tsx
@@ -1,5 +1,3 @@
-import { useId } from 'react';
-
 import { t } from '@grafana/i18n';
 import { TableAutoCellOptions, TableColorTextCellOptions } from '@grafana/schema';
 import { Field, Switch } from '@grafana/ui';
@@ -15,8 +13,6 @@ export const AutoCellOptionsEditor = ({
     onChange(cellOptions);
   };
 
-  const htmlId = useId();
-
   return (
     <Field
       label={t('table.auto-cell-options-editor.label-wrap-text', 'Wrap text')}
@@ -25,7 +21,7 @@ export const AutoCellOptionsEditor = ({
         'If selected text will be wrapped to the width of text in the configured column'
       )}
     >
-      <Switch id={htmlId} value={cellOptions.wrapText} onChange={onWrapTextChange} />
+      <Switch value={cellOptions.wrapText} onChange={onWrapTextChange} />
     </Field>
   );
 };
diff --git a/public/app/plugins/panel/table/cells/ColorBackgroundCellOptionsEditor.tsx b/public/app/plugins/panel/table/cells/ColorBackgroundCellOptionsEditor.tsx
index a6cac1705b9..33c3761493d 100644
--- a/public/app/plugins/panel/table/cells/ColorBackgroundCellOptionsEditor.tsx
+++ b/public/app/plugins/panel/table/cells/ColorBackgroundCellOptionsEditor.tsx
@@ -1,5 +1,3 @@
-import { useId } from 'react';
-
 import { SelectableValue } from '@grafana/data';
 import { Trans, t } from '@grafana/i18n';
 import { TableCellBackgroundDisplayMode, TableColoredBackgroundCellOptions } from '@grafana/schema';
@@ -33,16 +31,12 @@ export const ColorBackgroundCellOptionsEditor = ({
     onChange(cellOptions);
   };
 
-  const applyToRowSwitchId = useId();
-  const wrapTextSwitchId = useId();
-
   const label = (
     <Label
       description={t(
         'table.color-background-cell-options-editor.description-wrap-text',
         'If selected text will be wrapped to the width of text in the configured column'
       )}
-      htmlFor={wrapTextSwitchId}
     >
       <Trans i18nKey="table.color-background-cell-options-editor.wrap-text">Wrap text</Trans>{' '}
       <Badge
@@ -71,10 +65,10 @@ export const ColorBackgroundCellOptionsEditor = ({
           'If selected the entire row will be colored as this cell would be.'
         )}
       >
-        <Switch id={applyToRowSwitchId} value={cellOptions.applyToRow} onChange={onColorRowChange} />
+        <Switch value={cellOptions.applyToRow} onChange={onColorRowChange} />
       </Field>
       <Field label={label}>
-        <Switch id={wrapTextSwitchId} value={cellOptions.wrapText} onChange={onWrapTextChange} />
+        <Switch value={cellOptions.wrapText} onChange={onWrapTextChange} />
       </Field>
     </>
   );
diff --git a/public/app/plugins/panel/table/cells/ImageCellOptionsEditor.tsx b/public/app/plugins/panel/table/cells/ImageCellOptionsEditor.tsx
index f0a65ae2b6f..75233f4fefe 100644
--- a/public/app/plugins/panel/table/cells/ImageCellOptionsEditor.tsx
+++ b/public/app/plugins/panel/table/cells/ImageCellOptionsEditor.tsx
@@ -1,4 +1,4 @@
-import { FormEvent, useId } from 'react';
+import { FormEvent } from 'react';
 
 import { t } from '@grafana/i18n';
 import { TableImageCellOptions } from '@grafana/schema';
@@ -17,9 +17,6 @@ export const ImageCellOptionsEditor = ({ cellOptions, onChange }: TableCellEdito
     onChange(cellOptions);
   };
 
-  const altTextInputId = useId();
-  const titleTextInputId = useId();
-
   return (
     <>
       <Field
@@ -29,7 +26,7 @@ export const ImageCellOptionsEditor = ({ cellOptions, onChange }: TableCellEdito
           "Alternative text that will be displayed if an image can't be displayed or for users who use a screen reader"
         )}
       >
-        <Input id={altTextInputId} onChange={onAltChange} defaultValue={cellOptions.alt} />
+        <Input onChange={onAltChange} defaultValue={cellOptions.alt} />
       </Field>
 
       <Field
@@ -39,7 +36,7 @@ export const ImageCellOptionsEditor = ({ cellOptions, onChange }: TableCellEdito
           'Text that will be displayed when the image is hovered by a cursor'
         )}
       >
-        <Input id={titleTextInputId} onChange={onTitleChange} defaultValue={cellOptions.title} />
+        <Input onChange={onTitleChange} defaultValue={cellOptions.title} />
       </Field>
     </>
   );
diff --git a/public/app/plugins/panel/table/cells/SparklineCellOptionsEditor.tsx b/public/app/plugins/panel/table/cells/SparklineCellOptionsEditor.tsx
index 5a3c62fe62a..bb5b0fd3e7e 100644
--- a/public/app/plugins/panel/table/cells/SparklineCellOptionsEditor.tsx
+++ b/public/app/plugins/panel/table/cells/SparklineCellOptionsEditor.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { useId, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { createFieldConfigRegistry, SetFieldConfigOptionsArgs } from '@grafana/data';
 import { GraphFieldConfig, TableSparklineCellOptions } from '@grafana/schema';
@@ -51,8 +51,6 @@ export const SparklineCellOptionsEditor = (props: TableCellEditorProps<TableSpar
 
   const values = { ...defaultSparklineCellConfig, ...cellOptions };
 
-  const htmlIdBase = useId();
-
   return (
     <Stack direction="column" gap={0}>
       {registry.list(optionIds.map((id) => `custom.${id}`)).map((item) => {
@@ -69,7 +67,6 @@ export const SparklineCellOptionsEditor = (props: TableCellEditorProps<TableSpar
               value={(isOptionKey(path, values) ? values[path] : undefined) ?? item.defaultValue}
               item={item}
               context={{ data: [] }}
-              id={`${htmlIdBase}${item.id}`}
             />
           </Field>
         );
diff --git a/public/app/plugins/panel/table/table-new/PaginationEditor.tsx b/public/app/plugins/panel/table/table-new/PaginationEditor.tsx
index 6edb59b612b..ccd9451ee3f 100644
--- a/public/app/plugins/panel/table/table-new/PaginationEditor.tsx
+++ b/public/app/plugins/panel/table/table-new/PaginationEditor.tsx
@@ -4,7 +4,7 @@ import { StandardEditorProps } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { Switch } from '@grafana/ui';
 
-export function PaginationEditor({ onChange, value, id }: StandardEditorProps<boolean>) {
+export function PaginationEditor({ onChange, value }: StandardEditorProps<boolean>) {
   const changeValue = (event: React.FormEvent<HTMLInputElement> | undefined) => {
     onChange(event?.currentTarget.checked);
   };
@@ -14,7 +14,6 @@ export function PaginationEditor({ onChange, value, id }: StandardEditorProps<bo
       label={selectors.components.PanelEditor.OptionsPane.fieldLabel(`Enable pagination`)}
       value={Boolean(value)}
       onChange={changeValue}
-      id={id}
     />
   );
 }
diff --git a/public/app/plugins/panel/table/table-new/TableCellOptionEditor.tsx b/public/app/plugins/panel/table/table-new/TableCellOptionEditor.tsx
index 49fc8daa039..b70723695cb 100644
--- a/public/app/plugins/panel/table/table-new/TableCellOptionEditor.tsx
+++ b/public/app/plugins/panel/table/table-new/TableCellOptionEditor.tsx
@@ -25,7 +25,6 @@ export interface TableCellEditorProps<T> {
 interface Props {
   value: TableCellOptions;
   onChange: (v: TableCellOptions) => void;
-  id?: string;
 }
 
 const TEXT_WRAP_CELL_TYPES = new Set([
@@ -41,7 +40,7 @@ function isTextWrapCellType(value: TableCellOptions): value is TableCellOptions
   return TEXT_WRAP_CELL_TYPES.has(value.type);
 }
 
-export const TableCellOptionEditor = ({ value, onChange, id }: Props) => {
+export const TableCellOptionEditor = ({ value, onChange }: Props) => {
   const cellType = value.type;
   const styles = useStyles2(getStyles);
   const cellDisplayModeOptions: Array<ComboboxOption<TableCellOptions['type']>> = [
@@ -93,7 +92,7 @@ export const TableCellOptionEditor = ({ value, onChange, id }: Props) => {
   return (
     <div className={styles.fixBottomMargin}>
       <Field>
-        <Combobox id={id} options={cellDisplayModeOptions} value={currentMode} onChange={onCellTypeChange} />
+        <Combobox options={cellDisplayModeOptions} value={currentMode} onChange={onCellTypeChange} />
       </Field>
       {isTextWrapCellType(value) && <TextWrapOptionsEditor cellOptions={value} onChange={onCellOptionsChange} />}
       {cellType === TableCellDisplayMode.Gauge && (
diff --git a/public/app/plugins/panel/table/table-new/cells/ColorBackgroundCellOptionsEditor.tsx b/public/app/plugins/panel/table/table-new/cells/ColorBackgroundCellOptionsEditor.tsx
index ab590fe11f3..33d85539ec4 100644
--- a/public/app/plugins/panel/table/table-new/cells/ColorBackgroundCellOptionsEditor.tsx
+++ b/public/app/plugins/panel/table/table-new/cells/ColorBackgroundCellOptionsEditor.tsx
@@ -1,5 +1,3 @@
-import { useId } from 'react';
-
 import { SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { t } from '@grafana/i18n';
@@ -28,8 +26,6 @@ export const ColorBackgroundCellOptionsEditor = ({
     onChange(cellOptions);
   };
 
-  const htmlId = useId();
-
   return (
     <>
       <Field
@@ -51,7 +47,6 @@ export const ColorBackgroundCellOptionsEditor = ({
         )}
       >
         <Switch
-          id={htmlId}
           label={selectors.components.PanelEditor.OptionsPane.fieldLabel(`Apply to entire row`)}
           value={cellOptions.applyToRow}
           onChange={onColorRowChange}
diff --git a/public/app/plugins/panel/table/table-new/cells/ImageCellOptionsEditor.tsx b/public/app/plugins/panel/table/table-new/cells/ImageCellOptionsEditor.tsx
index f0a65ae2b6f..75233f4fefe 100644
--- a/public/app/plugins/panel/table/table-new/cells/ImageCellOptionsEditor.tsx
+++ b/public/app/plugins/panel/table/table-new/cells/ImageCellOptionsEditor.tsx
@@ -1,4 +1,4 @@
-import { FormEvent, useId } from 'react';
+import { FormEvent } from 'react';
 
 import { t } from '@grafana/i18n';
 import { TableImageCellOptions } from '@grafana/schema';
@@ -17,9 +17,6 @@ export const ImageCellOptionsEditor = ({ cellOptions, onChange }: TableCellEdito
     onChange(cellOptions);
   };
 
-  const altTextInputId = useId();
-  const titleTextInputId = useId();
-
   return (
     <>
       <Field
@@ -29,7 +26,7 @@ export const ImageCellOptionsEditor = ({ cellOptions, onChange }: TableCellEdito
           "Alternative text that will be displayed if an image can't be displayed or for users who use a screen reader"
         )}
       >
-        <Input id={altTextInputId} onChange={onAltChange} defaultValue={cellOptions.alt} />
+        <Input onChange={onAltChange} defaultValue={cellOptions.alt} />
       </Field>
 
       <Field
@@ -39,7 +36,7 @@ export const ImageCellOptionsEditor = ({ cellOptions, onChange }: TableCellEdito
           'Text that will be displayed when the image is hovered by a cursor'
         )}
       >
-        <Input id={titleTextInputId} onChange={onTitleChange} defaultValue={cellOptions.title} />
+        <Input onChange={onTitleChange} defaultValue={cellOptions.title} />
       </Field>
     </>
   );
diff --git a/public/app/plugins/panel/table/table-new/cells/SparklineCellOptionsEditor.tsx b/public/app/plugins/panel/table/table-new/cells/SparklineCellOptionsEditor.tsx
index 05683aeaf8b..69ad1c0f0b5 100644
--- a/public/app/plugins/panel/table/table-new/cells/SparklineCellOptionsEditor.tsx
+++ b/public/app/plugins/panel/table/table-new/cells/SparklineCellOptionsEditor.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { useId, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { createFieldConfigRegistry, SetFieldConfigOptionsArgs } from '@grafana/data';
 import { GraphFieldConfig, TableSparklineCellOptions } from '@grafana/schema';
@@ -51,8 +51,6 @@ export const SparklineCellOptionsEditor = (props: TableCellEditorProps<TableSpar
 
   const values = { ...defaultSparklineCellConfig, ...cellOptions };
 
-  const htmlIdBase = useId();
-
   return (
     <Stack direction="column">
       {registry.list(optionIds.map((id) => `custom.${id}`)).map((item) => {
@@ -69,7 +67,6 @@ export const SparklineCellOptionsEditor = (props: TableCellEditorProps<TableSpar
               value={(isOptionKey(path, values) ? values[path] : undefined) ?? item.defaultValue}
               item={item}
               context={{ data: [] }}
-              id={`${htmlIdBase}-${item.id}`}
             />
           </Field>
         );
diff --git a/public/app/plugins/panel/table/table-new/cells/TextWrapOptionsEditor.tsx b/public/app/plugins/panel/table/table-new/cells/TextWrapOptionsEditor.tsx
index 2daef64561e..74ddaa092ea 100644
--- a/public/app/plugins/panel/table/table-new/cells/TextWrapOptionsEditor.tsx
+++ b/public/app/plugins/panel/table/table-new/cells/TextWrapOptionsEditor.tsx
@@ -1,5 +1,3 @@
-import { useId } from 'react';
-
 import { selectors } from '@grafana/e2e-selectors';
 import { t } from '@grafana/i18n';
 import { TableCellOptions, TableWrapTextOptions } from '@grafana/schema';
@@ -17,13 +15,10 @@ export const TextWrapOptionsEditor = ({
     onChange(cellOptions);
   };
 
-  const htmlId = useId();
-
   return (
     <>
       <Field label={t('table.text-wrap-options.label-wrap-text', 'Wrap text')}>
         <Switch
-          id={htmlId}
           label={selectors.components.PanelEditor.OptionsPane.fieldLabel(`Wrap text`)}
           value={cellOptions.wrapText}
           onChange={onWrapTextChange}
diff --git a/public/app/plugins/panel/xychart/SeriesEditor.tsx b/public/app/plugins/panel/xychart/SeriesEditor.tsx
index 6fb25ef6974..54bc8085154 100644
--- a/public/app/plugins/panel/xychart/SeriesEditor.tsx
+++ b/public/app/plugins/panel/xychart/SeriesEditor.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import { Fragment, useId, useState } from 'react';
+import { Fragment, useState } from 'react';
 import { usePrevious } from 'react-use';
 
 import {
@@ -77,12 +77,6 @@ export const SeriesEditor = ({
     });
   });
 
-  const frameInputId = useId();
-  const xFieldInputId = useId();
-  const yFieldInputId = useId();
-  const sizeFieldInputId = useId();
-  const colorFieldInputId = useId();
-
   return (
     <>
       {mapping === SeriesMapping.Manual && (
@@ -135,7 +129,6 @@ export const SeriesEditor = ({
         <Fragment key={formKey}>
           <Field label={t('xychart.series-editor.label-frame', 'Frame')}>
             <Select
-              inputId={frameInputId}
               placeholder={
                 mapping === SeriesMapping.Auto
                   ? t('xychart.series-editor.placeholder-all-frames', 'All frames')
@@ -165,7 +158,6 @@ export const SeriesEditor = ({
           </Field>
           <Field label={t('xychart.series-editor.label-x-field', 'X field')}>
             <FieldNamePicker
-              id={xFieldInputId}
               value={series.x?.matcher.options as string}
               context={context}
               onChange={(fieldName) => {
@@ -203,7 +195,6 @@ export const SeriesEditor = ({
           </Field>
           <Field label={t('xychart.series-editor.label-y-field', 'Y field')}>
             <FieldNamePicker
-              id={yFieldInputId}
               value={series.y?.matcher?.options as string}
               context={context}
               onChange={(fieldName) => {
@@ -242,7 +233,6 @@ export const SeriesEditor = ({
           </Field>
           <Field label={t('xychart.series-editor.label-size-field', 'Size field')}>
             <FieldNamePicker
-              id={sizeFieldInputId}
               value={series.size?.matcher?.options as string}
               context={context}
               onChange={(fieldName) => {
@@ -278,7 +268,6 @@ export const SeriesEditor = ({
           </Field>
           <Field label={t('xychart.series-editor.label-color-field', 'Color field')}>
             <FieldNamePicker
-              id={colorFieldInputId}
               value={series.color?.matcher?.options as string}
               context={context}
               onChange={(fieldName) => {