diff --git a/web/src/lib/api/lexicons/index.ts b/web/src/lib/api/lexicons/index.ts
index 2f9b36dc..f940142a 100644
--- a/web/src/lib/api/lexicons/index.ts
+++ b/web/src/lib/api/lexicons/index.ts
@@ -34,6 +34,7 @@ export * as ShTangledActorGetProfile from "./types/sh/tangled/actor/getProfile.j
 export * as ShTangledActorGetProfiles from "./types/sh/tangled/actor/getProfiles.js";
 export * as ShTangledActorGetTrending from "./types/sh/tangled/actor/getTrending.js";
 export * as ShTangledActorProfile from "./types/sh/tangled/actor/profile.js";
+export * as ShTangledActorSearchActorsTypeahead from "./types/sh/tangled/actor/searchActorsTypeahead.js";
 export * as ShTangledBobbinAwaitRecord from "./types/sh/tangled/bobbin/awaitRecord.js";
 export * as ShTangledCiCancelPipeline from "./types/sh/tangled/ci/cancelPipeline.js";
 export * as ShTangledCiDescribeWorkflowDefinition from "./types/sh/tangled/ci/describeWorkflowDefinition.js";
diff --git a/web/src/lib/api/lexicons/types/sh/tangled/actor/searchActorsTypeahead.ts b/web/src/lib/api/lexicons/types/sh/tangled/actor/searchActorsTypeahead.ts
new file mode 100644
index 00000000..bff3c56c
--- /dev/null
+++ b/web/src/lib/api/lexicons/types/sh/tangled/actor/searchActorsTypeahead.ts
@@ -0,0 +1,69 @@
+import type {} from "@atcute/lexicons";
+import * as v from "@atcute/lexicons/validations";
+import type {} from "@atcute/lexicons/ambient";
+
+const _actorSchema = /*#__PURE__*/ v.object({
+  $type: /*#__PURE__*/ v.optional(
+    /*#__PURE__*/ v.literal("sh.tangled.actor.searchActorsTypeahead#actor"),
+  ),
+  did: /*#__PURE__*/ v.didString(),
+  handle: /*#__PURE__*/ v.handleString(),
+  /**
+   * AT-URI for the actor's Tangled profile.
+   */
+  uri: /*#__PURE__*/ v.resourceUriString(),
+});
+const _mainSchema = /*#__PURE__*/ v.query(
+  "sh.tangled.actor.searchActorsTypeahead",
+  {
+    params: /*#__PURE__*/ v.object({
+      /**
+       * @minimum 1
+       * @maximum 100
+       * @default 10
+       */
+      limit: /*#__PURE__*/ v.optional(
+        /*#__PURE__*/ v.constrain(/*#__PURE__*/ v.integer(), [
+          /*#__PURE__*/ v.integerRange(1, 100),
+        ]),
+        10,
+      ),
+      /**
+       * The beginning of a handle. A leading \@ is optional.
+       * @minLength 1
+       * @maxLength 254
+       */
+      q: /*#__PURE__*/ v.constrain(/*#__PURE__*/ v.string(), [
+        /*#__PURE__*/ v.stringLength(1, 254),
+      ]),
+    }),
+    output: {
+      type: "lex",
+      schema: /*#__PURE__*/ v.object({
+        get actors() {
+          return /*#__PURE__*/ v.array(actorSchema);
+        },
+      }),
+    },
+  },
+);
+
+type actor$schematype = typeof _actorSchema;
+type main$schematype = typeof _mainSchema;
+
+export interface actorSchema extends actor$schematype {}
+export interface mainSchema extends main$schematype {}
+
+export const actorSchema = _actorSchema as actorSchema;
+export const mainSchema = _mainSchema as mainSchema;
+
+export interface Actor extends v.InferInput<typeof actorSchema> {}
+
+export interface $params extends v.InferInput<mainSchema["params"]> {}
+export interface $output extends v.InferXRPCBodyInput<mainSchema["output"]> {}
+
+declare module "@atcute/lexicons/ambient" {
+  interface XRPCQueries {
+    "sh.tangled.actor.searchActorsTypeahead": mainSchema;
+  }
+}
diff --git a/web/src/lib/api/search.ts b/web/src/lib/api/search.ts
index dfca7a00..b41b0c7b 100644
--- a/web/src/lib/api/search.ts
+++ b/web/src/lib/api/search.ts
@@ -1,3 +1,4 @@
+import type * as ShTangledActorSearchActorsTypeahead from "./lexicons/types/sh/tangled/actor/searchActorsTypeahead";
 import type { BobbinContext, XrpcRequestInit } from "./client";
 import { jsonGet } from "./_request";
 import { paginateBy } from "./pagination";
@@ -31,6 +32,20 @@ export interface SearchParams {
 export const search = (ctx: BobbinContext, params: SearchParams, init?: XrpcRequestInit) =>
 	jsonGet<SearchPage>(ctx, "sh.tangled.search.query", { ...params }, init);
 
+export type ActorSuggestion = ShTangledActorSearchActorsTypeahead.Actor;
+
+export const searchActorsTypeahead = (
+	ctx: BobbinContext,
+	params: ShTangledActorSearchActorsTypeahead.$params,
+	init?: XrpcRequestInit
+) =>
+	jsonGet<ShTangledActorSearchActorsTypeahead.$output>(
+		ctx,
+		"sh.tangled.actor.searchActorsTypeahead",
+		params,
+		init
+	);
+
 export interface SearchAllOptions extends XrpcRequestInit {
 	maxPages?: number;
 }
diff --git a/web/src/lib/components/ui/ActorInput.svelte b/web/src/lib/components/ui/ActorInput.svelte
new file mode 100644
index 00000000..7ed62576
--- /dev/null
+++ b/web/src/lib/components/ui/ActorInput.svelte
@@ -0,0 +1,242 @@
+<script lang="ts">
+	import { createBobbinClient } from "$lib/api/client";
+	import { searchActorsTypeahead, type ActorSuggestion } from "$lib/api/search";
+	import { onDestroy, type ComponentProps } from "svelte";
+	import Input from "./Input.svelte";
+	import { tagInput } from "./TagInput.svelte";
+
+	type InputProps = ComponentProps<typeof Input>;
+	type Props = Omit<
+		InputProps,
+		| "value"
+		| "loading"
+		| "rich"
+		| "tags"
+		| "maxTags"
+		| "commitOn"
+		| "allowDuplicates"
+		| "validate"
+		| "suggestions"
+		| "onSearch"
+		| "onAdd"
+		| "onRemove"
+		| "hint"
+		| "emptyLabel"
+		| "panelClass"
+		| "tag"
+		| "suggestion"
+		| "size"
+	> & {
+		bobbinUrl: string;
+		value?: string;
+		selected?: ActorSuggestion;
+		onSelect?: (actor: ActorSuggestion) => void;
+		loading?: boolean;
+		size?: InputProps["size"];
+		panelClass?: string;
+	};
+
+	let {
+		bobbinUrl,
+		value = $bindable(""),
+		selected = $bindable(),
+		onSelect,
+		loading: inputLoading = false,
+		size = "regular",
+		panelClass,
+		autocomplete = "off",
+		spellcheck = false,
+		element = $bindable(),
+		oninput,
+		onkeydown,
+		onfocus,
+		...inputProps
+	}: Props = $props();
+
+	const bobbin = $derived(createBobbinClient({ serviceUrl: bobbinUrl }));
+	const resultListId = $props.id();
+	const anchorName = `--actor-input-${resultListId.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+	const slots = $derived(tagInput({ size }));
+
+	let actors = $state<ActorSuggestion[]>([]);
+	let activeIndex = $state(-1);
+	let open = $state(false);
+	let status = $state<"idle" | "loading" | "ready" | "failed">("idle");
+	let timer: ReturnType<typeof setTimeout> | undefined;
+	let request: AbortController | undefined;
+	let panelEl = $state<HTMLElement>();
+
+	const showResults = $derived(open && value.trim() !== "" && status !== "idle");
+
+	const loadActors = async (query: string) => {
+		const controller = new AbortController();
+		request = controller;
+		try {
+			const result = await searchActorsTypeahead(
+				bobbin,
+				{ q: query, limit: 8 },
+				{ signal: controller.signal }
+			);
+			if (controller.signal.aborted) return;
+			actors = result.actors;
+			status = "ready";
+		} catch {
+			if (controller.signal.aborted) return;
+			actors = [];
+			status = "failed";
+		}
+	};
+
+	const handleInput: NonNullable<InputProps["oninput"]> = (event) => {
+		value = event.currentTarget.value;
+		if (selected !== undefined) selected = undefined;
+		if (timer !== undefined) clearTimeout(timer);
+		request?.abort();
+		actors = [];
+		activeIndex = -1;
+		status = "idle";
+
+		const query = value.trim();
+		if (query === "") {
+			open = false;
+		} else {
+			open = true;
+			status = "loading";
+			timer = setTimeout(() => void loadActors(query), 150);
+		}
+		oninput?.(event);
+	};
+
+	const selectActor = (actor: ActorSuggestion) => {
+		value = actor.handle;
+		selected = actor;
+		open = false;
+		onSelect?.(actor);
+	};
+
+	const handleKeydown: NonNullable<InputProps["onkeydown"]> = (event) => {
+		switch (event.key) {
+			case "ArrowDown":
+				if (actors.length === 0) break;
+				event.preventDefault();
+				open = true;
+				activeIndex = activeIndex < actors.length - 1 ? activeIndex + 1 : 0;
+				break;
+			case "ArrowUp":
+				if (actors.length === 0) break;
+				event.preventDefault();
+				open = true;
+				activeIndex = activeIndex > 0 ? activeIndex - 1 : actors.length - 1;
+				break;
+			case "Enter": {
+				const actor = actors[activeIndex];
+				if (open && actor) {
+					event.preventDefault();
+					selectActor(actor);
+				}
+				break;
+			}
+			case "Escape":
+				open = false;
+				activeIndex = -1;
+				break;
+		}
+		onkeydown?.(event);
+	};
+
+	const handleFocus: NonNullable<InputProps["onfocus"]> = (event) => {
+		if (value.trim() !== "") open = true;
+		onfocus?.(event);
+	};
+
+	$effect(() => {
+		if (selected !== undefined && selected.handle !== value) selected = undefined;
+	});
+
+	$effect(() => {
+		const panel = panelEl;
+		if (!panel) return;
+		const shown = panel.matches(":popover-open");
+		if (showResults && !shown) panel.showPopover();
+		else if (!showResults && shown) panel.hidePopover();
+	});
+
+	const closeWhenLeaving = (event: FocusEvent) => {
+		const root = event.currentTarget as HTMLDivElement;
+		if (!(event.relatedTarget instanceof Node) || !root.contains(event.relatedTarget)) {
+			open = false;
+		}
+	};
+
+	onDestroy(() => {
+		if (timer !== undefined) clearTimeout(timer);
+		request?.abort();
+	});
+</script>
+
+<div class="relative" onfocusout={closeWhenLeaving} style="anchor-name: {anchorName}">
+	<Input
+		{...inputProps}
+		bind:element
+		{value}
+		{size}
+		loading={inputLoading || status === "loading"}
+		oninput={handleInput}
+		onkeydown={handleKeydown}
+		onfocus={handleFocus}
+		{autocomplete}
+		{spellcheck}
+		role="combobox"
+		aria-autocomplete="list"
+		aria-expanded={showResults}
+		aria-controls={resultListId}
+		aria-activedescendant={activeIndex >= 0 ? `${resultListId}-${activeIndex}` : undefined}
+	/>
+
+	<div
+		bind:this={panelEl}
+		popover="manual"
+		style="position-anchor: {anchorName}"
+		class={slots.panel({
+			class: ["actor-input-panel", "shadow-regular dark:shadow-none", panelClass]
+		})}
+	>
+		<div id={resultListId} role="listbox" aria-label="Actors" class={slots.options()}>
+			{#if actors.length > 0}
+				{#each actors as actor, index (actor.did)}
+					<button
+						id={`${resultListId}-${index}`}
+						type="button"
+						role="option"
+						tabindex={-1}
+						aria-selected={index === activeIndex}
+						class={slots.option()}
+						data-active={index === activeIndex || undefined}
+						onpointerdown={(event) => event.preventDefault()}
+						onpointermove={() => (activeIndex = index)}
+						onclick={() => selectActor(actor)}
+					>
+						<span class={slots.optionLabel()}>{actor.handle}</span>
+					</button>
+				{/each}
+			{:else if status === "loading"}
+				<p class={slots.empty()}>Searching…</p>
+			{:else if status === "failed"}
+				<p class={slots.empty()}>Couldn’t load actors</p>
+			{:else}
+				<p class={slots.empty()}>No actors found</p>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+	@supports (position-area: bottom) and (position-try: flip-block) {
+		.actor-input-panel {
+			margin-top: 0.25rem;
+			position-area: block-end span-inline-end;
+			position-try: flip-block;
+			width: anchor-size(width);
+		}
+	}
+</style>
diff --git a/web/src/routes/[handle]/[repo]/settings/access/new/+page.svelte b/web/src/routes/[handle]/[repo]/settings/access/new/+page.svelte
index 95690b14..d6ad2e45 100644
--- a/web/src/routes/[handle]/[repo]/settings/access/new/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/access/new/+page.svelte
@@ -2,7 +2,7 @@
 	import { goto } from "$app/navigation";
 	import { resolve } from "$app/paths";
 	import Button from "$lib/components/ui/Button.svelte";
-	import Input from "$lib/components/ui/Input.svelte";
+	import ActorInput from "$lib/components/ui/ActorInput.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
 	import Bones from "$lib/components/ui/Bones.svelte";
 	import settingsSettingspanelContentSkeletonFixture from "$lib/bones/settings-settingspanel--content-skeleton-fixture.bones.json";
@@ -13,10 +13,11 @@
 	import Plus from "$icon/plus";
 	import X from "$icon/x";
 
+	import type { ActorSuggestion } from "$lib/api/search";
 	let { data } = $props();
 
-	let user = $state("");
-	const valid = $derived(user.trim().length > 0);
+	let actor = $state<ActorSuggestion>();
+	const valid = $derived(actor !== undefined);
 
 	// mocked — collaborator management is not wired up yet
 	const submit = () => {
@@ -41,7 +42,12 @@
 	>
 		<SettingsList padding="small">
 			<FormRow label="User" for="collaborator">
-				<Input id="collaborator" bind:value={user} placeholder="user.tngl.sh" />
+				<ActorInput
+					id="collaborator"
+					bobbinUrl={data.publicConfig.bobbinUrl}
+					bind:selected={actor}
+					placeholder="user.tngl.sh"
+				/>
 			</FormRow>
 		</SettingsList>
 
diff --git a/web/src/routes/login/+page.svelte b/web/src/routes/login/+page.svelte
index ca0bceff..0d83210e 100644
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -5,10 +5,12 @@
 	import { getAuth } from "$lib/auth.svelte";
 	import { createAction } from "$lib/action.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
+	import ActorInput from "$lib/components/ui/ActorInput.svelte";
 	import CircleAlert from "$icon/circle-alert";
 	import { onMount } from "svelte";
 	import { SvelteURL } from "svelte/reactivity";
 
+	let { data } = $props();
 	const appPath = (path: string) => resolve(path as "/");
 	const auth = getAuth();
 	const returnTo = $derived(page.url.searchParams.get("return_url") ?? "/");
@@ -55,8 +57,9 @@
 			<label for="identifier" class="py-2 typography-paragraph-small text-foreground-default"
 				>Handle</label
 			>
-			<input
+			<ActorInput
 				id="identifier"
+				bobbinUrl={data.publicConfig.bobbinUrl}
 				bind:value={identifier}
 				disabled={login.loading}
 				type="text"
@@ -66,7 +69,8 @@
 				inputmode="url"
 				required
 				placeholder="akshay.tngl.sh"
-				class="w-full rounded-sm border border-border-default bg-background-default p-2 typography-paragraph-large text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
+				size="large"
+				class="w-full"
 			/>
 			<p class="mt-1 typography-paragraph-small text-foreground-subtle">
 				Use your <span class="text-foreground-default">AT Protocol</span> handle to log in.