diff --git a/web/src/lib/components/repo/RefSelector.stories.svelte b/web/src/lib/components/repo/RefSelector.stories.svelte
index ac18f8f3..f0a44361 100644
--- a/web/src/lib/components/repo/RefSelector.stories.svelte
+++ b/web/src/lib/components/repo/RefSelector.stories.svelte
@@ -11,7 +11,8 @@
 			repoName: "tangled",
 			current: "main",
 			branches: ["main", "feature/storybook"],
-			tags: ["v1.0.0", "v0.9.0"]
+			tags: ["v1.0.0", "v0.9.0"],
+			defaultBranch: "main"
 		}
 	});
 </script>
diff --git a/web/src/lib/components/repo/RefSelector.svelte b/web/src/lib/components/repo/RefSelector.svelte
index 42a51330..b2c0eef7 100644
--- a/web/src/lib/components/repo/RefSelector.svelte
+++ b/web/src/lib/components/repo/RefSelector.svelte
@@ -3,6 +3,7 @@
 	import { resolve } from "$app/paths";
 	import GitCompare from "$icon/git-compare";
 	import Select from "$lib/components/ui/Select.svelte";
+	import type { SelectOption } from "$lib/components/ui/selectField";
 
 	interface Props {
 		ownerHandle: string;
@@ -10,14 +11,27 @@
 		current: string;
 		branches: string[];
 		tags: string[];
+		defaultBranch?: string;
 	}
 
-	let { ownerHandle, repoName, current, branches, tags }: Props = $props();
+	let { ownerHandle, repoName, current, branches, tags, defaultBranch }: Props = $props();
 
 	const base = $derived(`/${ownerHandle}/${repoName}`);
 
-	const onchange = (event: Event) => {
-		const value = (event.currentTarget as HTMLSelectElement).value;
+	// no counts in the headings: the knot caps how many refs it hands back, so the length here
+	// is the loaded count rather than the repo's total, and it would not track the filter either
+	const options = $derived<SelectOption[]>([
+		...branches.map((branch) => ({
+			value: branch,
+			hint: branch === defaultBranch ? "default" : undefined,
+			group: "Branches"
+		})),
+		...(tags.length > 0
+			? tags.map((tag) => ({ value: tag, group: "Tags" }))
+			: [{ value: "No tags found", disabled: true, group: "Tags" }])
+	]);
+
+	const onSelect = (value: string) => {
 		if (value === current) return;
 		void goto(resolve(`${base}/tree/${encodeURIComponent(value)}` as "/"));
 	};
@@ -26,23 +40,21 @@
 <div class="flex min-w-0 flex-1 items-stretch gap-2">
 	<div class="max-w-32 sm:max-w-64">
 		<!-- the ref lives in the url so navigation updates it, no two way binding -->
-		<Select value={current} {onchange} aria-label="Switch branch or tag">
-			<!-- a commit sha or a ref past the knot's cap still needs a label -->
-			{#if !branches.includes(current) && !tags.includes(current)}
-				<option value={current}>{current}</option>
-			{/if}
-			<optgroup label={`Branches (${branches.length})`}>
-				{#each branches as branch (branch)}
-					<option value={branch}>{branch}</option>
-				{/each}
-			</optgroup>
-			<optgroup label={`Tags (${tags.length})`}>
-				{#each tags as tag (tag)}
-					<option value={tag}>{tag}</option>
-				{:else}
-					<option disabled>No tags found</option>
-				{/each}
-			</optgroup>
+		<Select
+			rich
+			{options}
+			value={current}
+			{onSelect}
+			label="Switch branch or tag"
+			searchPlaceholder="Find a branch or tag…"
+			emptyLabel="No branch or tag matches"
+		>
+			{#snippet footer()}
+				<div class="flex items-center gap-4 px-2 py-1.5">
+					<a href={resolve(`${base}/branches` as "/")} class="text-sm"> View all branches </a>
+					<a href={resolve(`${base}/tags` as "/")} class="text-sm">View all tags</a>
+				</div>
+			{/snippet}
 		</Select>
 	</div>
 	<a
diff --git a/web/src/lib/components/repo/RepoToolbar.svelte b/web/src/lib/components/repo/RepoToolbar.svelte
index 1b863576..000c26e2 100644
--- a/web/src/lib/components/repo/RepoToolbar.svelte
+++ b/web/src/lib/components/repo/RepoToolbar.svelte
@@ -32,6 +32,7 @@
 		current={ref}
 		branches={refs.branches}
 		tags={refs.tags}
+		defaultBranch={repo.defaultBranch}
 	/>
 
 	<form
diff --git a/web/src/lib/components/settings/tabs/ProfileTab.svelte b/web/src/lib/components/settings/tabs/ProfileTab.svelte
index 872dd382..91c2c50d 100644
--- a/web/src/lib/components/settings/tabs/ProfileTab.svelte
+++ b/web/src/lib/components/settings/tabs/ProfileTab.svelte
@@ -85,12 +85,12 @@
 		<SettingsRow title="Vanity stats" align="start" stack>
 			<div class="flex w-full flex-col gap-2 sm:w-80">
 				{#each form.stats.keys() as i (i)}
-					<Select bind:value={form.stats[i]} aria-label="Vanity stat {i + 1}">
-						<option value="">Choose stat</option>
-						{#each STATS as stat (stat)}
-							<option value={stat}>{stat}</option>
-						{/each}
-					</Select>
+					<Select
+						bind:value={form.stats[i]}
+						options={STATS.map((stat) => ({ value: stat }))}
+						placeholder="Choose stat"
+						label="Vanity stat {i + 1}"
+					/>
 				{/each}
 			</div>
 		</SettingsRow>
diff --git a/web/src/lib/components/ui/Combobox.svelte b/web/src/lib/components/ui/Combobox.svelte
new file mode 100644
index 00000000..cd8f1f41
--- /dev/null
+++ b/web/src/lib/components/ui/Combobox.svelte
@@ -0,0 +1,382 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	// the box, its border and its state colours come from selectField, shared with the native
+	// rendering so flipping `rich` on a Select cannot change how the field looks
+	export const combobox = tv({
+		slots: {
+			root: "relative inline-block w-full",
+			trigger: "flex min-h-9 cursor-pointer items-center gap-2 px-2 py-1",
+			value: "min-w-0 flex-1 truncate text-left",
+			panel:
+				"combobox-panel fixed z-50 m-0 flex max-h-[min(24rem,calc(100dvh-1rem))] w-72 max-w-[calc(100vw-1rem)] flex-col overflow-hidden rounded-sm border border-border-default bg-background-default p-0 text-sm text-foreground-default shadow-regular",
+			search: "shrink-0 border-b border-border-default p-2",
+			list: "min-h-0 flex-1 overflow-y-auto p-1",
+			groupHeading:
+				"px-2 pt-2 pb-1 typography-paragraph-small font-bold text-foreground-muted first:pt-1",
+			option:
+				"flex w-full cursor-pointer items-center gap-2 rounded-sm bg-transparent px-2 py-1.5 text-left aria-disabled:cursor-not-allowed aria-disabled:text-foreground-disabled data-active:bg-background-subtle dark:data-active:bg-[rgb(55_65_81/0.5)]",
+			check: "size-4 shrink-0 text-foreground-default",
+			optionLabel: "min-w-0 flex-1 truncate",
+			hint: "shrink-0 typography-paragraph-small text-foreground-muted",
+			empty: "px-2 py-6 text-center text-foreground-muted",
+			footer: "shrink-0 border-t border-border-default"
+		},
+		variants: {
+			placeholder: {
+				true: { value: "text-foreground-placeholder" }
+			}
+		}
+	});
+
+	export type ComboboxVariants = VariantProps<typeof combobox>;
+</script>
+
+<script lang="ts">
+	import Check from "$icon/check";
+	import ChevronsUpDown from "$icon/chevrons-up-down";
+	import Search from "$icon/search";
+	import type { Snippet } from "svelte";
+	import { tick } from "svelte";
+	import Input from "./Input.svelte";
+	import { selectField, type SelectAlign, type SelectOption } from "./selectField";
+
+	interface Props {
+		options: SelectOption[];
+		/** two-way; the selected option's value. Pass without `bind:` when the truth lives
+		 *  elsewhere — a ref in the url, say — and let `onSelect` do the navigating. */
+		value?: string;
+		onSelect?: (value: string) => void;
+		/** trigger text while nothing is selected */
+		placeholder?: string;
+		searchPlaceholder?: string;
+		emptyLabel?: string;
+		/** names the trigger and the listbox for screen readers */
+		label?: string;
+		/** take filtering over, e.g. to query a server: `options` is then rendered as given */
+		onSearch?: (query: string) => void;
+		loading?: boolean;
+		error?: boolean;
+		disabled?: boolean;
+		align?: SelectAlign;
+		/** goes on the trigger, so a Field's label can point at it */
+		id?: string;
+		class?: string;
+		panelClass?: string;
+		/** pinned below the list, e.g. a "view all branches" link */
+		footer?: Snippet;
+	}
+
+	let {
+		options,
+		value = $bindable(""),
+		onSelect,
+		placeholder = "Select an option",
+		searchPlaceholder = "Filter…",
+		emptyLabel = "No matches",
+		label,
+		onSearch,
+		loading = false,
+		error = false,
+		disabled = false,
+		align = "left",
+		id,
+		class: className,
+		panelClass,
+		footer
+	}: Props = $props();
+
+	const panelId = $props.id();
+	const listId = `${panelId}-list`;
+	const optionId = (index: number) => `${panelId}-option-${index}`;
+	// anchor-name has to be a custom ident and unique per instance, so it cannot live in the
+	// stylesheet. the invoker is the implicit anchor in principle, but naming it explicitly is
+	// what actually holds: with only the implicit one the panel lands in the viewport's corner.
+	const anchorName = `--combobox-${panelId.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+
+	let open = $state(false);
+	let search = $state("");
+	let activeIndex = $state(-1);
+	// only keyboard navigation scrolls the list: doing it on hover yanks the row out from
+	// under the pointer
+	let scrollActiveIntoView = false;
+
+	let triggerEl = $state<HTMLButtonElement>();
+	let panelEl = $state<HTMLElement>();
+	let searchEl = $state<HTMLInputElement>();
+	let listEl = $state<HTMLElement>();
+
+	const query = $derived(search.trim().toLowerCase());
+	const visible = $derived(
+		onSearch || query === ""
+			? options
+			: options.filter(
+					(option) =>
+						(option.label ?? option.value).toLowerCase().includes(query) ||
+						option.value.toLowerCase().includes(query)
+				)
+	);
+
+	// a heading per run of same-group options, so grouping falls out of the array's order
+	// instead of needing a nested shape
+	const rows = $derived(
+		visible.map((option, index) => ({
+			option,
+			index,
+			heading: option.group !== visible[index - 1]?.group ? option.group : undefined
+		}))
+	);
+
+	const selectable = $derived(
+		visible.reduce<number[]>((indexes, option, index) => {
+			if (!option.disabled) indexes.push(index);
+			return indexes;
+		}, [])
+	);
+
+	const selected = $derived(options.find((option) => option.value === value));
+	// a value with no matching option still deserves a label: the ref selector can be sitting
+	// on a commit sha, or on a branch past the point the list was capped
+	const triggerLabel = $derived(selected ? (selected.label ?? selected.value) : value);
+
+	const classes = $derived(combobox({ placeholder: triggerLabel === "" || undefined }));
+	const field = $derived(selectField({ error, disabled }));
+
+	const setActive = (index: number, fromKeyboard: boolean) => {
+		activeIndex = index;
+		scrollActiveIntoView = fromKeyboard;
+	};
+
+	const move = (delta: number) => {
+		if (selectable.length === 0) return;
+		const current = selectable.indexOf(activeIndex);
+		// from nowhere, ArrowDown lands on the first option and ArrowUp on the last
+		const next =
+			current === -1
+				? delta > 0
+					? 0
+					: selectable.length - 1
+				: (((current + delta) % selectable.length) + selectable.length) % selectable.length;
+		setActive(selectable[next], true);
+	};
+
+	const close = () => {
+		if (open) panelEl?.hidePopover();
+	};
+
+	const select = (option: SelectOption) => {
+		if (option.disabled) return;
+		value = option.value;
+		onSelect?.(option.value);
+		close();
+		triggerEl?.focus();
+	};
+
+	const onToggle = (event: Event) => {
+		const { newState } = event as ToggleEvent;
+		open = newState === "open";
+		if (!open) return;
+
+		// every open starts from a clean slate, with the current selection under the cursor
+		search = "";
+		onSearch?.("");
+		const selectedIndex = options.findIndex((option) => option.value === value);
+		setActive(selectable.includes(selectedIndex) ? selectedIndex : (selectable[0] ?? -1), true);
+		void tick().then(() => searchEl?.focus());
+	};
+
+	const onTriggerKeydown = (event: KeyboardEvent) => {
+		if (!open && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+			event.preventDefault();
+			triggerEl?.click();
+		}
+	};
+
+	const onSearchInput = (event: Event) => {
+		search = (event.currentTarget as HTMLInputElement).value;
+		onSearch?.(search.trim());
+		// the old active row is gone or has moved: start over at the top of what is left
+		setActive(selectable[0] ?? -1, true);
+	};
+
+	const onSearchKeydown = (event: KeyboardEvent) => {
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				move(1);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				move(-1);
+				break;
+			case "Home":
+				event.preventDefault();
+				if (selectable.length > 0) setActive(selectable[0], true);
+				break;
+			case "End":
+				event.preventDefault();
+				if (selectable.length > 0) setActive(selectable[selectable.length - 1], true);
+				break;
+			case "Enter": {
+				// a bare Enter in a form would submit it, whether or not a row is active
+				event.preventDefault();
+				const option = visible[activeIndex];
+				if (option) select(option);
+				break;
+			}
+			case "Escape":
+				event.preventDefault();
+				close();
+				triggerEl?.focus();
+				break;
+			case "Tab":
+				close();
+				break;
+		}
+	};
+
+	$effect(() => {
+		if (!open || !scrollActiveIntoView || activeIndex < 0) return;
+		listEl?.querySelector(`#${CSS.escape(optionId(activeIndex))}`)?.scrollIntoView({
+			block: "nearest"
+		});
+	});
+</script>
+
+<div class={classes.root({ class: className })}>
+	<button
+		bind:this={triggerEl}
+		{id}
+		type="button"
+		{disabled}
+		class={field.box({ class: classes.trigger() })}
+		popovertarget={panelId}
+		popovertargetaction="toggle"
+		onkeydown={onTriggerKeydown}
+		aria-haspopup="listbox"
+		aria-expanded={open}
+		aria-controls={panelId}
+		aria-label={label}
+		style="anchor-name: {anchorName}"
+	>
+		<span class={classes.value()}>{triggerLabel === "" ? placeholder : triggerLabel}</span>
+		<ChevronsUpDown class={field.chevron({ class: "size-3.5" })} aria-hidden="true" />
+	</button>
+
+	<div
+		bind:this={panelEl}
+		id={panelId}
+		data-align={align}
+		popover="auto"
+		ontoggle={onToggle}
+		style="position-anchor: {anchorName}"
+		class={classes.panel({ class: panelClass })}
+	>
+		<div class={classes.search()}>
+			<Input
+				bind:element={searchEl}
+				type="text"
+				value={search}
+				oninput={onSearchInput}
+				onkeydown={onSearchKeydown}
+				placeholder={searchPlaceholder}
+				iconLeft={Search}
+				{loading}
+				autocomplete="off"
+				spellcheck="false"
+				role="combobox"
+				aria-expanded="true"
+				aria-controls={listId}
+				aria-activedescendant={activeIndex >= 0 ? optionId(activeIndex) : undefined}
+				aria-label={label ? `${label} filter` : "Filter options"}
+			/>
+		</div>
+
+		<div bind:this={listEl} id={listId} role="listbox" aria-label={label} class={classes.list()}>
+			{#each rows as { option, index, heading } (option.value)}
+				{#if heading}
+					<div class={classes.groupHeading()}>{heading}</div>
+				{/if}
+				<button
+					id={optionId(index)}
+					type="button"
+					role="option"
+					tabindex={-1}
+					class={classes.option()}
+					data-active={index === activeIndex || undefined}
+					aria-selected={option.value === value}
+					aria-disabled={option.disabled}
+					onclick={() => select(option)}
+					onpointermove={() => {
+						if (!option.disabled && index !== activeIndex) setActive(index, false);
+					}}
+				>
+					{#if option.value === value}
+						<Check class={classes.check()} aria-hidden="true" />
+					{:else}
+						<span class="size-4 shrink-0" aria-hidden="true"></span>
+					{/if}
+					<span class={classes.optionLabel()}>{option.label ?? option.value}</span>
+					{#if option.hint}
+						<span class={classes.hint()}>{option.hint}</span>
+					{/if}
+				</button>
+			{:else}
+				<p class={classes.empty()}>{emptyLabel}</p>
+			{/each}
+		</div>
+
+		{#if footer}
+			<div class={classes.footer()}>{@render footer()}</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	/* anchor positioning went Baseline in early 2026; without it the popover falls back to the
+	   UA's centred position, the same trade-off Dropdown already takes. the trigger is the
+	   implicit anchor because it invoked the popover through popovertarget. */
+	@supports (position-area: bottom) and (position-try: flip-block) {
+		.combobox-panel {
+			/* the gap to the trigger — margin, because position-area owns inset */
+			margin: 0.25rem;
+			position-try: flip-block;
+		}
+
+		.combobox-panel[data-align="left"] {
+			position-area: block-end span-inline-end;
+		}
+
+		.combobox-panel[data-align="right"] {
+			position-area: block-end span-inline-start;
+		}
+	}
+
+	.combobox-panel {
+		opacity: 0;
+		scale: 0.98;
+		transition:
+			opacity 120ms ease-out,
+			scale 120ms ease-out,
+			overlay 120ms allow-discrete,
+			display 120ms allow-discrete;
+	}
+
+	.combobox-panel:popover-open {
+		opacity: 1;
+		scale: 1;
+	}
+
+	@starting-style {
+		.combobox-panel:popover-open {
+			opacity: 0;
+			scale: 0.98;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.combobox-panel {
+			transition: none;
+		}
+	}
+</style>
diff --git a/web/src/lib/components/ui/Field.stories.svelte b/web/src/lib/components/ui/Field.stories.svelte
index 89a06fa4..c5f70c7e 100644
--- a/web/src/lib/components/ui/Field.stories.svelte
+++ b/web/src/lib/components/ui/Field.stories.svelte
@@ -63,11 +63,14 @@
 <Story name="WithSelect">
 	{#snippet template(args)}
 		<Field {...args} for="field-select">
-			<Select id="field-select">
-				<option value="" disabled selected>Select</option>
-				<option value="one">One</option>
-				<option value="two">Two</option>
-			</Select>
+			<Select
+				id="field-select"
+				placeholder="Select"
+				options={[
+					{ value: "one", label: "One" },
+					{ value: "two", label: "Two" }
+				]}
+			/>
 		</Field>
 	{/snippet}
 </Story>
diff --git a/web/src/lib/components/ui/Input.svelte b/web/src/lib/components/ui/Input.svelte
index 0bb4d960..92527eea 100644
--- a/web/src/lib/components/ui/Input.svelte
+++ b/web/src/lib/components/ui/Input.svelte
@@ -37,6 +37,8 @@
 		iconRight?: Component<SvelteHTMLElements["svg"]>;
 		/** static, non-editable trailing text shown inside the field, e.g. a domain suffix */
 		suffix?: string;
+		/** the input itself, for callers that have to focus or measure it */
+		element?: HTMLInputElement;
 		class?: string;
 	}
 
@@ -48,6 +50,7 @@
 		iconLeft,
 		iconRight,
 		suffix,
+		element = $bindable(),
 		class: className,
 		...rest
 	}: Props = $props();
@@ -61,6 +64,7 @@
 		<IconLeft class="size-4 shrink-0 text-foreground-subtle" aria-hidden="true" />
 	{/if}
 	<input
+		bind:this={element}
 		bind:value
 		{disabled}
 		aria-invalid={error}
diff --git a/web/src/lib/components/ui/Select.stories.svelte b/web/src/lib/components/ui/Select.stories.svelte
index 1b822a43..412b281f 100644
--- a/web/src/lib/components/ui/Select.stories.svelte
+++ b/web/src/lib/components/ui/Select.stories.svelte
@@ -1,44 +1,145 @@
 <script module lang="ts">
+	import { resolve } from "$app/paths";
 	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import Select from "./Select.svelte";
+	import type { SelectOption } from "./selectField";
 
 	const { Story } = defineMeta({
 		title: "UI/Select",
 		component: Select,
 		tags: ["autodocs"],
 		argTypes: {
+			rich: { control: "boolean" },
 			error: { control: "boolean" },
 			disabled: { control: "boolean" }
 		},
 		args: {
+			rich: false,
 			error: false,
-			disabled: false
+			disabled: false,
+			label: "Pick one",
+			value: "two",
+			options: [
+				{ value: "one", label: "One" },
+				{ value: "two", label: "Two" },
+				{ value: "three", label: "Three" }
+			] satisfies SelectOption[]
 		}
 	});
+
+	const refs: SelectOption[] = [
+		{ value: "main", hint: "default", group: "Branches" },
+		{ value: "next", group: "Branches" },
+		{ value: "feature/combobox", group: "Branches" },
+		{ value: "feature/storybook", group: "Branches" },
+		{ value: "v1.0.0", group: "Tags" },
+		{ value: "v0.9.0", group: "Tags" }
+	];
+
+	const many: SelectOption[] = Array.from({ length: 60 }, (_, index) => ({
+		value: index === 0 ? "main" : `renovate/dependency-${index}`,
+		hint: index === 0 ? "default" : undefined,
+		group: "Branches"
+	}));
 </script>
 
-<!-- Select's content comes through its `children` snippet, provided here as Story slot content. -->
-<Story name="Default">
-	<option value="" disabled selected>Select</option>
-	<option value="one">One</option>
-	<option value="two">Two</option>
-	<option value="three">Three</option>
+<!-- the same options render either way: `rich` only changes the control drawn around them -->
+<Story name="Native">
+	{#snippet template(args)}
+		<div class="w-64"><Select {...args} /></div>
+	{/snippet}
+</Story>
+
+<Story name="Rich" args={{ rich: true }}>
+	{#snippet template(args)}
+		<div class="w-64"><Select {...args} /></div>
+	{/snippet}
+</Story>
+
+<Story name="Placeholder" args={{ value: "", placeholder: "Choose one" }}>
+	{#snippet template(args)}
+		<div class="w-64"><Select {...args} /></div>
+	{/snippet}
+</Story>
+
+<Story name="Grouped" args={{ options: refs, value: "main" }}>
+	{#snippet template(args)}
+		<div class="w-64"><Select {...args} /></div>
+	{/snippet}
+</Story>
+
+<Story name="Grouped rich" args={{ rich: true, options: refs, value: "main" }}>
+	{#snippet template(args)}
+		<div class="w-64"><Select {...args} /></div>
+	{/snippet}
+</Story>
+
+<Story
+	name="Rich value outside the options"
+	args={{ rich: true, options: refs, value: "0123456789abcdef" }}
+>
+	{#snippet template(args)}
+		<div class="w-64"><Select {...args} /></div>
+	{/snippet}
+</Story>
+
+<Story name="Rich scrolling list with a footer" args={{ rich: true, options: many, value: "main" }}>
+	{#snippet template(args)}
+		<div class="w-64">
+			<Select {...args}>
+				{#snippet footer()}
+					<a href={resolve("/")} class="block p-2 text-sm">View all branches</a>
+				{/snippet}
+			</Select>
+		</div>
+	{/snippet}
+</Story>
+
+<Story
+	name="Disabled options"
+	args={{
+		rich: true,
+		value: "main",
+		options: [
+			{ value: "main", hint: "default", group: "Branches" },
+			{ value: "next", group: "Branches" },
+			{ value: "No tags found", disabled: true, group: "Tags" }
+		]
+	}}
+>
+	{#snippet template(args)}
+		<div class="w-64"><Select {...args} /></div>
+	{/snippet}
+</Story>
+
+<Story name="Right aligned" args={{ rich: true, align: "right" }}>
+	{#snippet template(args)}
+		<div class="flex justify-end">
+			<div class="w-64"><Select {...args} /></div>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Error" args={{ error: true }}>
+	{#snippet template(args)}
+		<div class="w-64"><Select {...args} /></div>
+	{/snippet}
 </Story>
 
-<Story name="Filled" args={{ value: "two" }}>
-	<option value="one">One</option>
-	<option value="two">Two</option>
-	<option value="three">Three</option>
+<Story name="Error rich" args={{ rich: true, error: true }}>
+	{#snippet template(args)}
+		<div class="w-64"><Select {...args} /></div>
+	{/snippet}
 </Story>
 
-<Story name="Error" args={{ error: true, value: "two" }}>
-	<option value="one">One</option>
-	<option value="two">Two</option>
-	<option value="three">Three</option>
+<Story name="Disabled" args={{ disabled: true }}>
+	{#snippet template(args)}
+		<div class="w-64"><Select {...args} /></div>
+	{/snippet}
 </Story>
 
-<Story name="Disabled" args={{ disabled: true, value: "one" }}>
-	<option value="one">One</option>
-	<option value="two">Two</option>
-	<option value="three">Three</option>
+<Story name="Disabled rich" args={{ rich: true, disabled: true }}>
+	{#snippet template(args)}
+		<div class="w-64"><Select {...args} /></div>
+	{/snippet}
 </Story>
diff --git a/web/src/lib/components/ui/Select.svelte b/web/src/lib/components/ui/Select.svelte
index bc0b5158..decda772 100644
--- a/web/src/lib/components/ui/Select.svelte
+++ b/web/src/lib/components/ui/Select.svelte
@@ -1,85 +1,131 @@
-<script module lang="ts">
-	import { tv, type VariantProps } from "tailwind-variants";
-
-	export const select = tv({
-		base: "w-full appearance-none rounded-sm border bg-background-default px-3 py-2 pr-9 text-sm transition-colors outline-none disabled:cursor-not-allowed",
-		variants: {
-			error: {
-				false:
-					"border-border-default focus:border-border-strong focus:ring-1 focus:ring-border-strong",
-				true: "border-border-danger bg-background-danger-subtle text-foreground-danger focus:border-border-focus-danger focus:ring-1 focus:ring-border-focus-danger"
-			},
-			disabled: {
-				false: "",
-				true: "text-foreground-disabled"
-			}
-		},
-		compoundVariants: [
-			{
-				error: true,
-				disabled: true,
-				class:
-					"border-border-danger-subtle bg-background-danger-subtle text-foreground-danger-subtle"
-			}
-		],
-		defaultVariants: {
-			error: false,
-			disabled: false
-		}
-	});
-
-	export type SelectVariants = VariantProps<typeof select>;
-
-	const chevron = tv({
-		base: "pointer-events-none absolute top-1/2 right-3 size-3.5 -translate-y-1/2 text-foreground-subtle",
-		variants: {
-			error: {
-				true: "text-foreground-danger"
-			},
-			disabled: {
-				true: "text-foreground-disabled"
-			}
-		},
-		compoundVariants: [
-			{
-				error: true,
-				disabled: true,
-				class: "text-foreground-danger-subtle"
-			}
-		]
-	});
-</script>
-
 <script lang="ts">
+	// SelectOption and SelectAlign live in ./selectField, which owns the shape both renderings
+	// read; re-exporting them from here trips eslint's no-import-assign on module scripts
 	import ChevronDown from "$icon/chevron-down";
-	import type { HTMLSelectAttributes } from "svelte/elements";
 	import type { Snippet } from "svelte";
+	import Combobox from "./Combobox.svelte";
+	import { selectField, type SelectAlign, type SelectOption } from "./selectField";
 
-	interface Props extends Omit<HTMLSelectAttributes, "class" | "value"> {
+	interface Props {
+		options: SelectOption[];
+		/** two-way; the selected option's value. Pass without `bind:` when the truth lives
+		 *  elsewhere — a ref in the url, say — and let `onSelect` do the navigating. */
 		value?: string;
+		/** Swap the native control for a searchable listbox. Same options, same box: reach for it
+		 *  once a list is long enough that scanning it beats reading it. */
+		rich?: boolean;
+		onSelect?: (value: string) => void;
+		/** empty-value row shown first, e.g. "Choose stat". Selectable, so it also clears. */
+		placeholder?: string;
+		/** names the control for screen readers */
+		label?: string;
 		error?: boolean;
 		disabled?: boolean;
+		/** goes on the control itself, so a Field's label can point at it */
+		id?: string;
 		class?: string;
-		children?: Snippet;
+		// rich only
+		searchPlaceholder?: string;
+		emptyLabel?: string;
+		/** take filtering over, e.g. to query a server: `options` is then rendered as given */
+		onSearch?: (query: string) => void;
+		loading?: boolean;
+		align?: SelectAlign;
+		panelClass?: string;
+		/** pinned below the list, e.g. a "view all branches" link */
+		footer?: Snippet;
 	}
 
 	let {
+		options,
 		value = $bindable(""),
+		rich = false,
+		onSelect,
+		placeholder,
+		label,
 		error = false,
 		disabled = false,
+		id,
 		class: className,
-		children,
-		...rest
+		searchPlaceholder,
+		emptyLabel,
+		onSearch,
+		loading,
+		align,
+		panelClass,
+		footer
 	}: Props = $props();
 
-	const classes = $derived(select({ error, disabled, class: className }));
+	// a native optgroup has to nest, so the flat array is folded into runs of the same group.
+	// the rich rendering keeps the array flat and emits headings between rows instead.
+	const groups = $derived(
+		options.reduce<{ label?: string; options: SelectOption[] }[]>((groups, option) => {
+			const last = groups.at(-1);
+			if (last && last.label === option.group) last.options.push(option);
+			else groups.push({ label: option.group, options: [option] });
+			return groups;
+		}, [])
+	);
+
+	const field = $derived(selectField({ error, disabled }));
+
+	const onchange = (event: Event) => {
+		onSelect?.((event.currentTarget as HTMLSelectElement).value);
+	};
 </script>
 
-<div class="relative">
-	<select bind:value {disabled} aria-invalid={error} class={classes} {...rest}>
-		{#if children}
-			{@render children()}
-		{/if}
-	</select>
-	<ChevronDown class={chevron({ error, disabled })} aria-hidden="true" />
-</div>
+{#snippet nativeOptions(items: SelectOption[])}
+	{#each items as option (option.value)}
+		<option value={option.value} disabled={option.disabled}>{option.label ?? option.value}</option>
+	{/each}
+{/snippet}
+
+{#if rich}
+	<Combobox
+		{options}
+		bind:value
+		{onSelect}
+		{placeholder}
+		{label}
+		{error}
+		{disabled}
+		{id}
+		{searchPlaceholder}
+		{emptyLabel}
+		{onSearch}
+		{loading}
+		{align}
+		{panelClass}
+		{footer}
+		class={className}
+	/>
+{:else}
+	<div class="relative {className ?? ''}">
+		<select
+			bind:value
+			{id}
+			{disabled}
+			{onchange}
+			aria-label={label}
+			aria-invalid={error}
+			class={field.box({ class: "min-h-9 appearance-none px-2 py-1 pr-8" })}
+		>
+			{#if placeholder}
+				<option value="">{placeholder}</option>
+			{/if}
+			{#each groups as group (group.label ?? "")}
+				{#if group.label}
+					<optgroup label={group.label}>{@render nativeOptions(group.options)}</optgroup>
+				{:else}
+					{@render nativeOptions(group.options)}
+				{/if}
+			{/each}
+		</select>
+		<ChevronDown
+			class={field.chevron({
+				class: "pointer-events-none absolute top-1/2 right-2 size-3.5 -translate-y-1/2"
+			})}
+			aria-hidden="true"
+		/>
+	</div>
+{/if}
diff --git a/web/src/lib/components/ui/selectField.ts b/web/src/lib/components/ui/selectField.ts
new file mode 100644
index 00000000..b4c64b3e
--- /dev/null
+++ b/web/src/lib/components/ui/selectField.ts
@@ -0,0 +1,60 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+/** one row of a Select, in either rendering */
+export interface SelectOption {
+	value: string;
+	/** shown instead of `value`; `value` is still matched when filtering */
+	label?: string;
+	/** right-aligned secondary text, e.g. "default" on a repo's default branch. rich only:
+	 *  a native `<option>` has nowhere to put it */
+	hint?: string;
+	/** consecutive options sharing one become a single optgroup or heading */
+	group?: string;
+	disabled?: boolean;
+}
+
+export type SelectAlign = "left" | "right";
+
+/** The box both renderings draw. Layout differs — a native select needs the chevron overlaid,
+ *  the rich trigger lays it out inline — so each renderer appends its own padding and display,
+ *  and only the border, fill and state colours live here. */
+export const selectField = tv({
+	slots: {
+		box: "w-full rounded-sm border bg-background-default text-sm transition-colors outline-none disabled:cursor-not-allowed",
+		chevron: "shrink-0 text-foreground-subtle"
+	},
+	variants: {
+		error: {
+			false: {
+				box: "border-border-default text-foreground-default focus-visible:border-border-strong focus-visible:ring-1 focus-visible:ring-border-strong"
+			},
+			true: {
+				box: "border-border-danger bg-background-danger-subtle text-foreground-danger focus-visible:border-border-focus-danger focus-visible:ring-1 focus-visible:ring-border-focus-danger",
+				chevron: "text-foreground-danger"
+			}
+		},
+		disabled: {
+			false: {},
+			true: {
+				box: "text-foreground-disabled",
+				chevron: "text-foreground-disabled"
+			}
+		}
+	},
+	compoundVariants: [
+		{
+			error: true,
+			disabled: true,
+			class: {
+				box: "border-border-danger-subtle bg-background-danger-subtle text-foreground-danger-subtle",
+				chevron: "text-foreground-danger-subtle"
+			}
+		}
+	],
+	defaultVariants: {
+		error: false,
+		disabled: false
+	}
+});
+
+export type SelectFieldVariants = VariantProps<typeof selectField>;
diff --git a/web/src/routes/[handle]/[repo]/settings/+page.svelte b/web/src/routes/[handle]/[repo]/settings/+page.svelte
index 227f279d..2a517c8b 100644
--- a/web/src/routes/[handle]/[repo]/settings/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/+page.svelte
@@ -104,11 +104,15 @@
 				]}
 				stack
 			>
-				<Select bind:value={form.defaultBranch} aria-label="Default branch" class="w-full sm:w-80">
-					{#each branches as branch (branch)}
-						<option value={branch}>{branch}</option>
-					{/each}
-				</Select>
+				<Select
+					rich
+					bind:value={form.defaultBranch}
+					options={branches.map((branch) => ({ value: branch }))}
+					label="Default branch"
+					searchPlaceholder="Find a branch…"
+					emptyLabel="No branch matches"
+					class="w-full sm:w-80"
+				/>
 			</SettingsRow>
 		</SettingsList>
 	</div>
diff --git a/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
index ec9edd77..ccff6de0 100644
--- a/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
@@ -51,11 +51,12 @@
 
 	<SettingsList>
 		<SettingsRow title="Spindle" stack>
-			<Select bind:value={spindle} aria-label="Spindle" class="w-full sm:w-80">
-				{#each spindles as option (option)}
-					<option value={option}>{option}</option>
-				{/each}
-			</Select>
+			<Select
+				bind:value={spindle}
+				options={spindles.map((option) => ({ value: option }))}
+				label="Spindle"
+				class="w-full sm:w-80"
+			/>
 		</SettingsRow>
 	</SettingsList>
 </SettingsBlock>
diff --git a/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte b/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
index f6eb898c..438206b1 100644
--- a/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
@@ -70,11 +70,15 @@
 
 <SettingsList>
 	<SettingsRow title="Branch" description="The branch to build and deploy the site from." stack>
-		<Select bind:value={form.branch} aria-label="Branch" class="w-full sm:w-80">
-			{#each branches as branch (branch.value)}
-				<option value={branch.value}>{branch.label}</option>
-			{/each}
-		</Select>
+		<Select
+			rich
+			bind:value={form.branch}
+			options={branches}
+			label="Branch"
+			searchPlaceholder="Find a branch…"
+			emptyLabel="No branch matches"
+			class="w-full sm:w-80"
+		/>
 	</SettingsRow>
 
 	<SettingsRow