iTwin · arome · Feb 13, 2026 · Feb 13, 2026 · Feb 13, 2026 · Feb 13, 2026
@@ -0,0 +1,5 @@
+---
+"@itwin/components-react": minor
+---
+
+Provide option to define data-testids for PropertyEditor components
@@ -29,6 +29,7 @@
     "backstageevent",
     "badeditor",
     "badtype",
+    "beforeunload",
     "betools",
     "borderless",
     "boxshadow",

@@ -80,7 +80,7 @@
       "type": "node",
       "request": "launch",
       "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "start"],
+      "runtimeArgs": ["run", "dev"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "serverReadyAction": {

@@ -584,6 +584,7 @@ export interface EditorProps<TMetadata = ValueMetadata, TValue = Value> {
     commit?: () => void;
     // (undocumented)
     disabled?: boolean;
+    id?: string;
     // (undocumented)
     metadata: TMetadata;
     // (undocumented)

@@ -649,6 +649,7 @@ export interface ImageCheckBoxProps extends CommonProps {
     border?: boolean;
     checked?: boolean;
     disabled?: boolean;
+    id?: string;
     imageOff: string | React_2.ReactNode;
     imageOn: string | React_2.ReactNode;
     inputClassName?: string;

@@ -140,6 +140,7 @@ export class BooleanEditor
           this.props.propertyRecord?.isReadonly
         }
         data-testid="components-checkbox-editor"
+        id={this.props.propertyRecord?.property.name}
       ></Checkbox>
     );
   }

@@ -291,7 +291,11 @@ export class DateTimeEditor
     );
 
     return (
-      <div className={className} ref={this._divElement}>
+      <div
+        className={className}
+        ref={this._divElement}
+        id={this.props.propertyRecord?.property.name}
+      >
         <PopupButton
           label={this.state.displayValue}
           onClose={this._handleClose}

@@ -221,6 +221,7 @@ export class EnumButtonGroupEditor
         )}
         style={this.props.style}
         ref={this._divElement}
+        id={this.props.propertyRecord?.property.name}
       >
         {this.state.choices &&
           this.state.enumIcons.length &&

@@ -181,6 +181,7 @@ export class EnumEditor
           value={selectValue}
           onChange={this._updateSelectValue}
           data-testid="components-select-editor"
+          id={this.props.propertyRecord?.property.name}
           options={this.state.options}
           triggerProps={{
             ref: (el) => {

@@ -171,6 +171,7 @@ export class IconEditor
           readonly={this.props.propertyRecord?.isReadonly}
           onIconChange={this._onIconChange}
           data-testid="components-icon-editor"
+          id={this.props.propertyRecord?.property.name}
         />
       </div>
     );

@@ -162,6 +162,7 @@ export class ImageCheckBoxEditor
         disabled={isDisabled}
         onClick={this._handleClick}
         data-testid="components-imagecheckbox-editor"
+        id={this.props.propertyRecord?.property.name}
       />
     );
   }

@@ -197,6 +197,7 @@ export class NumericInputEditor
     return (
       <NumericEditor
         ref={this._inputElement}
+        id={this.props.propertyRecord?.property.name}
         className={className}
         style={style}
         value={this.state.value}

@@ -317,7 +317,11 @@ export class SliderEditor
     );
 
     return (
-      <div className={className} ref={this._divElement}>
+      <div
+        className={className}
+        ref={this._divElement}
+        id={this.props.propertyRecord?.property.name}
+      >
         <PopupButton
           label={this.state.value}
           onClose={this._handleClose}

@@ -208,7 +208,11 @@ export class TextareaEditor
     textareaProps["aria-label"] = UiComponents.translate("editor.textarea");
 
     return (
-      <div className={className} ref={this._divElement}>
+      <div
+        className={className}
+        ref={this._divElement}
+        id={this.props.propertyRecord?.property.name}
+      >
         <PopupButton
           label={this.state.inputValue}
           closeOnEnter={false}

@@ -144,6 +144,7 @@ export class ToggleEditor
         disabled={this.props.propertyRecord?.isDisabled}
         onChange={this._updateToggleValue}
         data-testid="components-toggle-editor"
+        id={this.props.propertyRecord?.property.name}
         autoFocus={this.props.setFocus} // eslint-disable-line jsx-a11y/no-autofocus
       />
     );

@@ -40,6 +40,12 @@ export interface EditorProps<TMetadata = ValueMetadata, TValue = Value> {
   cancel?: () => void;
   disabled?: boolean;
   size?: "small" | "large";
+  /**
+   * HTML `id` attribute forwarded to the interactive element. Used to associate
+   * the editor with a `<label htmlFor>` so that `getByLabelText` queries work and
+   * the UI meets accessibility requirements.
+   */
+  id?: string;
 }
 
 /**

@@ -20,6 +20,7 @@ export function BooleanEditor({
   onChange,
   commit,
   disabled,
+  id,
 }: EditorProps<ValueMetadata, BooleanValue>) {
   const currentValue = value?.value ?? false;
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -30,6 +31,7 @@ export function BooleanEditor({
 
   return (
     <Checkbox
+      id={id}
       checked={currentValue}
       onChange={handleChange}
       disabled={disabled}

@@ -21,6 +21,7 @@ export function DateEditor({
   commit,
   size,
   disabled,
+  id,
 }: EditorProps<ValueMetadata, DateValue>) {
   return (
     <DateInput
@@ -31,6 +32,7 @@ export function DateEditor({
       onClose={commit}
       size={size}
       disabled={disabled}
+      id={id}
     />
   );
 }

@@ -15,6 +15,7 @@ interface DateInputProps {
   size?: "small" | "large";
   disabled?: boolean;
   showTimePicker?: boolean;
+  id?: string;
 }
 
 /**
@@ -27,6 +28,7 @@ export function DateInput({
   size,
   showTimePicker,
   disabled,
+  id,
 }: DateInputProps) {
   const currentValue = value ?? new Date();
   const dateStr = showTimePicker
@@ -50,7 +52,7 @@ export function DateInput({
         }
       }}
     >
-      <Button style={{ width: "100%" }} size={size} disabled={disabled}>
+      <Button id={id} style={{ width: "100%" }} size={size} disabled={disabled}>
         {dateStr}
       </Button>
     </Popover>

@@ -21,6 +21,7 @@ export function DateTimeEditor({
   commit,
   size,
   disabled,
+  id,
 }: EditorProps<ValueMetadata, DateValue>) {
   return (
     <DateInput
@@ -32,6 +33,7 @@ export function DateTimeEditor({
       size={size}
       disabled={disabled}
       showTimePicker={true}
+      id={id}
     />
   );
 }

@@ -22,6 +22,7 @@ export function EnumEditor({
   commit,
   size,
   disabled,
+  id,
 }: EditorProps<EnumValueMetadata, EnumValue>) {
   const choices = metadata.choices;
   const currentValue = getEnumValue(value, choices);
@@ -35,6 +36,7 @@ export function EnumEditor({
 
   return (
     <Select
+      id={id}
       size={size}
       value={currentValue.choice}
       onChange={handleChange}

@@ -22,8 +22,8 @@ import {
  * Fallback editor that renders readonly value if no editor is found.
  * @internal
  */
-export function FallbackEditor({ value, size }: EditorProps) {
-  return <Input readOnly value={getTextValue(value)} size={size} />;
+export function FallbackEditor({ value, size, id }: EditorProps) {
+  return <Input id={id} readOnly value={getTextValue(value)} size={size} />;
 }
 
 function getTextValue(value?: Value) {

@@ -20,10 +20,12 @@ export function NumericEditor({
   onChange,
   size,
   disabled,
+  id,
 }: EditorProps<ValueMetadata, NumericValue>) {
   const currentValue = getNumericValue(value);
   return (
     <Input
+      id={id}
       value={currentValue.displayValue}
       onChange={(e) => {
         const parsedValue = parseFloat(e.target.value);

@@ -20,11 +20,13 @@ export function TextEditor({
   onChange,
   size,
   disabled,
+  id,
 }: EditorProps<ValueMetadata, TextValue>) {
   const currentValue = value ? value : { value: "" };
 
   return (
     <Input
+      id={id}
       value={currentValue.value}
       onChange={(e) => onChange({ value: e.target.value })}
       size={size}

@@ -21,6 +21,7 @@ export function ToggleEditor({
   commit,
   disabled,
   size,
+  id,
 }: EditorProps<ValueMetadata, BooleanValue>) {
   const currentValue = value ?? { value: false };
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -31,6 +32,7 @@ export function ToggleEditor({
 
   return (
     <ToggleSwitch
+      id={id}
       checked={currentValue.value}
       onChange={handleChange}
       disabled={disabled}

@@ -63,6 +63,7 @@ export function PropertyRecordEditor({
         onClick={onClick}
         disabled={propertyRecord.isDisabled || propertyRecord.isReadonly}
         size={size}
+        id={propertyRecord.property.name}
       />
     );
   }
@@ -86,6 +87,7 @@ function CommittingEditor({
   onClick,
   disabled,
   size,
+  id,
 }: {
   metadata: ValueMetadata;
   initialValue?: Value;
@@ -94,6 +96,7 @@ function CommittingEditor({
   onClick?: () => void;
   disabled?: boolean;
   size?: "small" | "large";
+  id?: string;
 }) {
   const { value, onChange, onKeydown, commit, cancel } = useCommittableValue({
     initialValue,
@@ -116,6 +119,7 @@ function CommittingEditor({
         cancel={cancel}
         disabled={disabled}
         size={size}
+        id={id}
       />
     </div>
   );

@@ -48,6 +48,7 @@ function ColorEditor({
   onChange,
   commit,
   size,
+  id,
 }: EditorProps<OldEditorMetadata, NumericValue>) {
   const colorParams = useColorEditorParams(metadata);
   const colors = colorParams?.colorValues ?? [];
@@ -81,7 +82,7 @@ function ColorEditor({
         }
       }}
     >
-      <IconButton size={size}>
+      <IconButton id={id} size={size}>
         <ColorSwatch color={activeColor} />
       </IconButton>
     </Popover>

@@ -51,6 +51,7 @@ export function CustomNumberEditor({
   size,
   disabled,
   decoration,
+  id,
 }: CustomNumberEditorProps) {
   const formatParams = useCustomFormattedNumberParams(metadata);
   const sizeParams = useInputEditorSizeParams(metadata);
@@ -101,6 +102,7 @@ export function CustomNumberEditor({
         <InputWithDecorations.Icon>{icon}</InputWithDecorations.Icon>
       ) : null}
       <InputWithDecorations.Input
+        id={id}
         ref={inputRef}
         style={style}
         disabled={disabled}

@@ -39,6 +39,7 @@ function EnumButtonGroupEditor({
   size,
   disabled,
   metadata,
+  id,
 }: EditorProps<OldEditorMetadata, EnumValue>) {
   const enumMetadata = useEnumMetadata(metadata);
   const buttonGroupParams = useButtonGroupEditorParams(metadata);
@@ -53,7 +54,7 @@ function EnumButtonGroupEditor({
   const currentValue = value ? value : { choice: firstChoice?.value ?? "" };
 
   return (
-    <ButtonGroup orientation="horizontal">
+    <ButtonGroup id={id} orientation="horizontal">
       {enumMetadata.choices.map((choice) => {
         const icon = findIcon(enumIcons?.get(choice.value));
         return (

@@ -35,6 +35,7 @@ function NumericInputEditor({
   onChange,
   size,
   disabled,
+  id,
 }: EditorProps<OldEditorMetadata, NumericValue>) {
   const sizeParams = useInputEditorSizeParams(metadata);
   const rangeParams = useRangeEditorParams(metadata);
@@ -67,7 +68,13 @@ function NumericInputEditor({
   });
 
   return (
-    <Input style={style} size={size} disabled={disabled} {...inputProps} />
+    <Input
+      id={id}
+      style={style}
+      size={size}
+      disabled={disabled}
+      {...inputProps}
+    />
   );
 }