diff --git a/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts b/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts
index 683ae1126..ae714de96 100644
--- a/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts
+++ b/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts
@@ -8,22 +8,16 @@ const meta: Meta = {
   id: 'uui-ref-node-data-type',
   component: 'uui-ref-node-data-type',
   title: 'Displays/References/Data Type',
-  args: {
-    name: 'TextField',
-    alias: 'Umbraco.TextField',
-  },
-  render: args =>
-    html`<uui-ref-node-data-type ${spread(args)}
-      >${renderSlots(args)}</uui-ref-node-data-type
-    >`,
+  args: { name: 'TextField', alias: 'Umbraco.TextField' },
+  render: args => html`
+    <uui-ref-node-data-type ${spread(args)}>
+      ${renderSlots(args)}
+    </uui-ref-node-data-type>
+  `,
   decorators: [
     (Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
   ],
-  parameters: {
-    readme: {
-      markdown: readme,
-    },
-  },
+  parameters: { readme: { markdown: readme } },
 };
 
 export default meta;
@@ -31,10 +25,13 @@ type Story = StoryObj;
 
 export const Default: Story = {
   args: {
-    'actions slot': html`<uui-action-bar slot="actions"
-      ><uui-button label="delete"
-        ><uui-icon name="delete"></uui-icon></uui-button
-    ></uui-action-bar>`,
+    'actions slot': html`
+      <uui-action-bar slot="actions">
+        <uui-button label="delete">
+          <uui-icon name="delete"></uui-icon>
+        </uui-button>
+      </uui-action-bar>
+    `,
   },
 };
 export const CustomIcon: Story = {
@@ -43,26 +40,24 @@ export const CustomIcon: Story = {
   },
 };
 
-export const Standalone: Story = {
-  args: {
-    standalone: true,
-  },
-};
+export const Standalone: Story = { args: { standalone: true } };
 
-export const Selectable: Story = {
-  args: {
-    selectable: true,
-  },
-};
+export const Selectable: Story = { args: { selectable: true } };
 
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
+export const Disabled: Story = { args: { disabled: true } };
 
-export const Readonly: Story = {
-  args: {
-    readonly: true,
-  },
+export const Readonly: Story = { args: { readonly: true } };
+
+export const Focus: Story = {
+  args: { id: 'refNode' },
+  decorators: [
+    (Story: any) => html`
+      <div style="max-width: 420px;">
+        ${Story()}
+        <button @click=${() => document.getElementById('refNode')?.focus()}>
+          Set focus
+        </button>
+      </div>
+    `,
+  ],
 };
diff --git a/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts b/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts
index 72484e59a..95d77b7d9 100644
--- a/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts
+++ b/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts
@@ -8,22 +8,17 @@ const meta: Meta = {
   id: 'uui-ref-node-document-type',
   component: 'uui-ref-node-document-type',
   title: 'Displays/References/Document Type',
-  args: {
-    name: 'Product Page',
-    alias: 'productPage',
-  },
-  render: args =>
-    html`<uui-ref-node-document-type ${spread(args)}
-      >${renderSlots(args)}</uui-ref-node-document-type
-    >`,
+  args: { name: 'Product Page', alias: 'productPage' },
+  render: args => html`
+    <uui-ref-node-document-type id="refNode" ${spread(args)}>
+      ${renderSlots(args)}
+    </uui-ref-node-document-type>
+  `,
+
   decorators: [
     (Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
   ],
-  parameters: {
-    readme: {
-      markdown: readme,
-    },
-  },
+  parameters: { readme: { markdown: readme } },
 };
 
 export default meta;
@@ -31,10 +26,13 @@ type Story = StoryObj;
 
 export const Default: Story = {
   args: {
-    'actions slot': html`<uui-action-bar slot="actions"
-      ><uui-button label="delete"
-        ><uui-icon name="delete"></uui-icon></uui-button
-    ></uui-action-bar>`,
+    'actions slot': html`
+      <uui-action-bar slot="actions">
+        <uui-button label="delete">
+          <uui-icon name="delete"></uui-icon>
+        </uui-button>
+      </uui-action-bar>
+    `,
   },
 };
 export const CustomIcon: Story = {
@@ -43,26 +41,24 @@ export const CustomIcon: Story = {
   },
 };
 
-export const Standalone: Story = {
-  args: {
-    standalone: true,
-  },
-};
+export const Standalone: Story = { args: { standalone: true } };
 
-export const Selectable: Story = {
-  args: {
-    selectable: true,
-  },
-};
+export const Selectable: Story = { args: { selectable: true } };
 
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
+export const Disabled: Story = { args: { disabled: true } };
 
-export const Readonly: Story = {
-  args: {
-    readonly: true,
-  },
+export const Readonly: Story = { args: { readonly: true } };
+
+export const Focus: Story = {
+  args: { id: 'refNode' },
+  decorators: [
+    (Story: any) => html`
+      <div style="max-width: 420px;">
+        ${Story()}
+        <button @click=${() => document.getElementById('refNode')?.focus()}>
+          Set focus
+        </button>
+      </div>
+    `,
+  ],
 };
diff --git a/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts b/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts
index ff15af6f3..ee1559502 100644
--- a/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts
+++ b/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts
@@ -12,18 +12,15 @@ const meta: Meta = {
     name: 'Newsletter Signup',
     detail: 'Accept and signup for newsletter',
   },
-  render: args =>
-    html`<uui-ref-node-form ${spread(args)}
-      >${renderSlots(args)}</uui-ref-node-form
-    >`,
+  render: args => html`
+    <uui-ref-node-form ${spread(args)}>
+      ${renderSlots(args)}
+    </uui-ref-node-form>
+  `,
   decorators: [
     (Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
   ],
-  parameters: {
-    readme: {
-      markdown: readme,
-    },
-  },
+  parameters: { readme: { markdown: readme } },
 };
 
 export default meta;
@@ -31,10 +28,12 @@ type Story = StoryObj;
 
 export const Default: Story = {
   args: {
-    'actions slot': html`<uui-action-bar slot="actions"
-      ><uui-button label="delete"
-        ><uui-icon name="delete"></uui-icon></uui-button
-    ></uui-action-bar>`,
+    'actions slot': html`
+      <uui-action-bar slot="actions">
+        <uui-button label="delete"
+          ><uui-icon name="delete"></uui-icon> </uui-button
+      ></uui-action-bar>
+    `,
   },
 };
 export const CustomIcon: Story = {
@@ -43,26 +42,24 @@ export const CustomIcon: Story = {
   },
 };
 
-export const Standalone: Story = {
-  args: {
-    standalone: true,
-  },
-};
+export const Standalone: Story = { args: { standalone: true } };
 
-export const Selectable: Story = {
-  args: {
-    selectable: true,
-  },
-};
+export const Selectable: Story = { args: { selectable: true } };
 
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
+export const Disabled: Story = { args: { disabled: true } };
 
-export const Readonly: Story = {
-  args: {
-    readonly: true,
-  },
+export const Readonly: Story = { args: { readonly: true } };
+
+export const Focus: Story = {
+  args: { id: 'refNode' },
+  decorators: [
+    (Story: any) => html`
+      <div style="max-width: 420px;">
+        ${Story()}
+        <button @click=${() => document.getElementById('refNode')?.focus()}>
+          Set focus
+        </button>
+      </div>
+    `,
+  ],
 };
diff --git a/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts b/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts
index c4ef963f4..243066814 100644
--- a/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts
+++ b/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts
@@ -8,10 +8,7 @@ const meta: Meta = {
   id: 'uui-ref-node-member',
   component: 'uui-ref-node-member',
   title: 'Displays/References/Member',
-  args: {
-    name: 'Arnold Vitz',
-    groupName: 'Visitor, Registered-Member',
-  },
+  args: { name: 'Arnold Vitz', groupName: 'Visitor, Registered-Member' },
   render: args =>
     html`<uui-ref-node-member ${spread(args)}
       >${renderSlots(args)}</uui-ref-node-member
@@ -19,11 +16,7 @@ const meta: Meta = {
   decorators: [
     (Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
   ],
-  parameters: {
-    readme: {
-      markdown: readme,
-    },
-  },
+  parameters: { readme: { markdown: readme } },
 };
 
 export default meta;
@@ -31,10 +24,13 @@ type Story = StoryObj;
 
 export const Default: Story = {
   args: {
-    'actions slot': html`<uui-action-bar slot="actions"
-      ><uui-button label="delete"
-        ><uui-icon name="delete"></uui-icon></uui-button
-    ></uui-action-bar>`,
+    'actions slot': html`
+      <uui-action-bar slot="actions">
+        <uui-button label="delete">
+          <uui-icon name="delete"></uui-icon>
+        </uui-button>
+      </uui-action-bar>
+    `,
   },
 };
 export const CustomIcon: Story = {
@@ -43,26 +39,24 @@ export const CustomIcon: Story = {
   },
 };
 
-export const Standalone: Story = {
-  args: {
-    standalone: true,
-  },
-};
+export const Standalone: Story = { args: { standalone: true } };
 
-export const Selectable: Story = {
-  args: {
-    selectable: true,
-  },
-};
+export const Selectable: Story = { args: { selectable: true } };
 
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
+export const Disabled: Story = { args: { disabled: true } };
 
-export const Readonly: Story = {
-  args: {
-    readonly: true,
-  },
+export const Readonly: Story = { args: { readonly: true } };
+
+export const Focus: Story = {
+  args: { id: 'refNode' },
+  decorators: [
+    (Story: any) => html`
+      <div style="max-width: 420px;">
+        ${Story()}
+        <button @click=${() => document.getElementById('refNode')?.focus()}>
+          Set focus
+        </button>
+      </div>
+    `,
+  ],
 };
diff --git a/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts b/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts
index 61e6194d8..27b7322ea 100644
--- a/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts
+++ b/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts
@@ -8,23 +8,16 @@ const meta: Meta = {
   id: 'uui-ref-node-package',
   component: 'uui-ref-node-package',
   title: 'Displays/References/Package',
-  args: {
-    name: 'Umbraco Starter Kit',
-    version: '1.1',
-    author: 'Umbraco HQ',
-  },
-  render: args =>
-    html`<uui-ref-node-package ${spread(args)}
-      >${renderSlots(args)}</uui-ref-node-package
-    >`,
+  args: { name: 'Umbraco Starter Kit', version: '1.1', author: 'Umbraco HQ' },
+  render: args => html`
+    <uui-ref-node-package ${spread(args)}>
+      ${renderSlots(args)}
+    </uui-ref-node-package>
+  `,
   decorators: [
     (Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
   ],
-  parameters: {
-    readme: {
-      markdown: readme,
-    },
-  },
+  parameters: { readme: { markdown: readme } },
 };
 
 export default meta;
@@ -32,10 +25,13 @@ type Story = StoryObj;
 
 export const Default: Story = {
   args: {
-    'actions slot': html`<uui-action-bar slot="actions"
-      ><uui-button label="delete"
-        ><uui-icon name="delete"></uui-icon></uui-button
-    ></uui-action-bar>`,
+    'actions slot': html`
+      <uui-action-bar slot="actions">
+        <uui-button label="delete">
+          <uui-icon name="delete"></uui-icon>
+        </uui-button>
+      </uui-action-bar>
+    `,
   },
 };
 export const CustomIcon: Story = {
@@ -44,26 +40,23 @@ export const CustomIcon: Story = {
   },
 };
 
-export const Standalone: Story = {
-  args: {
-    standalone: true,
-  },
-};
+export const Standalone: Story = { args: { standalone: true } };
 
-export const Selectable: Story = {
-  args: {
-    selectable: true,
-  },
-};
+export const Selectable: Story = { args: { selectable: true } };
 
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
+export const Disabled: Story = { args: { disabled: true } };
 
-export const Readonly: Story = {
-  args: {
-    readonly: true,
-  },
+export const Readonly: Story = { args: { readonly: true } };
+export const Focus: Story = {
+  args: { id: 'refNode' },
+  decorators: [
+    (Story: any) => html`
+      <div style="max-width: 420px;">
+        ${Story()}
+        <button @click=${() => document.getElementById('refNode')?.focus()}>
+          Set focus
+        </button>
+      </div>
+    `,
+  ],
 };
diff --git a/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts b/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts
index 729b92fe2..98323f391 100644
--- a/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts
+++ b/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts
@@ -8,22 +8,16 @@ const meta: Meta = {
   id: 'uui-ref-node-user',
   component: 'uui-ref-node-user',
   title: 'Displays/References/User',
-  args: {
-    name: 'Arnold Edits',
-    groupName: 'Editor, Translator',
-  },
-  render: args =>
-    html`<uui-ref-node-user ${spread(args)}
-      >${renderSlots(args)}</uui-ref-node-user
-    >`,
+  args: { name: 'Arnold Edits', groupName: 'Editor, Translator' },
+  render: args => html`
+    <uui-ref-node-user ${spread(args)}>
+      ${renderSlots(args)}
+    </uui-ref-node-user>
+  `,
   decorators: [
     (Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
   ],
-  parameters: {
-    readme: {
-      markdown: readme,
-    },
-  },
+  parameters: { readme: { markdown: readme } },
 };
 
 export default meta;
@@ -31,10 +25,13 @@ type Story = StoryObj;
 
 export const Default: Story = {
   args: {
-    'actions slot': html`<uui-action-bar slot="actions"
-      ><uui-button label="delete"
-        ><uui-icon name="delete"></uui-icon></uui-button
-    ></uui-action-bar>`,
+    'actions slot': html`
+      <uui-action-bar slot="actions">
+        <uui-button label="delete">
+          <uui-icon name="delete"></uui-icon>
+        </uui-button>
+      </uui-action-bar>
+    `,
   },
 };
 export const CustomIcon: Story = {
@@ -43,26 +40,24 @@ export const CustomIcon: Story = {
   },
 };
 
-export const Standalone: Story = {
-  args: {
-    standalone: true,
-  },
-};
+export const Standalone: Story = { args: { standalone: true } };
 
-export const Selectable: Story = {
-  args: {
-    selectable: true,
-  },
-};
+export const Selectable: Story = { args: { selectable: true } };
 
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
+export const Disabled: Story = { args: { disabled: true } };
 
-export const Readonly: Story = {
-  args: {
-    readonly: true,
-  },
+export const Readonly: Story = { args: { readonly: true } };
+
+export const Focus: Story = {
+  args: { id: 'refNode' },
+  decorators: [
+    (Story: any) => html`
+      <div style="max-width: 420px;">
+        ${Story()}
+        <button @click=${() => document.getElementById('refNode')?.focus()}>
+          Set focus
+        </button>
+      </div>
+    `,
+  ],
 };
diff --git a/packages/uui-ref-node/lib/uui-ref-node.element.ts b/packages/uui-ref-node/lib/uui-ref-node.element.ts
index 15d8c818a..05fb752f9 100644
--- a/packages/uui-ref-node/lib/uui-ref-node.element.ts
+++ b/packages/uui-ref-node/lib/uui-ref-node.element.ts
@@ -3,7 +3,7 @@ import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { UUIRefElement } from '@umbraco-ui/uui-ref/lib';
 import { css, html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 
 /**
  *  @element uui-ref-node
@@ -64,6 +64,9 @@ export class UUIRefNodeElement extends UUIRefElement {
   @property({ type: String })
   public rel?: string;
 
+  @query('#open-part')
+  protected _openPart?: HTMLInputElement;
+
   @state()
   private _iconSlotHasContent = false;
 
@@ -86,6 +89,11 @@ export class UUIRefNodeElement extends UUIRefElement {
     demandCustomElement(this, 'uui-icon');
   }
 
+  async focus() {
+    await this.updateComplete;
+    this._openPart?.focus();
+  }
+
   #onSlotIconChange(event: Event) {
     this._iconSlotHasContent =
       (event.target as HTMLSlotElement).assignedNodes({ flatten: true })
diff --git a/packages/uui-ref-node/lib/uui-ref-node.story.ts b/packages/uui-ref-node/lib/uui-ref-node.story.ts
index da35fad20..544d79379 100644
--- a/packages/uui-ref-node/lib/uui-ref-node.story.ts
+++ b/packages/uui-ref-node/lib/uui-ref-node.story.ts
@@ -13,20 +13,13 @@ const meta: Meta = {
   id: 'uui-ref-node',
   component: 'uui-ref-node',
   title: 'Displays/References/Node',
-  args: {
-    name: 'Rabbit Suit Product Page',
-    detail: 'path/to/nowhere',
-  },
+  args: { name: 'Rabbit Suit Product Page', detail: 'path/to/nowhere' },
   render: args =>
     html`<uui-ref-node ${spread(args)}>${renderSlots(args)}</uui-ref-node>`,
   decorators: [
     (Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
   ],
-  parameters: {
-    readme: {
-      markdown: readme,
-    },
-  },
+  parameters: { readme: { markdown: readme } },
 };
 
 export default meta;
@@ -34,13 +27,16 @@ type Story = StoryObj;
 
 export const Default: Story = {
   args: {
-    'tag slot': html`<uui-tag size="s" slot="tag" color="positive"
-      >Published</uui-tag
-    >`,
-    'actions slot': html`<uui-action-bar slot="actions"
-      ><uui-button label="delete"
-        ><uui-icon name="delete"></uui-icon></uui-button
-    ></uui-action-bar>`,
+    'tag slot': html`
+      <uui-tag size="s" slot="tag" color="positive">Published</uui-tag>
+    `,
+    'actions slot': html`
+      <uui-action-bar slot="actions">
+        <uui-button label="delete">
+          <uui-icon name="delete"></uui-icon>
+        </uui-button>
+      </uui-action-bar>
+    `,
   },
 };
 export const CustomIcon: Story = {
@@ -49,33 +45,28 @@ export const CustomIcon: Story = {
   },
 };
 
-export const Standalone: Story = {
-  args: {
-    standalone: true,
-  },
-};
+export const Standalone: Story = { args: { standalone: true } };
 
 export const Href: Story = {
-  args: {
-    href: 'https://umbraco.com',
-    target: '_blank',
-  },
+  args: { href: 'https://umbraco.com', target: '_blank' },
 };
 
-export const Selectable: Story = {
-  args: {
-    selectable: true,
-  },
-};
+export const Selectable: Story = { args: { selectable: true } };
 
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
+export const Disabled: Story = { args: { disabled: true } };
 
-export const Readonly: Story = {
-  args: {
-    readonly: true,
-  },
+export const Readonly: Story = { args: { readonly: true } };
+
+export const Focus: Story = {
+  args: { id: 'refNode' },
+  decorators: [
+    (Story: any) => html`
+      <div style="max-width: 420px;">
+        ${Story()}
+        <button @click=${() => document.getElementById('refNode')?.focus()}>
+          Set focus
+        </button>
+      </div>
+    `,
+  ],
 };