diff --git a/apps/web/src/base/ComboBox.tsx b/apps/web/src/base/ComboBox.tsx
index d6e6dd029..42ff86ca4 100644
--- a/apps/web/src/base/ComboBox.tsx
+++ b/apps/web/src/base/ComboBox.tsx
@@ -10,16 +10,17 @@ function ComboboxTriggerButton({
 	TriggerButtonProps,
 	selectedItem,
 	renderRow,
+	placeholder,
 	id,
 }) {
 	return (
 		<button
-			className="flex justify-between items-center px-2.5 py-1.5 bg-white border border-gray-300 rounded font-medium capitalize w-full [&_svg]:ml-1"
+			className="flex justify-between items-center px-2.5 py-2 bg-white border border-gray-300 rounded font-medium capitalize w-full [&_svg]:ml-1"
 			{...TriggerButtonProps}
 			id={id}
 			type="button"
 		>
-			{selectedItem ? renderRow(selectedItem) : "Select user"}
+			{selectedItem ? renderRow(selectedItem) : placeholder}
 			<Icon icon={ChevronDown} />
 		</button>
 	);
@@ -41,6 +42,8 @@ type ComboBoxProps = {
 	onFilter: (term: string) => void;
 	onChange: (item: unknown) => void;
 	itemToString?: (item: unknown) => string;
+	/** Text shown on the trigger when nothing is selected */
+	placeholder?: string;
 	id?: string;
 };
 
@@ -56,6 +59,7 @@ export default function ComboBox({
 	onFilter,
 	onChange,
 	itemToString,
+	placeholder = "Select…",
 	id,
 }: ComboBoxProps) {
 	itemToString = itemToString || defaultToString;
@@ -87,6 +91,7 @@ export default function ComboBox({
 				TriggerButtonProps={getToggleButtonProps()}
 				selectedItem={selectedItem}
 				renderRow={renderRow}
+				placeholder={placeholder}
 				id={id}
 			/>
 			<ul
diff --git a/apps/web/src/users/components/PrimaryGroup.tsx b/apps/web/src/users/components/PrimaryGroup.tsx
deleted file mode 100644
index ba4d6a87a..000000000
--- a/apps/web/src/users/components/PrimaryGroup.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { useUpdateUser } from "@administration/queries";
-import InputGroup from "@base/InputGroup";
-import InputLabel from "@base/InputLabel";
-import InputSelect from "@base/InputSelect";
-import type { GroupMinimal } from "@groups/types";
-import { capitalize } from "es-toolkit/string";
-
-export type PrimaryGroupProps = {
-	/** The groups associated with the user */
-	groups: GroupMinimal[];
-	/** The users unique id */
-	id: number;
-	/** The users primary group */
-	primaryGroup: GroupMinimal | null;
-};
-
-/**
- * A dropdown showing the primary group and its options
- */
-export default function PrimaryGroup({
-	groups,
-	id,
-	primaryGroup,
-}: PrimaryGroupProps) {
-	const mutation = useUpdateUser();
-
-	function handleSetPrimaryGroup(e) {
-		mutation.mutate({
-			userId: id,
-			update: {
-				primary_group:
-					e.target.value === "none" ? null : Number(e.target.value),
-			},
-		});
-	}
-
-	return (
-		<InputGroup>
-			<InputLabel>Primary Group</InputLabel>
-			<InputSelect
-				value={primaryGroup?.id || "none"}
-				onChange={handleSetPrimaryGroup}
-			>
-				<option key="none" value="none">
-					None
-				</option>
-				{groups.map(({ id, name }) => (
-					<option key={id} value={id} className="capitalize">
-						{capitalize(name)}
-					</option>
-				))}
-			</InputSelect>
-		</InputGroup>
-	);
-}
diff --git a/apps/web/src/users/components/UserDetail.tsx b/apps/web/src/users/components/UserDetail.tsx
index c4618e4e8..fc919a484 100644
--- a/apps/web/src/users/components/UserDetail.tsx
+++ b/apps/web/src/users/components/UserDetail.tsx
@@ -6,7 +6,6 @@ import { CircleAlert, ShieldUserIcon } from "lucide-react";
 import Label from "@/base/Label";
 import Handle from "./Handle";
 import Password from "./Password";
-import PrimaryGroup from "./PrimaryGroup";
 import { UserActivationBanner } from "./UserActivationBanner";
 import UserAdministratorRole from "./UserAdministratorRole";
 import UserGroups from "./UserGroups";
@@ -79,8 +78,11 @@ export default function UserDetail({ userId }: UserDetailProps) {
 
 			<div className="mb-4 md:grid md:grid-cols-2 md:gap-x-4">
 				<div>
-					<UserGroups userId={id} memberGroups={groups} />
-					<PrimaryGroup groups={groups} id={id} primaryGroup={primary_group} />
+					<UserGroups
+						userId={id}
+						memberGroups={groups}
+						primaryGroup={primary_group}
+					/>
 				</div>
 				<UserPermissions permissions={permissions} />
 			</div>
diff --git a/apps/web/src/users/components/UserGroup.tsx b/apps/web/src/users/components/UserGroup.tsx
deleted file mode 100644
index b880a06aa..000000000
--- a/apps/web/src/users/components/UserGroup.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import Checkbox from "@base/Checkbox";
-import SelectBoxGroupSection from "@base/SelectBoxGroupSection";
-
-export type UserGroupTypes = {
-	/** The group unique id */
-	id: string | number;
-
-	/** The group name */
-	name: string;
-
-	/** Whether the group is selected */
-	toggled: boolean;
-
-	/** A callback function to handle the selection of a group */
-	onClick: (id: string | number) => void;
-};
-
-/**
- * A condensed user group for use in a list of user groups
- */
-export function UserGroup({ id, name, toggled, onClick }: UserGroupTypes) {
-	return (
-		<SelectBoxGroupSection
-			active={toggled}
-			onClick={() => onClick(id)}
-			className="capitalize select-none"
-		>
-			<Checkbox checked={toggled} id={`UserGroupCheckbox-${id}`} label={name} />
-		</SelectBoxGroupSection>
-	);
-}
diff --git a/apps/web/src/users/components/UserGroups.tsx b/apps/web/src/users/components/UserGroups.tsx
index cc25f73a0..f8285f895 100644
--- a/apps/web/src/users/components/UserGroups.tsx
+++ b/apps/web/src/users/components/UserGroups.tsx
@@ -1,74 +1,189 @@
 import { useUpdateUser } from "@administration/queries";
+import { useFuse } from "@app/fuse";
 import BoxGroup from "@base/BoxGroup";
-import InputLabel from "@base/InputLabel";
+import BoxGroupSection from "@base/BoxGroupSection";
+import ComboBox from "@base/ComboBox";
+import Icon from "@base/Icon";
+import Link from "@base/Link";
 import LoadingPlaceholder from "@base/LoadingPlaceholder";
-import NoneFoundSection from "@base/NoneFoundSection";
 import QueryError from "@base/QueryError";
+import { RadioGroup, RadioGroupItem } from "@base/RadioGroup";
 import { useListGroups } from "@groups/queries";
 import type { GroupMinimal } from "@groups/types";
-import { xor } from "es-toolkit/array";
-import { useId } from "react";
-import { UserGroup } from "./UserGroup";
+import { X } from "lucide-react";
 
-type UserGroupsType = {
-	/** The groups associated with the user */
+/** A stable empty fallback so `useFuse` doesn't reset its term while loading */
+const NO_GROUPS: GroupMinimal[] = [];
+
+type UserGroupsProps = {
+	/** The groups the user is a member of */
 	memberGroups: GroupMinimal[];
 
+	/** The user's primary group, or null if none */
+	primaryGroup: GroupMinimal | null;
+
 	/** The unique user id */
 	userId: number;
 };
 
 /**
- * A list of user groups
+ * Manages a user's group membership and primary group.
+ *
+ * A single-select combobox adds groups to the membership list. Each member is
+ * a row in a radio group that selects the primary group, with a button to
+ * revoke membership.
  */
-export default function UserGroups({ memberGroups, userId }: UserGroupsType) {
+export default function UserGroups({
+	memberGroups,
+	primaryGroup,
+	userId,
+}: UserGroupsProps) {
 	const { data, isPending, isError } = useListGroups();
 	const mutation = useUpdateUser();
-	const labelId = useId();
 
-	if (isError && !data) {
-		return <QueryError noun="groups" />;
-	}
+	const [results, term, setTerm] = useFuse<GroupMinimal>(data ?? NO_GROUPS, [
+		"name",
+	]);
 
-	if (isPending) {
-		return <LoadingPlaceholder />;
+	const memberIds = new Set(memberGroups.map((group) => group.id));
+	const availableGroups = results.filter((group) => !memberIds.has(group.id));
+
+	function addGroup(id: number) {
+		mutation.mutate({
+			userId,
+			update: { groups: [...memberIds, id] },
+		});
 	}
 
-	function handleEdit(groupId: number) {
+	function removeGroup(id: number) {
 		mutation.mutate({
 			userId,
 			update: {
-				groups: xor(
-					memberGroups.map((g) => g.id),
-					[groupId],
-				),
+				groups: [...memberIds].filter((memberId) => memberId !== id),
+				...(primaryGroup?.id === id ? { primary_group: null } : {}),
 			},
 		});
 	}
 
-	return (
-		<div>
-			<InputLabel id={labelId}>Groups</InputLabel>
-			<BoxGroup
-				role="listbox"
-				aria-multiselectable
-				aria-labelledby={labelId}
-				className="mb-4"
-			>
-				{data.length ? (
-					data.map(({ id, name }) => (
-						<UserGroup
-							key={id}
-							id={id}
-							name={name}
-							toggled={memberGroups.some((g) => g.id === id)}
-							onClick={handleEdit}
-						/>
-					))
-				) : (
-					<NoneFoundSection key="noneFound" noun="groups" />
+	function setPrimaryGroup(value: string) {
+		mutation.mutate({
+			userId,
+			update: { primary_group: value === "none" ? null : Number(value) },
+		});
+	}
+
+	function renderAdd() {
+		if (isError && !data) {
+			return <QueryError noun="groups" />;
+		}
+
+		if (isPending) {
+			return <LoadingPlaceholder />;
+		}
+
+		if (data.length === 0) {
+			return (
+				<p className="text-gray-500">
+					No groups have been created yet.{" "}
+					<Link
+						to="/administration/groups"
+						className="text-blue-600 hover:underline"
+					>
+						Manage groups
+					</Link>
+					.
+				</p>
+			);
+		}
+
+		if (availableGroups.length === 0) {
+			return (
+				<p className="text-gray-500">This user is a member of every group.</p>
+			);
+		}
+
+		return (
+			<ComboBox
+				items={availableGroups}
+				selectedItem={null}
+				term={term}
+				onFilter={setTerm}
+				onChange={(group) => addGroup((group as GroupMinimal).id)}
+				itemToString={(group) => (group ? (group as GroupMinimal).name : "")}
+				renderRow={(group) => (
+					<span className="capitalize">{(group as GroupMinimal).name}</span>
 				)}
-			</BoxGroup>
+				placeholder="Add group"
+			/>
+		);
+	}
+
+	function renderMembership() {
+		if (memberGroups.length) {
+			return (
+				<RadioGroup
+					className="mt-4"
+					aria-label="Primary group"
+					value={primaryGroup ? String(primaryGroup.id) : "none"}
+					onValueChange={setPrimaryGroup}
+				>
+					<BoxGroup>
+						{memberGroups.map((group) => (
+							<BoxGroupSection
+								key={group.id}
+								className="flex items-center gap-3"
+							>
+								<RadioGroupItem
+									id={`primary-${group.id}`}
+									value={String(group.id)}
+								/>
+								<label
+									htmlFor={`primary-${group.id}`}
+									className="grow capitalize cursor-pointer select-none"
+								>
+									{group.name}
+								</label>
+								<button
+									type="button"
+									aria-label={`Remove ${group.name}`}
+									className="text-gray-500 hover:text-gray-800"
+									onClick={() => removeGroup(group.id)}
+								>
+									<Icon icon={X} />
+								</button>
+							</BoxGroupSection>
+						))}
+						<BoxGroupSection className="flex items-center gap-3">
+							<RadioGroupItem id="primary-none" value="none" />
+							<label
+								htmlFor="primary-none"
+								className="grow cursor-pointer select-none"
+							>
+								No primary group
+							</label>
+						</BoxGroupSection>
+					</BoxGroup>
+				</RadioGroup>
+			);
+		}
+
+		// When no groups exist at all, renderAdd already explains the situation.
+		if (data?.length === 0) {
+			return null;
+		}
+
+		return (
+			<p className="mt-4 text-gray-500">
+				This user is not a member of any groups.
+			</p>
+		);
+	}
+
+	return (
+		<div className="mb-4">
+			<span className="font-medium mb-2 inline-block">Groups</span>
+			{renderAdd()}
+			{renderMembership()}
 		</div>
 	);
 }
diff --git a/apps/web/src/users/components/__tests__/PrimaryGroup.test.tsx b/apps/web/src/users/components/__tests__/PrimaryGroup.test.tsx
deleted file mode 100644
index 29137343c..000000000
--- a/apps/web/src/users/components/__tests__/PrimaryGroup.test.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { mockApiEditUser } from "@tests/api/users";
-import { createFakeUser } from "@tests/fake/user";
-import { renderWithProviders } from "@tests/setup";
-import { beforeEach, describe, expect, it } from "vitest";
-import PrimaryGroup, { type PrimaryGroupProps } from "../PrimaryGroup";
-
-describe("<PrimaryGroup />", () => {
-	let props: PrimaryGroupProps;
-
-	beforeEach(() => {
-		props = {
-			groups: [
-				{ id: 1, legacy_id: null, name: "foo" },
-				{ id: 2, legacy_id: null, name: "bar" },
-				{ id: 3, legacy_id: null, name: "baz" },
-			],
-			id: 1,
-			primaryGroup: { id: 2, legacy_id: null, name: "bar" },
-		};
-	});
-
-	it("should render correctly when 3 groups exist", () => {
-		renderWithProviders(<PrimaryGroup {...props} />);
-
-		expect(screen.getByText("Primary Group")).toBeInTheDocument();
-		expect(screen.getByRole("combobox")).toHaveValue("2");
-		expect(screen.getByRole("combobox")).not.toHaveValue("3");
-		expect(screen.getByRole("option", { name: "None" })).toBeInTheDocument();
-		expect(screen.getByRole("option", { name: "Foo" })).toBeInTheDocument();
-		expect(screen.getByRole("option", { name: "Baz" })).toBeInTheDocument();
-		expect(screen.getByRole("option", { name: "Bar" })).toBeInTheDocument();
-	});
-
-	it("should render when [primaryGroup = null]", () => {
-		props.primaryGroup = null;
-
-		renderWithProviders(<PrimaryGroup {...props} />);
-
-		expect(screen.getByText("Primary Group")).toBeInTheDocument();
-		expect(screen.getByRole("combobox")).toHaveValue("none");
-		expect(screen.getByRole("option", { name: "Foo" })).toBeInTheDocument();
-		expect(screen.getByRole("option", { name: "Bar" })).toBeInTheDocument();
-	});
-
-	it("should render correctly when groups = []", () => {
-		props.groups = [];
-
-		renderWithProviders(<PrimaryGroup {...props} />);
-
-		expect(screen.getByText("Primary Group")).toBeInTheDocument();
-		expect(screen.getByRole("combobox")).toHaveValue("none");
-		expect(
-			screen.queryByRole("option", { name: "Foo" }),
-		).not.toBeInTheDocument();
-	});
-
-	it("should call onSetPrimaryGroup() when selection changes", async () => {
-		const userDetails = createFakeUser({
-			id: props.id,
-			groups: props.groups,
-			primary_group: props.primaryGroup,
-		});
-
-		const scope = mockApiEditUser(
-			props.id,
-			200,
-			{ primary_group: { id: 1, name: "foo" } },
-			userDetails,
-		);
-		renderWithProviders(<PrimaryGroup {...props} />);
-
-		expect(screen.getByText("Primary Group")).toBeInTheDocument();
-
-		await userEvent.selectOptions(screen.getByRole("combobox"), "Bar");
-
-		scope.done();
-	});
-});
diff --git a/apps/web/src/users/components/__tests__/UserDetail.test.tsx b/apps/web/src/users/components/__tests__/UserDetail.test.tsx
index 16cd050b3..1852d1acf 100644
--- a/apps/web/src/users/components/__tests__/UserDetail.test.tsx
+++ b/apps/web/src/users/components/__tests__/UserDetail.test.tsx
@@ -11,7 +11,7 @@ import { createFakeAccount, mockApiGetAccount } from "@tests/fake/account";
 import { administratorRoles } from "@tests/fake/administrator";
 import { createFakeGroup } from "@tests/fake/groups";
 import { createFakeUser } from "@tests/fake/user";
-import { renderWithProviders } from "@tests/setup";
+import { renderWithProviders, renderWithRouter } from "@tests/setup";
 import UserDetail from "@users/components/UserDetail";
 import type { User } from "@users/types";
 import nock from "nock";
@@ -68,13 +68,17 @@ describe("<UserDetail />", () => {
 			expect(screen.getByLabelText("Group 2")).toBeInTheDocument();
 			expect(screen.getByLabelText("Group 3")).toBeInTheDocument();
 
-			expect(screen.getByText("Primary Group")).toBeInTheDocument();
-			expect(screen.getByRole("option", { name: "None" })).toBeInTheDocument();
 			expect(
-				screen.getByRole("option", { name: "Group 1" }),
+				screen.getByRole("radiogroup", { name: "Primary group" }),
 			).toBeInTheDocument();
 			expect(
-				screen.getByRole("option", { name: "Group 4" }),
+				screen.getByRole("radio", { name: "No primary group" }),
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole("radio", { name: "Group 1" }),
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole("radio", { name: "Group 4" }),
 			).toBeInTheDocument();
 
 			expect(screen.getByText("Permissions")).toBeInTheDocument();
@@ -168,20 +172,26 @@ describe("<UserDetail />", () => {
 			expect(await screen.findByLabelText("Group 1")).toBeInTheDocument();
 			expect(screen.getByLabelText("Group 3")).toBeInTheDocument();
 		});
-		it("should render NoneFound when items = []", async () => {
-			const user = createFakeUser({ groups: [] });
+		it("should point to group creation when no groups exist", async () => {
+			const user = createFakeUser({ groups: [], primary_group: null });
 
 			mockApiListGroups([]);
 
 			const scope = mockApiGetUser(user.id, user);
 
-			renderWithProviders(<UserDetail userId={user.id} />);
+			await renderWithRouter(<UserDetail userId={user.id} />);
 
 			expect(await screen.findByText("Groups")).toBeInTheDocument();
-			expect(await screen.findByText("No groups found")).toBeInTheDocument();
+			expect(
+				await screen.findByText(/No groups have been created yet/),
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole("link", { name: "Manage groups" }),
+			).toBeInTheDocument();
 			expect(screen.queryByLabelText("group3")).not.toBeInTheDocument();
-			expect(screen.getByText("Primary Group")).toBeInTheDocument();
-			expect(screen.getByRole("option", { name: "None" })).toBeInTheDocument();
+			expect(
+				screen.queryByRole("radiogroup", { name: "Primary group" }),
+			).not.toBeInTheDocument();
 
 			scope.done();
 		});
diff --git a/apps/web/src/users/components/__tests__/UserGroup.test.tsx b/apps/web/src/users/components/__tests__/UserGroup.test.tsx
deleted file mode 100644
index 7fa051994..000000000
--- a/apps/web/src/users/components/__tests__/UserGroup.test.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { renderWithProviders } from "@tests/setup";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { UserGroup, type UserGroupTypes } from "../UserGroup";
-
-describe("<UserGroup />", () => {
-	let props: UserGroupTypes;
-
-	beforeEach(() => {
-		props = {
-			id: "3691nwak3",
-			name: "bob",
-			toggled: true,
-			onClick: vi.fn(),
-		};
-	});
-
-	it("should render correctly when toggled=true", () => {
-		renderWithProviders(<UserGroup {...props} />);
-
-		expect(screen.getByText("bob")).toBeInTheDocument();
-		expect(screen.queryByText("3691nwak3")).not.toBeInTheDocument();
-	});
-
-	it("should render with [toggled=false]", () => {
-		props.toggled = false;
-
-		renderWithProviders(<UserGroup {...props} />);
-
-		expect(screen.getByText("bob")).toBeInTheDocument();
-		expect(screen.queryByText("3691nwak3")).not.toBeInTheDocument();
-	});
-
-	it("should call [onClick] when clicked", async () => {
-		renderWithProviders(<UserGroup {...props} />);
-
-		expect(props.onClick).not.toHaveBeenCalled();
-
-		await userEvent.click(screen.getByText("bob"));
-
-		expect(props.onClick).toHaveBeenCalled();
-	});
-});
diff --git a/apps/web/src/users/components/__tests__/UserGroups.test.tsx b/apps/web/src/users/components/__tests__/UserGroups.test.tsx
new file mode 100644
index 000000000..c3c7a4a5e
--- /dev/null
+++ b/apps/web/src/users/components/__tests__/UserGroups.test.tsx
@@ -0,0 +1,228 @@
+import type { Group } from "@groups/types";
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { mockApiListGroups } from "@tests/api/groups";
+import { mockApiEditUser, userServerFnMocks } from "@tests/api/users";
+import { createFakeGroup } from "@tests/fake/groups";
+import { createFakeUser } from "@tests/fake/user";
+import { renderWithProviders, renderWithRouter } from "@tests/setup";
+import { beforeEach, describe, expect, it } from "vitest";
+import UserGroups from "../UserGroups";
+
+describe("<UserGroups />", () => {
+	let allGroups: Group[];
+	let member: Group;
+	let other: Group;
+	let userId: number;
+
+	beforeEach(() => {
+		member = createFakeGroup({ id: 1, name: "foo" });
+		other = createFakeGroup({ id: 2, name: "bar" });
+		allGroups = [member, other];
+		userId = createFakeUser().id;
+	});
+
+	it("renders members as radios with remove buttons", async () => {
+		mockApiListGroups(allGroups);
+
+		renderWithProviders(
+			<UserGroups
+				userId={userId}
+				memberGroups={[member]}
+				primaryGroup={member}
+			/>,
+		);
+
+		expect(await screen.findByText("Groups")).toBeInTheDocument();
+		expect(screen.getByRole("radio", { name: "foo" })).toBeChecked();
+		expect(
+			screen.getByRole("button", { name: "Remove foo" }),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole("radio", { name: "No primary group" }),
+		).not.toBeChecked();
+	});
+
+	it("shows an empty message when the user has no groups", async () => {
+		mockApiListGroups(allGroups);
+
+		renderWithProviders(
+			<UserGroups userId={userId} memberGroups={[]} primaryGroup={null} />,
+		);
+
+		expect(
+			await screen.findByText("This user is not a member of any groups."),
+		).toBeInTheDocument();
+	});
+
+	it("hides the combobox when the user is in every group", async () => {
+		mockApiListGroups(allGroups);
+
+		renderWithProviders(
+			<UserGroups
+				userId={userId}
+				memberGroups={[member, other]}
+				primaryGroup={member}
+			/>,
+		);
+
+		expect(
+			await screen.findByText("This user is a member of every group."),
+		).toBeInTheDocument();
+		expect(
+			screen.queryByRole("button", { name: /add group/i }),
+		).not.toBeInTheDocument();
+		expect(screen.getByRole("radio", { name: "foo" })).toBeInTheDocument();
+	});
+
+	it("points to group creation when no groups exist", async () => {
+		mockApiListGroups([]);
+
+		await renderWithRouter(
+			<UserGroups userId={userId} memberGroups={[]} primaryGroup={null} />,
+		);
+
+		expect(
+			await screen.findByText(/No groups have been created yet/),
+		).toBeInTheDocument();
+		expect(screen.getByRole("link", { name: "Manage groups" })).toHaveAttribute(
+			"href",
+			"/administration/groups",
+		);
+		expect(
+			screen.queryByText("This user is not a member of any groups."),
+		).not.toBeInTheDocument();
+	});
+
+	it("adds a group through the combobox", async () => {
+		mockApiListGroups(allGroups);
+		mockApiEditUser(userId, 200, {});
+
+		renderWithProviders(
+			<UserGroups
+				userId={userId}
+				memberGroups={[member]}
+				primaryGroup={member}
+			/>,
+		);
+
+		await userEvent.click(
+			await screen.findByRole("button", { name: /add group/i }),
+		);
+		await userEvent.click(screen.getByRole("option", { name: "bar" }));
+
+		await waitFor(() =>
+			expect(userServerFnMocks.updateUser).toHaveBeenCalledWith({
+				data: { userId, groups: [1, 2] },
+			}),
+		);
+	});
+
+	it("selects 'No primary group' by default when there is no primary group", async () => {
+		mockApiListGroups(allGroups);
+
+		renderWithProviders(
+			<UserGroups
+				userId={userId}
+				memberGroups={[member, other]}
+				primaryGroup={null}
+			/>,
+		);
+
+		expect(
+			await screen.findByRole("radio", { name: "No primary group" }),
+		).toBeChecked();
+		expect(screen.getByRole("radio", { name: "foo" })).not.toBeChecked();
+		expect(screen.getByRole("radio", { name: "bar" })).not.toBeChecked();
+	});
+
+	it("sets the primary group when a radio is selected", async () => {
+		mockApiListGroups(allGroups);
+		mockApiEditUser(userId, 200, {});
+
+		renderWithProviders(
+			<UserGroups
+				userId={userId}
+				memberGroups={[member, other]}
+				primaryGroup={member}
+			/>,
+		);
+
+		await userEvent.click(await screen.findByRole("radio", { name: "bar" }));
+
+		await waitFor(() =>
+			expect(userServerFnMocks.updateUser).toHaveBeenCalledWith({
+				data: { userId, primary_group: 2 },
+			}),
+		);
+	});
+
+	it("clears the primary group when 'No primary group' is selected", async () => {
+		mockApiListGroups(allGroups);
+		mockApiEditUser(userId, 200, {});
+
+		renderWithProviders(
+			<UserGroups
+				userId={userId}
+				memberGroups={[member, other]}
+				primaryGroup={member}
+			/>,
+		);
+
+		await userEvent.click(
+			await screen.findByRole("radio", { name: "No primary group" }),
+		);
+
+		await waitFor(() =>
+			expect(userServerFnMocks.updateUser).toHaveBeenCalledWith({
+				data: { userId, primary_group: null },
+			}),
+		);
+	});
+
+	it("removes a group and clears the primary when the primary is removed", async () => {
+		mockApiListGroups(allGroups);
+		mockApiEditUser(userId, 200, {});
+
+		renderWithProviders(
+			<UserGroups
+				userId={userId}
+				memberGroups={[member, other]}
+				primaryGroup={member}
+			/>,
+		);
+
+		await userEvent.click(
+			await screen.findByRole("button", { name: "Remove foo" }),
+		);
+
+		await waitFor(() =>
+			expect(userServerFnMocks.updateUser).toHaveBeenCalledWith({
+				data: { userId, groups: [2], primary_group: null },
+			}),
+		);
+	});
+
+	it("removes a non-primary group without touching the primary", async () => {
+		mockApiListGroups(allGroups);
+		mockApiEditUser(userId, 200, {});
+
+		renderWithProviders(
+			<UserGroups
+				userId={userId}
+				memberGroups={[member, other]}
+				primaryGroup={member}
+			/>,
+		);
+
+		await userEvent.click(
+			await screen.findByRole("button", { name: "Remove bar" }),
+		);
+
+		await waitFor(() =>
+			expect(userServerFnMocks.updateUser).toHaveBeenCalledWith({
+				data: { userId, groups: [1] },
+			}),
+		);
+	});
+});