diff --git a/web/src/components/form/ArrayField.test.tsx b/web/src/components/form/ArrayField.test.tsx
new file mode 100644
index 0000000000..bd0af1589a
--- /dev/null
+++ b/web/src/components/form/ArrayField.test.tsx
@@ -0,0 +1,446 @@
+/*
+ * Copyright (c) [2026] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation; either version 2 of the License, or (at your option)
+ * any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React from "react";
+import { screen } from "@testing-library/react";
+import { installerRender } from "~/test-utils";
+import { useAppForm } from "~/hooks/form";
+
+type TestFormProps = {
+  defaultValues?: string[];
+  validateOnChange?: (v: string) => string | undefined;
+  validateOnSubmit?: (v: string) => string | undefined;
+  skipDuplicates?: boolean;
+  helperText?: string;
+  /** Simulates a TanStack Form field-level error returned by onSubmitAsync. */
+  fieldError?: string;
+};
+
+function TestForm({
+  defaultValues = [],
+  validateOnChange,
+  validateOnSubmit,
+  skipDuplicates = false,
+  helperText,
+  fieldError,
+}: TestFormProps) {
+  const form = useAppForm({
+    defaultValues: { tags: defaultValues },
+    validators: {
+      onSubmitAsync: fieldError ? async () => ({ fields: { tags: fieldError } }) : undefined,
+    },
+  });
+
+  return (
+    <form.AppForm>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          form.handleSubmit();
+        }}
+      >
+        <form.AppField name="tags">
+          {(field) => (
+            <field.ArrayField
+              label="Tags"
+              validateOnChange={validateOnChange}
+              validateOnSubmit={validateOnSubmit}
+              skipDuplicates={skipDuplicates}
+              helperText={helperText}
+            />
+          )}
+        </form.AppField>
+        <button type="submit">Submit</button>
+        <button type="button">Other</button>
+      </form>
+    </form.AppForm>
+  );
+}
+
+describe("ArrayField", () => {
+  it("renders label and usage", () => {
+    installerRender(<TestForm />);
+    screen.getByText("Tags");
+    screen.getByText(/Enter or Tab to add/);
+  });
+
+  it("renders given existing values", () => {
+    installerRender(<TestForm defaultValues={["alpha", "beta"]} />);
+    screen.getByText("alpha");
+    screen.getByText("beta");
+  });
+
+  describe("adding entries", () => {
+    it("adds a value on Enter", async () => {
+      const { user } = installerRender(<TestForm />);
+      await user.type(screen.getByRole("textbox", { name: "Tags" }), "gamma");
+      await user.keyboard("{Enter}");
+      screen.getByText("gamma");
+    });
+
+    it("adds a value on Tab", async () => {
+      const { user } = installerRender(<TestForm />);
+      await user.type(screen.getByRole("textbox", { name: "Tags" }), "delta");
+      await user.tab();
+      screen.getByText("delta");
+    });
+
+    it("commits the draft on blur", async () => {
+      const { user } = installerRender(<TestForm />);
+      await user.type(screen.getByRole("textbox", { name: "Tags" }), "epsilon");
+      await user.click(screen.getByRole("button", { name: "Other" }));
+      screen.getByText("epsilon");
+    });
+
+    it("does not commit an empty draft on blur", async () => {
+      const { user } = installerRender(<TestForm defaultValues={["alpha"]} />);
+      await user.click(screen.getByRole("textbox", { name: "Tags" }));
+      await user.click(screen.getByRole("button", { name: "Other" }));
+      expect(screen.getAllByRole("option")).toHaveLength(1);
+    });
+  });
+
+  describe("removing entries", () => {
+    it("removes a value via the entry removal button", async () => {
+      const { user } = installerRender(<TestForm defaultValues={["alpha"]} />);
+      await user.click(screen.getByRole("button", { name: "Remove alpha" }));
+      expect(screen.queryByText("alpha")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("editing entries", () => {
+    it("moves an entry to the draft input when clicked", async () => {
+      const { user } = installerRender(<TestForm defaultValues={["alpha"]} />);
+      const input = screen.getByRole("textbox", { name: "Tags" });
+      await user.click(screen.getByRole("option", { name: "alpha" }));
+      expect(screen.queryByRole("option", { name: "alpha" })).not.toBeInTheDocument();
+      expect(input).toHaveValue("alpha");
+    });
+
+    it("puts the active entry back in the input on Enter", async () => {
+      const { user } = installerRender(<TestForm defaultValues={["alpha"]} />);
+      const input = screen.getByRole("textbox", { name: "Tags" });
+      await user.click(input);
+      await user.keyboard("{ArrowLeft}{Enter}");
+      expect(screen.queryByRole("option", { name: "alpha" })).not.toBeInTheDocument();
+      expect(input).toHaveValue("alpha");
+    });
+
+    it("puts the active entry back in the input on Space", async () => {
+      const { user } = installerRender(<TestForm defaultValues={["alpha"]} />);
+      const input = screen.getByRole("textbox", { name: "Tags" });
+      await user.click(input);
+      await user.keyboard("{ArrowLeft}");
+      await user.keyboard(" ");
+      expect(screen.queryByRole("option", { name: "alpha" })).not.toBeInTheDocument();
+      expect(input).toHaveValue("alpha");
+    });
+  });
+
+  describe("validateOnChange", () => {
+    const validateOnChange = (v: string) =>
+      v.startsWith("x") ? "Must not start with x" : undefined;
+
+    it("marks an invalid entry immediately after adding", () => {
+      installerRender(<TestForm defaultValues={["xbad"]} validateOnChange={validateOnChange} />);
+      expect(screen.getByRole("option", { name: /invalid/ })).toBeInTheDocument();
+    });
+
+    it("shows the error block when there are invalid entries", () => {
+      installerRender(<TestForm defaultValues={["xbad"]} validateOnChange={validateOnChange} />);
+      screen.getByText(/Select entries to edit or remove them/);
+    });
+
+    it("removes all invalid entries when clicking the clear button", async () => {
+      const { user } = installerRender(
+        <TestForm defaultValues={["ok", "xbad"]} validateOnChange={validateOnChange} />,
+      );
+      await user.click(screen.getByRole("button", { name: /remove all invalid entries/i }));
+      screen.getByText("ok");
+      expect(screen.queryByText("xbad")).not.toBeInTheDocument();
+    });
+
+    it("opens an invalid entry for editing on Delete instead of removing it", async () => {
+      const { user } = installerRender(
+        <TestForm defaultValues={["xbad"]} validateOnChange={validateOnChange} />,
+      );
+      const input = screen.getByRole("textbox", { name: "Tags" });
+      await user.click(input);
+      await user.keyboard("{ArrowLeft}{Delete}");
+      expect(screen.queryByRole("option", { name: "xbad" })).not.toBeInTheDocument();
+      expect(input).toHaveValue("xbad");
+    });
+  });
+
+  describe("validateOnSubmit", () => {
+    const validateOnSubmit = (v: string) =>
+      v.startsWith("x") ? "Must not start with x" : undefined;
+
+    it("does not mark entries as invalid before submitting", () => {
+      installerRender(<TestForm defaultValues={["xbad"]} validateOnSubmit={validateOnSubmit} />);
+      expect(screen.queryByRole("option", { name: /invalid/ })).not.toBeInTheDocument();
+    });
+
+    it("marks entries as invalid after a failed submit", async () => {
+      const { user } = installerRender(
+        <TestForm
+          defaultValues={["xbad"]}
+          validateOnSubmit={validateOnSubmit}
+          fieldError="Some entries are not valid"
+        />,
+      );
+      await user.click(screen.getByRole("button", { name: "Submit" }));
+      await screen.findByRole("option", { name: /invalid/ });
+    });
+
+    it("shows the error block after a failed submit", async () => {
+      const { user } = installerRender(
+        <TestForm
+          defaultValues={["xbad"]}
+          validateOnSubmit={validateOnSubmit}
+          fieldError="Some entries are not valid"
+        />,
+      );
+      await user.click(screen.getByRole("button", { name: "Submit" }));
+      await screen.findByText(/Select entries to edit or remove them/);
+    });
+
+    it("removes all invalid entries after a failed submit", async () => {
+      const { user } = installerRender(
+        <TestForm
+          defaultValues={["ok", "xbad"]}
+          validateOnSubmit={validateOnSubmit}
+          fieldError="Some entries are not valid"
+        />,
+      );
+      await user.click(screen.getByRole("button", { name: "Submit" }));
+      await user.click(await screen.findByRole("button", { name: /remove all invalid entries/i }));
+      screen.getByText("ok");
+      expect(screen.queryByText("xbad")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("helperText", () => {
+    it("does not show helper text when there are no errors", () => {
+      installerRender(<TestForm helperText="Some hint" />);
+      expect(screen.queryByText(/Some hint/)).not.toBeInTheDocument();
+    });
+
+    it("shows helper text alongside the error block when there are invalid entries", () => {
+      const validateOnChange = (v: string) => (v === "bad" ? "Invalid" : undefined);
+      installerRender(
+        <TestForm
+          defaultValues={["bad"]}
+          validateOnChange={validateOnChange}
+          helperText="Some hint"
+        />,
+      );
+      screen.getByText(/Some hint/);
+    });
+  });
+
+  describe("skipDuplicates", () => {
+    it("does not add an entry already in the list", async () => {
+      const { user } = installerRender(<TestForm defaultValues={["alpha"]} skipDuplicates />);
+      await user.type(screen.getByRole("textbox", { name: "Tags" }), "alpha");
+      await user.keyboard("{Enter}");
+      expect(screen.getAllByText("alpha")).toHaveLength(1);
+    });
+
+    it("skips duplicates when pasting", async () => {
+      const { user } = installerRender(<TestForm defaultValues={["alpha"]} skipDuplicates />);
+      await user.click(screen.getByRole("textbox", { name: "Tags" }));
+      await user.paste("alpha beta");
+      expect(screen.getAllByRole("option")).toHaveLength(2);
+      screen.getByText("beta");
+    });
+  });
+
+  describe("paste", () => {
+    it("adds multiple entries from a paste", async () => {
+      const { user } = installerRender(<TestForm />);
+      await user.click(screen.getByRole("textbox", { name: "Tags" }));
+      await user.paste("alpha beta gamma");
+      screen.getByText("alpha");
+      screen.getByText("beta");
+      screen.getByText("gamma");
+    });
+
+    it("does not intercept a single-token paste", async () => {
+      const { user } = installerRender(<TestForm />);
+      const input = screen.getByRole("textbox", { name: "Tags" });
+      await user.click(input);
+      await user.paste("alpha");
+      expect(input).toHaveValue("alpha");
+      expect(screen.queryByRole("option", { name: "alpha" })).not.toBeInTheDocument();
+    });
+  });
+
+  describe("keyboard navigation", () => {
+    it("does not activate navigation on Backspace when the draft is not empty", async () => {
+      const { user } = installerRender(<TestForm defaultValues={["alpha"]} />);
+      await user.type(screen.getByRole("textbox", { name: "Tags" }), "partial");
+      await user.keyboard("{Backspace}");
+      expect(screen.getByRole("option", { name: "alpha" })).toHaveAttribute(
+        "aria-selected",
+        "false",
+      );
+    });
+
+    it("does not activate navigation on ArrowLeft when the draft is not empty", async () => {
+      const { user } = installerRender(<TestForm defaultValues={["alpha"]} />);
+      await user.type(screen.getByRole("textbox", { name: "Tags" }), "partial");
+      await user.keyboard("{ArrowLeft}");
+      expect(screen.getByRole("option", { name: "alpha" })).toHaveAttribute(
+        "aria-selected",
+        "false",
+      );
+    });
+
+    it("activates the last entry on Backspace when the draft is empty", async () => {
+      const { user } = installerRender(<TestForm defaultValues={["alpha"]} />);
+      await user.click(screen.getByRole("textbox", { name: "Tags" }));
+      await user.keyboard("{Backspace}");
+      expect(screen.getByRole("option", { name: "alpha" })).toHaveAttribute(
+        "aria-selected",
+        "true",
+      );
+    });
+
+    it("activates the last entry on ArrowLeft when the draft is empty", async () => {
+      const { user } = installerRender(<TestForm defaultValues={["alpha"]} />);
+      await user.click(screen.getByRole("textbox", { name: "Tags" }));
+      await user.keyboard("{ArrowLeft}");
+      expect(screen.getByRole("option", { name: "alpha" })).toHaveAttribute(
+        "aria-selected",
+        "true",
+      );
+    });
+
+    it("removes the active entry on Delete", async () => {
+      const { user } = installerRender(<TestForm defaultValues={["alpha"]} />);
+      await user.click(screen.getByRole("textbox", { name: "Tags" }));
+      await user.keyboard("{ArrowLeft}{Delete}");
+      expect(screen.queryByText("alpha")).not.toBeInTheDocument();
+    });
+
+    it("removes the active entry on Backspace", async () => {
+      const { user } = installerRender(<TestForm defaultValues={["alpha"]} />);
+      await user.click(screen.getByRole("textbox", { name: "Tags" }));
+      await user.keyboard("{ArrowLeft}{Backspace}");
+      expect(screen.queryByText("alpha")).not.toBeInTheDocument();
+    });
+
+    it("moves to the previous entry on ArrowLeft", async () => {
+      const { user } = installerRender(<TestForm defaultValues={["alpha", "beta"]} />);
+      await user.click(screen.getByRole("textbox", { name: "Tags" }));
+      await user.keyboard("{Backspace}");
+      expect(screen.getByRole("option", { name: "beta" })).toHaveAttribute("aria-selected", "true");
+      await user.keyboard("{ArrowLeft}");
+      expect(screen.getByRole("option", { name: "alpha" })).toHaveAttribute(
+        "aria-selected",
+        "true",
+      );
+    });
+
+    it("moves to the previous entry on ArrowUp", async () => {
+      const { user } = installerRender(<TestForm defaultValues={["alpha", "beta"]} />);
+      await user.click(screen.getByRole("textbox", { name: "Tags" }));
+      await user.keyboard("{Backspace}{ArrowUp}");
+      expect(screen.getByRole("option", { name: "alpha" })).toHaveAttribute(
+        "aria-selected",
+        "true",
+      );
+    });
+
+    it("moves to the next entry on ArrowRight", async () => {
+      const { user } = installerRender(<TestForm defaultValues={["alpha", "beta"]} />);
+      await user.click(screen.getByRole("textbox", { name: "Tags" }));
+      await user.keyboard("{Backspace}{ArrowLeft}");
+      expect(screen.getByRole("option", { name: "alpha" })).toHaveAttribute(
+        "aria-selected",
+        "true",
+      );
+      await user.keyboard("{ArrowRight}");
+      expect(screen.getByRole("option", { name: "beta" })).toHaveAttribute("aria-selected", "true");
+    });
+
+    it("moves to the next entry on ArrowDown", async () => {
+      const { user } = installerRender(<TestForm defaultValues={["alpha", "beta"]} />);
+      await user.click(screen.getByRole("textbox", { name: "Tags" }));
+      await user.keyboard("{Backspace}{ArrowLeft}{ArrowDown}");
+      expect(screen.getByRole("option", { name: "beta" })).toHaveAttribute("aria-selected", "true");
+    });
+
+    it("deactivates navigation on ArrowRight at the last entry", async () => {
+      const { user } = installerRender(<TestForm defaultValues={["alpha"]} />);
+      await user.click(screen.getByRole("textbox", { name: "Tags" }));
+      await user.keyboard("{Backspace}{ArrowRight}");
+      expect(screen.getByRole("option", { name: "alpha" })).toHaveAttribute(
+        "aria-selected",
+        "false",
+      );
+    });
+
+    it("jumps to the first entry on Home", async () => {
+      const { user } = installerRender(<TestForm defaultValues={["alpha", "beta"]} />);
+      await user.click(screen.getByRole("textbox", { name: "Tags" }));
+      await user.keyboard("{Backspace}{Home}");
+      expect(screen.getByRole("option", { name: "alpha" })).toHaveAttribute(
+        "aria-selected",
+        "true",
+      );
+    });
+
+    it("jumps to the last entry on End", async () => {
+      const { user } = installerRender(<TestForm defaultValues={["alpha", "beta"]} />);
+      await user.click(screen.getByRole("textbox", { name: "Tags" }));
+      await user.keyboard("{ArrowLeft}{Home}{End}");
+      expect(screen.getByRole("option", { name: "beta" })).toHaveAttribute("aria-selected", "true");
+    });
+
+    it("deactivates navigation on Escape", async () => {
+      const { user } = installerRender(<TestForm defaultValues={["alpha"]} />);
+      await user.click(screen.getByRole("textbox", { name: "Tags" }));
+      await user.keyboard("{Backspace}{Escape}");
+      expect(screen.getByRole("option", { name: "alpha" })).toHaveAttribute(
+        "aria-selected",
+        "false",
+      );
+    });
+
+    it("deactivates navigation on Tab", async () => {
+      const { user } = installerRender(<TestForm defaultValues={["alpha"]} />);
+      await user.click(screen.getByRole("textbox", { name: "Tags" }));
+      await user.keyboard("{Backspace}");
+      expect(screen.getByRole("option", { name: "alpha" })).toHaveAttribute(
+        "aria-selected",
+        "true",
+      );
+      await user.tab();
+      expect(screen.getByRole("option", { name: "alpha" })).toHaveAttribute(
+        "aria-selected",
+        "false",
+      );
+    });
+  });
+});
diff --git a/web/src/components/form/ArrayField.tsx b/web/src/components/form/ArrayField.tsx
new file mode 100644
index 0000000000..528bbaf9de
--- /dev/null
+++ b/web/src/components/form/ArrayField.tsx
@@ -0,0 +1,636 @@
+/*
+ * Copyright (c) [2026] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation; either version 2 of the License, or (at your option)
+ * any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React, { useState, useRef } from "react";
+import { fork, sift, unique } from "radashi";
+import { sprintf } from "sprintf-js";
+import {
+  FormGroup,
+  Label,
+  TextInputGroup,
+  TextInputGroupMain,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Button,
+} from "@patternfly/react-core";
+import { useFieldContext } from "~/hooks/form-contexts";
+import { _ } from "~/i18n";
+
+/**
+ * Keys owned by the entry navigation handler when an entry is active.
+ *
+ * Space is included alongside Enter to match the ARIA listbox pattern
+ * (https://www.w3.org/WAI/ARIA/apg/patterns/listbox/), where both keys
+ * activate the focused option. Any key outside this set exits navigation
+ * without consuming the event, so Tab moves focus away and regular characters
+ * land in the draft input normally.
+ */
+const NAVIGATION_KEYS = new Set([
+  " ",
+  "ArrowLeft",
+  "ArrowUp",
+  "ArrowRight",
+  "ArrowDown",
+  "Home",
+  "End",
+  "Enter",
+  "Delete",
+  "Backspace",
+]);
+
+/** Applies `normalize` to `value` if provided; otherwise returns `value` unchanged. */
+function normalizeValue(value: string, normalize?: (v: string) => string): string {
+  return normalize ? normalize(value) : value;
+}
+
+/**
+ * Trims, normalizes, and optionally validates a raw draft string.
+ *
+ * Returns `null` for empty or whitespace-only input so callers can skip
+ * adding an empty entry. Otherwise returns the normalized value and any
+ * validation error.
+ */
+function processDraft(
+  raw: string,
+  normalize?: (v: string) => string,
+  validate?: (v: string) => string | undefined,
+): { normalized: string; error: string | undefined } | null {
+  const trimmed = raw.trim();
+  if (!trimmed) return null;
+  const normalized = normalizeValue(trimmed, normalize);
+  return { normalized, error: validate?.(normalized) };
+}
+
+/** Builds the screen-reader announcement for a multi-entry paste. Pure function. */
+function pasteAnnouncement(
+  added: number,
+  skipped: number,
+  valid: string[],
+  invalid: string[],
+): string {
+  if (added === 0) return sprintf(_("%d duplicates skipped."), skipped);
+  if (skipped === 0)
+    return invalid.length === 0
+      ? sprintf(_("%d entries added."), valid.length)
+      : sprintf(_("%d entries added, %d invalid."), added, invalid.length);
+  return invalid.length === 0
+    ? sprintf(_("%d entries added, %d duplicates skipped."), valid.length, skipped)
+    : sprintf(
+        _("%d entries added, %d invalid, %d duplicates skipped."),
+        added,
+        invalid.length,
+        skipped,
+      );
+}
+
+/** Splits pasted text on whitespace and commas, returning non-empty entries. */
+function parsePasteEntries(text: string): string[] {
+  return sift(text.split(/[\s,]+/).map((t) => t.trim()));
+}
+
+/**
+ * Returns entries from `normalized` not already in `existing`,
+ * also deduplicating within `normalized` itself.
+ *
+ * Prepends `existing` before deduplication so `unique` sees existing entries
+ * first and drops any later occurrence of the same value. Slicing off the
+ * first `existing.length` elements then yields only the genuinely new entries.
+ */
+function filterNew(existing: string[], normalized: string[]): string[] {
+  return unique([...existing, ...normalized]).slice(existing.length);
+}
+
+type EntryProps = {
+  /** Raw stored value, not necessarily the display form. */
+  item: string;
+  index: number;
+  /** Whether this entry is currently focused during keyboard navigation. */
+  isActive: boolean;
+  /** Validation error message; undefined means the entry is valid. */
+  error?: string;
+  /** Formats the raw value for display and aria labels. */
+  toLabel: (v: string) => string;
+  onEdit: (index: number) => void;
+  onRemove: (index: number) => void;
+  /** Returns a stable DOM id used for aria-activedescendant. */
+  valueId: (index: number) => string;
+};
+
+/**
+ * A single committed entry, rendered as a listbox option.
+ *
+ * Both the visual color and the aria-label carry validation state, so
+ * sighted and assistive-technology users receive the same information.
+ */
+function Entry({ item, index, isActive, error, toLabel, onEdit, onRemove, valueId }: EntryProps) {
+  // preventDefault keeps focus on the input; the edit moves the value back to draft.
+  const handleMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault();
+    onEdit(index);
+  };
+
+  // preventDefault avoids blur; stopPropagation prevents the span from triggering edit.
+  const handleCloseMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleRemove = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onRemove(index);
+  };
+
+  const labelText = toLabel(item);
+
+  return (
+    <span style={{ cursor: "pointer" }} onMouseDown={handleMouseDown}>
+      <Label
+        id={valueId(index)}
+        role="option"
+        aria-selected={isActive}
+        aria-label={error ? sprintf(_("%s — invalid: %s"), labelText, error) : labelText}
+        color={error ? "red" : undefined}
+        closeBtnProps={{
+          tabIndex: -1,
+          onMouseDown: handleCloseMouseDown,
+        }}
+        onClose={handleRemove}
+        closeBtnAriaLabel={sprintf(_("Remove %s"), labelText)}
+        style={{
+          outline: isActive
+            ? "2px solid var(--pf-v6-global--primary-color--100, #0066cc)"
+            : undefined,
+          outlineOffset: isActive ? 1 : undefined,
+        }}
+      >
+        {labelText}
+      </Label>
+    </span>
+  );
+}
+
+type MultiValueFieldProps = {
+  /**
+   * Label rendered by PatternFly's FormGroup.
+   *
+   * Can be a plain string or a ReactNode (e.g. `LabelText` with a suffix).
+   * When a ReactNode is passed, also provide `inputAriaLabel` so assistive
+   * technologies receive a plain-text version of the label.
+   */
+  label: React.ReactNode;
+
+  /**
+   * Plain-text label for assistive technologies.
+   *
+   * Used as the accessible name of the text input and as the base for the
+   * listbox accessible name. Inferred from `label` when it is a plain string;
+   * required when `label` is a ReactNode.
+   */
+  inputAriaLabel?: string;
+
+  /**
+   * Per-entry validator that runs on every commit.
+   *
+   * Invalid entries are marked and announced immediately, before the form is
+   * submitted. Use for format checks that are always safe to run eagerly,
+   * such as address or URL format.
+   */
+  validateOnChange?: (value: string) => string | undefined;
+
+  /**
+   * Per-entry validator that runs only after the first failed form submit.
+   *
+   * Stays silent until TanStack Form sets a field-level error on this field.
+   * Use for checks that would be distracting before the user attempts to
+   * submit, such as cross-field or server-validated rules.
+   */
+  validateOnSubmit?: (value: string) => string | undefined;
+
+  /**
+   * Normalizes user input before it is committed.
+   *
+   * Runs on every added entry, including pasted ones. Use for trimming,
+   * casing, or any formatting rule applied at commit time.
+   */
+  normalize?: (value: string) => string;
+
+  /**
+   * Formats a stored value for display and accessible labels.
+   *
+   * When omitted, the stored value is used as-is. Useful when the stored
+   * form differs from the human-readable form, e.g. a code vs. a name.
+   */
+  displayValue?: (value: string) => string;
+
+  /**
+   * Converts a stored value back to a draft string for editing.
+   *
+   * Called when an entry is moved into the text input for modification.
+   * When omitted, the stored value is used as-is.
+   */
+  toDraft?: (value: string) => string;
+
+  /**
+   * When true, skips entries that are already in the list.
+   *
+   * Applies to both single commits and multi-token pastes.
+   */
+  skipDuplicates?: boolean;
+
+  /**
+   * Additional guidance shown alongside the error messages.
+   *
+   * Only rendered when the field has errors. Use to explain the expected
+   * format or other context that helps the user fix invalid entries.
+   */
+  helperText?: React.ReactNode;
+
+  /** Disables the text input and all entry interactions. */
+  isDisabled?: boolean;
+};
+
+/**
+ * A form field for entering and managing a list of string values.
+ *
+ * Users type in a text input and commit entries one at a time via Enter,
+ * Tab, or blur. Each committed entry appears as a labeled token inside the
+ * field. Entries can be edited by clicking them or selecting them with the
+ * keyboard, and removed individually via the close button or Backspace/Delete.
+ * A clear-invalid button removes all invalid entries at once when any are present.
+ *
+ * Keyboard navigation follows the ARIA listbox pattern: ArrowLeft/Right/Up/Down
+ * move between entries, Enter and Space activate the focused one, Home/End jump
+ * to the first or last, and Escape exits navigation. Pasting a whitespace- or
+ * comma-separated string adds all tokens at once.
+ *
+ * Two validation modes are available:
+ * - `validateOnChange`: runs on every commit; marks invalid entries right away.
+ * - `validateOnSubmit`: runs only after TanStack Form sets a field-level error
+ *   (i.e. after the first failed submit attempt); stays silent until then.
+ *
+ * Both sighted and assistive-technology users receive equivalent feedback:
+ * invalid entries carry an aria-label describing the error; add, edit, and
+ * remove actions are announced via a live region.
+ *
+ * Must be used inside a TanStack Form `AppField` context that provides a
+ * `string[]` field value.
+ *
+ * @remarks
+ * **Keyboard focus model**
+ *
+ * This component uses `aria-activedescendant` instead of roving tabIndex.
+ *
+ * The MDN guide on keyboard-navigable widgets
+ * (https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Keyboard-navigable_JavaScript_widgets)
+ * describes two approaches: roving tabIndex (move DOM focus between elements)
+ * and `aria-activedescendant` (keep DOM focus on one element and point to the
+ * active descendant by id).
+ *
+ * Roving tabIndex was tried first but did not work reliably here. When an
+ * `onClick` prop is passed to PatternFly's `Label` component, PF renders the
+ * label content inside a `<button>`, which adds an extra tab stop and
+ * interferes with focus management. Focus would jump into the button's
+ * internals rather than land on the entry element as expected.
+ *
+ * The fix was to not pass `onClick` to `Label` at all and instead handle
+ * pointer interaction via `onMouseDown` + `preventDefault()` on a wrapper
+ * `<span>`. With that, entries are rendered as plain non-focusable elements
+ * inside a `role="listbox"` container, the `<input>` always holds real DOM
+ * focus, and the active entry is communicated to assistive technology via
+ * `aria-activedescendant` on the input pointing to the entry's id. Keyboard
+ * navigation updates `aria-activedescendant` without touching DOM focus.
+ *
+ * @todo Support a layout option where entries render one per line, for use
+ *   cases with long values such as SSH public keys.
+ * @todo Rework the layout so entries sit above the input row, with a visual
+ *   separator and the usage hint inline next to the input.
+ * @todo Add clipboard copy support; today only paste is intercepted.
+ * @todo Replace the component-local live region with a shared global one to
+ *   avoid multiple `role="status"` elements on the same page.
+ */
+export default function ArrayField({
+  label,
+  inputAriaLabel,
+  helperText,
+  isDisabled = false,
+  validateOnChange,
+  validateOnSubmit,
+  normalize,
+  displayValue,
+  toDraft,
+  skipDuplicates = false,
+}: MultiValueFieldProps) {
+  const field = useFieldContext<string[]>();
+  const value = field.state.value;
+  const onChange = (next: string[]) => field.handleChange(next);
+  const fieldErrors = sift(field.state.meta.errors);
+  const ariaLabel = inputAriaLabel ?? (typeof label === "string" ? label : undefined);
+
+  /**
+   * Returns the validation error for an entry, combining both validators.
+   *
+   * `validateOnChange` always runs. `validateOnSubmit` only runs once the
+   * field has a TanStack Form error, so it stays silent until the first
+   * failed submit attempt.
+   */
+  const errorFor = (item: string): string | undefined =>
+    validateOnChange?.(item) || (fieldErrors.length > 0 ? validateOnSubmit?.(item) : undefined);
+
+  const [draft, setDraft] = useState("");
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [announcement, setAnnouncement] = useState("");
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const toLabel = (item: string) => (displayValue ? displayValue(item) : item);
+  const asDraft = (item: string) => (toDraft ? toDraft(item) : item);
+  const valueId = (index: number) => `${field.name}-${index}`;
+  const hintId = `${field.name}-hint`;
+
+  /**
+   * TODO: Refactor announcements to use a shared global live region component
+   * instead of this local hidden status element. This would allow multiple
+   * components to share a single live region, simplifying DOM structure and
+   * improving screen reader experience.
+   *
+   * - See Inclusive Components: https://inclusive-components.design/notifications/#live-regions
+   * - Illustrative example of bad live region usage: "The Many Lives of Notifications"
+   *   https://www.youtube.com/watch?v=W5YAaLLBKhQ&t=190s
+   * - https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-1/
+   * - https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/
+   *
+   * That future shared global live region should handle the edge case where the
+   * same message is announced twice in a row — e.g. adding the same value twice
+   * produces "alpha added." twice, or navigating away from an entry and back
+   * announces it twice. Some screen readers suppress the second announcement
+   * when the live region content has not changed between updates. The
+   * documented fix is the clear-then-set pattern, but it adds complexity not
+   * worth carrying in a temporary implementation.
+   * https://dev.to/dkoppenhagen/when-your-live-region-isnt-live-fixing-aria-live-in-angular-react-and-vue-1g0j
+   */
+  const announce = (msg: string) => setAnnouncement(msg);
+
+  const clearActive = () => setActiveIndex(-1);
+
+  const commit = (raw: string) => {
+    const result = processDraft(raw, normalize, validateOnChange);
+    if (!result) return;
+    const { normalized, error } = result;
+
+    if (skipDuplicates && value.includes(normalized)) {
+      setDraft("");
+      announce(sprintf(_("%s already exists, skipped."), toLabel(normalized)));
+      return;
+    }
+
+    onChange([...value, normalized]);
+    setDraft("");
+    clearActive();
+    announce(
+      error
+        ? sprintf(_("%s added but is invalid: %s. Select to edit."), normalized, error)
+        : sprintf(_("%s added."), normalized),
+    );
+  };
+
+  const removeAt = (index: number) => {
+    const item = value[index];
+    const newValue = value.filter((_, i) => i !== index);
+    onChange(newValue);
+    announce(sprintf(_("%s removed."), toLabel(item)));
+
+    if (newValue.length === 0) clearActive();
+    else if (index >= newValue.length) setActiveIndex(newValue.length - 1);
+  };
+
+  const editAt = (index: number) => {
+    const item = value[index];
+    const pending = processDraft(draft, normalize, validateOnChange);
+    const remaining = value.filter((_, i) => i !== index);
+    onChange(pending ? [...remaining, pending.normalized] : remaining);
+    setDraft(asDraft(item));
+    clearActive();
+    announce(sprintf(_("%s moved to input for editing."), toLabel(item)));
+    inputRef.current?.focus();
+  };
+
+  const clearInvalid = () => {
+    const [valid, invalid] = fork(value, (v) => !errorFor(v));
+    onChange(valid);
+    clearActive();
+    announce(sprintf(_("%d invalid entries removed."), invalid.length));
+    inputRef.current?.focus();
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const navigating = activeIndex >= 0;
+
+    if (navigating) {
+      if (!NAVIGATION_KEYS.has(e.key)) {
+        // Tab, Escape, or any other key: exit navigation without consuming the event.
+        // Tab keeps its default so focus can move away; regular characters land in the draft.
+        clearActive();
+        return;
+      }
+
+      e.preventDefault();
+
+      switch (e.key) {
+        case "ArrowLeft":
+        case "ArrowUp":
+          if (activeIndex > 0) setActiveIndex((i) => i - 1);
+          break;
+        case "ArrowRight":
+        case "ArrowDown":
+          if (activeIndex < value.length - 1) setActiveIndex((i) => i + 1);
+          else clearActive();
+          break;
+        case "Home":
+          setActiveIndex(0);
+          break;
+        case "End":
+          setActiveIndex(value.length - 1);
+          break;
+        case "Enter":
+        case " ":
+          editAt(activeIndex);
+          break;
+        case "Delete":
+        case "Backspace":
+          if (errorFor(value[activeIndex])) editAt(activeIndex);
+          else removeAt(activeIndex);
+          break;
+      }
+      return;
+    }
+
+    switch (e.key) {
+      case "Enter":
+        e.preventDefault();
+        commit(draft);
+        return;
+      case "Tab":
+        if (draft.trim()) {
+          e.preventDefault();
+          commit(draft);
+        }
+        return;
+      case "ArrowLeft":
+      case "Backspace":
+        if (draft === "" && value.length > 0) {
+          e.preventDefault();
+          setActiveIndex(value.length - 1);
+          announce(toLabel(value[value.length - 1]));
+        }
+    }
+  };
+
+  const onPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    const entries = parsePasteEntries(e.clipboardData.getData("text"));
+    if (entries.length <= 1) return;
+    e.preventDefault();
+
+    const normalized = entries.map((t) => normalizeValue(t, normalize));
+    const toAdd = skipDuplicates ? filterNew(value, normalized) : normalized;
+    const [valid, invalid] = fork(toAdd, (n) => !validateOnChange?.(n));
+    const skipped = normalized.length - toAdd.length;
+    const added = toAdd.length;
+
+    onChange([...value, ...toAdd]);
+    setDraft("");
+    clearActive();
+
+    announce(pasteAnnouncement(added, skipped, valid, invalid));
+  };
+
+  const hasErrors = value.some(errorFor);
+  const entryErrors = unique(sift(value.map(errorFor)));
+  const hasAnyError = hasErrors || fieldErrors.length > 0;
+
+  return (
+    <FormGroup fieldId={field.name} label={label}>
+      <div onClick={() => inputRef.current?.focus()}>
+        <TextInputGroup
+          isDisabled={isDisabled}
+          className={(hasAnyError && "pf-m-error") || undefined}
+        >
+          <TextInputGroupMain
+            innerRef={inputRef}
+            value={draft}
+            aria-activedescendant={activeIndex >= 0 ? valueId(activeIndex) : undefined}
+            onChange={(_, v) => {
+              setDraft(v);
+              clearActive();
+            }}
+            onBlur={() => {
+              if (draft.trim()) commit(draft);
+            }}
+            inputProps={{
+              id: field.name,
+              "aria-describedby": hintId,
+              ...(ariaLabel && { "aria-label": ariaLabel }),
+              onKeyDown,
+              onPaste,
+            }}
+            style={{ flexBasis: "8rem", flexGrow: 1, display: "block" }}
+          >
+            {value.length > 0 && (
+              <div
+                role="listbox"
+                aria-label={ariaLabel ? sprintf(_("%s entries"), ariaLabel) : undefined}
+                style={{ display: "flex", flexWrap: "wrap", gap: "0.25rem", padding: "0.2rem 0" }}
+              >
+                {value.map((item, index) => {
+                  const error = errorFor(item);
+
+                  return (
+                    <Entry
+                      key={index}
+                      index={index}
+                      item={item}
+                      isActive={index === activeIndex}
+                      error={error}
+                      toLabel={toLabel}
+                      onEdit={editAt}
+                      onRemove={removeAt}
+                      valueId={valueId}
+                    />
+                  );
+                })}
+              </div>
+            )}
+          </TextInputGroupMain>
+        </TextInputGroup>
+      </div>
+
+      <div
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        style={{
+          position: "absolute",
+          width: 1,
+          height: 1,
+          overflow: "hidden",
+          clip: "rect(0,0,0,0)",
+          whiteSpace: "nowrap",
+        }}
+      >
+        {announcement}
+      </div>
+
+      <FormHelperText>
+        <HelperText>
+          {!hasErrors &&
+            fieldErrors.map((err, i) => (
+              <HelperTextItem key={i} variant="error">
+                {err as string}
+              </HelperTextItem>
+            ))}
+          {hasErrors && (
+            <>
+              {entryErrors.map((err, i) => (
+                <HelperTextItem key={i} variant="error">
+                  {err}
+                </HelperTextItem>
+              ))}
+              <HelperTextItem variant="error" screenReaderText="">
+                {_("Select entries to edit or remove them.")} {_("Or ")}{" "}
+                <Button variant="link" isInline onClick={clearInvalid}>
+                  {_("remove all invalid entries")}
+                </Button>
+                {"."}
+              </HelperTextItem>
+            </>
+          )}
+          <HelperTextItem id={hintId} variant="indeterminate" screenReaderText="">
+            {hasAnyError && helperText && <>{helperText}. </>}
+            {_(
+              "Enter or Tab to add; arrow keys to navigate entries, Escape to exit; Backspace or Delete to remove.",
+            )}
+          </HelperTextItem>
+        </HelperText>
+      </FormHelperText>
+    </FormGroup>
+  );
+}
diff --git a/web/src/components/network/ConnectionForm.test.tsx b/web/src/components/network/ConnectionForm.test.tsx
index 8484c733c3..91e6aaeb9f 100644
--- a/web/src/components/network/ConnectionForm.test.tsx
+++ b/web/src/components/network/ConnectionForm.test.tsx
@@ -158,12 +158,18 @@ describe("ConnectionForm", () => {
 
     await user.click(screen.getByLabelText("IPv4 Settings"));
     await user.click(screen.getByRole("option", { name: /^Manual/ }));
-    await user.type(screen.getByLabelText("IPv4 Addresses"), "192.168.1.100 192.168.1.200/12");
+    await user.type(
+      screen.getByLabelText("IPv4 Addresses"),
+      "192.168.1.100{Enter}192.168.1.200/12{Enter}",
+    );
     await user.type(screen.getByLabelText("IPv4 Gateway (optional)"), "192.168.1.1");
 
     await user.click(screen.getByLabelText("IPv6 Settings"));
     await user.click(screen.getByRole("option", { name: /^Manual/ }));
-    await user.type(screen.getByLabelText("IPv6 Addresses"), "2001:db8::1 2001:db8::2/24");
+    await user.type(
+      screen.getByLabelText("IPv6 Addresses"),
+      "2001:db8::1{Enter}2001:db8::2/24{Enter}",
+    );
     await user.type(screen.getByLabelText("IPv6 Gateway (optional)"), "::1");
 
     await user.click(screen.getByRole("button", { name: "Accept" }));
@@ -196,7 +202,7 @@ describe("ConnectionForm", () => {
     it("shows the DNS servers field when the checkbox is checked", async () => {
       const { user } = installerRender(<ConnectionForm />);
       await user.click(screen.getByLabelText("Use custom DNS"));
-      screen.getByRole("textbox", { name: "DNS servers" });
+      screen.getByLabelText("DNS servers");
     });
 
     it("submits with parsed nameservers when checkbox is checked", async () => {
@@ -204,8 +210,8 @@ describe("ConnectionForm", () => {
       await user.type(screen.getByLabelText("Name"), "Testing Connection 1");
       await user.click(screen.getByLabelText("Use custom DNS"));
       await user.type(
-        screen.getByRole("textbox", { name: "DNS servers" }),
-        "8.8.8.8 1.1.1.1 2001:db8::1",
+        screen.getByLabelText("DNS servers"),
+        "8.8.8.8{Enter}1.1.1.1{Enter}2001:db8::1{Enter}",
       );
       await user.click(screen.getByRole("button", { name: "Accept" }));
       await waitFor(() =>
@@ -220,7 +226,7 @@ describe("ConnectionForm", () => {
       await user.type(screen.getByLabelText("Name"), "Testing Connection 1");
       const checkbox = screen.getByRole("checkbox", { name: "Use custom DNS" });
       await user.click(checkbox);
-      await user.type(screen.getByRole("textbox", { name: "DNS servers" }), "8.8.8.8");
+      await user.type(screen.getByLabelText("DNS servers"), "8.8.8.8{Enter}");
       await user.click(checkbox);
       expect(checkbox).not.toBeChecked();
       await user.click(screen.getByRole("button", { name: "Accept" }));
@@ -239,7 +245,7 @@ describe("ConnectionForm", () => {
     it("shows the DNS search domains field when the checkbox is checked", async () => {
       const { user } = installerRender(<ConnectionForm />);
       await user.click(screen.getByLabelText("Use custom DNS search domains"));
-      screen.getByRole("textbox", { name: "DNS search domains" });
+      screen.getByLabelText("DNS search domains");
     });
 
     it("submits with parsed dnsSearchList when checkbox is checked", async () => {
@@ -247,8 +253,8 @@ describe("ConnectionForm", () => {
       await user.type(screen.getByLabelText("Name"), "Testing Connection 1");
       await user.click(screen.getByLabelText("Use custom DNS search domains"));
       await user.type(
-        screen.getByRole("textbox", { name: "DNS search domains" }),
-        "example.com local.lan",
+        screen.getByLabelText("DNS search domains"),
+        "example.com{Enter}local.lan{Enter}",
       );
       await user.click(screen.getByRole("button", { name: "Accept" }));
       await waitFor(() =>
@@ -263,7 +269,7 @@ describe("ConnectionForm", () => {
       await user.type(screen.getByLabelText("Name"), "Testing Connection 1");
       const checkbox = screen.getByRole("checkbox", { name: "Use custom DNS search domains" });
       await user.click(checkbox);
-      await user.type(screen.getByRole("textbox", { name: "DNS search domains" }), "example.com");
+      await user.type(screen.getByLabelText("DNS search domains"), "example.com{Enter}");
       await user.click(checkbox);
       expect(checkbox).not.toBeChecked();
       await user.click(screen.getByRole("button", { name: "Accept" }));
diff --git a/web/src/components/network/ConnectionForm.tsx b/web/src/components/network/ConnectionForm.tsx
index 1854ac09db..78e5bda7da 100644
--- a/web/src/components/network/ConnectionForm.tsx
+++ b/web/src/components/network/ConnectionForm.tsx
@@ -33,7 +33,6 @@ import {
   FormHelperText,
   HelperText,
   HelperTextItem,
-  TextArea,
   TextInput,
 } from "@patternfly/react-core";
 import Page from "~/components/core/Page";
@@ -47,30 +46,34 @@ import { formOptions } from "@tanstack/react-form";
 import { useAppForm, mergeFormDefaults } from "~/hooks/form";
 import { useDevices } from "~/hooks/model/system/network";
 import { NETWORK } from "~/routes/paths";
-import { buildAddress } from "~/utils/network";
+import {
+  buildAddress,
+  isValidIPv4,
+  isValidIPv6,
+  isValidIPv4Address,
+  isValidIPv6Address,
+  isValidNameserver,
+  isValidDNSSearchDomain,
+} from "~/utils/network";
+import { isEmpty, shake } from "radashi";
 import { _ } from "~/i18n";
 
 const IPV4_DEFAULT_PREFIX = 24;
 const IPV6_DEFAULT_PREFIX = 64;
 
-/** Splits a space/newline separated string into a trimmed, non-empty token array. */
-const parseTokens = (raw: string): string[] =>
-  raw
-    .split(/[\s\n]+/)
-    .map((s) => s.trim())
-    .filter(Boolean);
-
-/** Ensures a CIDR string has a prefix, adding a protocol-appropriate default if missing. */
-const withPrefix = (address: string): string => {
-  if (address.includes("/")) return address;
-  return address.includes(":")
-    ? `${address}/${IPV6_DEFAULT_PREFIX}`
-    : `${address}/${IPV4_DEFAULT_PREFIX}`;
+/**
+ * Maps form mode values to their corresponding {@link ConnectionMethod}.
+ *
+ * "unset" is intentionally absent: omitting it causes the Connection
+ * constructor to write no method, delegating the decision to NetworkManager.
+ * This map can be dropped once the form mode values align with
+ * {@link ConnectionMethod} enum values.
+ */
+const MODE_TO_METHOD: Record<string, ConnectionMethod> = {
+  auto: ConnectionMethod.AUTO,
+  manual: ConnectionMethod.MANUAL,
 };
 
-/** Parses a space/newline separated string of addresses into IPAddress objects. */
-const parseAddresses = (raw: string) => parseTokens(raw).map(withPrefix).map(buildAddress);
-
 /**
  * Shared form options for ConnectionForm and its `withForm` based
  * sub-components
@@ -84,32 +87,152 @@ export const connectionFormOptions = formOptions({
     iface: "",
     ifaceMac: "",
     ipv4Mode: "unset",
-    addresses4: "",
+    addresses4: [] as string[],
     gateway4: "",
     ipv6Mode: "unset",
-    addresses6: "",
+    addresses6: [] as string[],
     gateway6: "",
-    nameservers: "",
-    dnsSearchList: "",
-    useCustomDns: false,
-    useCustomDnsSearch: false,
+    nameservers: [] as string[],
+    dnsSearchList: [] as string[],
+    customDns: false,
+    customDnsSearch: false,
     bindingMode: "none" as ConnectionBindingMode,
   },
 });
 
+type FormValues = typeof connectionFormOptions.defaultValues;
+type FormFieldErrors = Partial<Record<keyof FormValues, string>>;
+
 /**
- * Maps form mode values to their corresponding {@link ConnectionMethod}.
+ * Returns an error when the given list is active and empty or has invalid entries.
+ * Returns undefined when inactive or when all entries are valid.
+ */
+function validateActiveList(
+  active: boolean,
+  values: string[],
+  isValid: (v: string) => boolean,
+  emptyMsg: string,
+  invalidMsg: string,
+): string | undefined {
+  if (!active) return undefined;
+  if (values.length === 0) return emptyMsg;
+  if (values.some((v) => !isValid(v))) return invalidMsg;
+}
+
+/**
+ * Returns an error for a gateway value under its protocol mode.
  *
- * "unset" is intentionally absent: omitting it causes the Connection
- * constructor to write no method, delegating the decision to NetworkManager.
- * This map can be dropped once the form mode values align with
- * {@link ConnectionMethod} enum values.
+ * - `manual`: validates if the gateway is present.
+ * - `auto`: validates only when there are already valid addresses; an empty
+ *   address list means the gateway will be ignored on submission anyway.
  */
-const MODE_TO_METHOD: Record<string, ConnectionMethod> = {
-  auto: ConnectionMethod.AUTO,
-  manual: ConnectionMethod.MANUAL,
+function validateGateway(
+  mode: string,
+  gateway: string,
+  validAddresses: string[],
+  isValid: (v: string) => boolean,
+  invalidMsg: string,
+): string | undefined {
+  if (!gateway) return undefined;
+  if (mode === "manual") return isValid(gateway) ? undefined : invalidMsg;
+  if (mode === "auto" && validAddresses.length > 0)
+    return isValid(gateway) ? undefined : invalidMsg;
+}
+
+/** Ensures a CIDR string has a prefix, adding a protocol-appropriate default if missing. */
+const withPrefix = (address: string): string => {
+  if (address.includes("/")) return address;
+  return address.includes(":")
+    ? `${address}/${IPV6_DEFAULT_PREFIX}`
+    : `${address}/${IPV4_DEFAULT_PREFIX}`;
 };
 
+/**
+ * Validates the connection form values.
+ *
+ * Returns a map of field errors when validation fails, or undefined when all
+ * values are valid. Validation is intentionally done here rather than in
+ * per-field onSubmit validators — see the {@link ConnectionForm} remarks.
+ */
+function validateConnectionForm(formValues: FormValues): FormFieldErrors | undefined {
+  const validAddresses4 = formValues.addresses4.filter(isValidIPv4Address);
+  const validAddresses6 = formValues.addresses6.filter(isValidIPv6Address);
+
+  const fieldErrors = shake({
+    name: !formValues.name.trim() ? _("Name is required") : undefined,
+    addresses4: validateActiveList(
+      formValues.ipv4Mode === "manual",
+      formValues.addresses4,
+      isValidIPv4Address,
+      _("At least one IPv4 address is required"),
+      _("Some IPv4 addresses are invalid"),
+    ),
+    addresses6: validateActiveList(
+      formValues.ipv6Mode === "manual",
+      formValues.addresses6,
+      isValidIPv6Address,
+      _("At least one IPv6 address is required"),
+      _("Some IPv6 addresses are invalid"),
+    ),
+    gateway4: validateGateway(
+      formValues.ipv4Mode,
+      formValues.gateway4,
+      validAddresses4,
+      isValidIPv4,
+      _("Invalid IPv4 gateway"),
+    ),
+    gateway6: validateGateway(
+      formValues.ipv6Mode,
+      formValues.gateway6,
+      validAddresses6,
+      isValidIPv6,
+      _("Invalid IPv6 gateway"),
+    ),
+    nameservers: validateActiveList(
+      formValues.customDns,
+      formValues.nameservers,
+      isValidNameserver,
+      _("At least one DNS server is required"),
+      _("Some DNS server addresses are invalid"),
+    ),
+    dnsSearchList: validateActiveList(
+      formValues.customDnsSearch,
+      formValues.dnsSearchList,
+      isValidDNSSearchDomain,
+      _("At least one DNS search domain is required"),
+      _("Some DNS search domains are invalid"),
+    ),
+  });
+
+  if (!isEmpty(fieldErrors)) return fieldErrors;
+}
+
+/**
+ * Builds a {@link Connection} from the validated form values.
+ */
+function buildConnection(formValues: FormValues): Connection {
+  const ipv4Addresses =
+    formValues.ipv4Mode === "manual" || formValues.ipv4Mode === "auto"
+      ? formValues.addresses4.map(withPrefix).map(buildAddress)
+      : [];
+  const ipv6Addresses =
+    formValues.ipv6Mode === "manual" || formValues.ipv6Mode === "auto"
+      ? formValues.addresses6.map(withPrefix).map(buildAddress)
+      : [];
+
+  return new Connection(formValues.name, {
+    iface: formValues.bindingMode === "iface" ? formValues.iface : "",
+    macAddress: formValues.bindingMode === "mac" ? formValues.ifaceMac : "",
+    method4: MODE_TO_METHOD[formValues.ipv4Mode],
+    gateway4: ipv4Addresses.length > 0 ? formValues.gateway4 : "",
+    method6: MODE_TO_METHOD[formValues.ipv6Mode],
+    gateway6: ipv6Addresses.length > 0 ? formValues.gateway6 : "",
+    addresses: [...ipv4Addresses, ...ipv6Addresses],
+    nameservers: formValues.customDns ? formValues.nameservers : [],
+    dnsSearchList: formValues.customDnsSearch ? formValues.dnsSearchList : [],
+  });
+}
+
 /**
  * Form for creating a new network connection.
  *
@@ -135,29 +258,12 @@ export default function ConnectionForm() {
       ifaceMac: devices[0]?.macAddress ?? "",
     }),
     validators: {
-      onSubmitAsync: async ({ value }) => {
-        const ipv4Addresses =
-          value.ipv4Mode === "manual" || value.ipv4Mode === "auto"
-            ? parseAddresses(value.addresses4)
-            : [];
-        const ipv6Addresses =
-          value.ipv6Mode === "manual" || value.ipv6Mode === "auto"
-            ? parseAddresses(value.addresses6)
-            : [];
+      onSubmitAsync: async ({ value: formValues }) => {
+        const fieldErrors = validateConnectionForm(formValues);
+        if (fieldErrors) return { fields: fieldErrors };
 
-        const connection = new Connection(value.name, {
-          iface: value.bindingMode === "iface" ? value.iface : "",
-          macAddress: value.bindingMode === "mac" ? value.ifaceMac : "",
-          method4: MODE_TO_METHOD[value.ipv4Mode],
-          gateway4: ipv4Addresses.length > 0 ? value.gateway4 : "",
-          method6: MODE_TO_METHOD[value.ipv6Mode],
-          gateway6: ipv6Addresses.length > 0 ? value.gateway6 : "",
-          addresses: [...ipv4Addresses, ...ipv6Addresses],
-          nameservers: value.useCustomDns ? parseTokens(value.nameservers) : [],
-          dnsSearchList: value.useCustomDnsSearch ? parseTokens(value.dnsSearchList) : [],
-        });
         try {
-          await updateConnection(connection);
+          await updateConnection(buildConnection(formValues));
         } catch (e) {
           return { form: e.message };
         }
@@ -175,6 +281,18 @@ export default function ConnectionForm() {
           <Form
             onSubmit={(e) => {
               e.preventDefault();
+              // Validation is intentionally deferred to submission so users are
+              // not interrupted while filling the form. All rules live in
+              // onSubmitAsync rather than per-field onSubmit validators because
+              // several checks are cross-field (e.g. gateway validity depends on
+              // the addresses list). TanStack Form only clears field errors set
+              // by onSubmitAsync when a per-field onSubmit validator runs for
+              // the same cause — which never happens here — so canSubmit stays
+              // false after a failed attempt. setErrorMap resets every field's
+              // errorMap.onSubmit before each new attempt, restoring canSubmit
+              // so onSubmitAsync is called again.
+              // @see https://tanstack.com/form/latest/docs/reference/formApi#seterrormap
+              form.setErrorMap({ onSubmit: { fields: {} } });
               form.handleSubmit();
             }}
           >
@@ -197,22 +315,33 @@ export default function ConnectionForm() {
             </Flex>
 
             <form.Field name="name">
-              {(field) => (
-                <FormGroup fieldId={field.name} label={_("Name")}>
-                  <TextInput
-                    id={field.name}
-                    value={field.state.value}
-                    onChange={(_, v) => field.handleChange(v)}
-                  />
-                </FormGroup>
-              )}
+              {(field) => {
+                const error = field.state.meta.errors[0] as string | undefined;
+                return (
+                  <FormGroup fieldId={field.name} label={_("Name")}>
+                    <TextInput
+                      id={field.name}
+                      value={field.state.value}
+                      validated={error ? "error" : "default"}
+                      onChange={(_, v) => field.handleChange(v)}
+                    />
+                    {error && (
+                      <FormHelperText>
+                        <HelperText>
+                          <HelperTextItem variant="error">{error}</HelperTextItem>
+                        </HelperText>
+                      </FormHelperText>
+                    )}
+                  </FormGroup>
+                );
+              }}
             </form.Field>
 
             <IpSettings form={form} protocol="ipv4" />
 
             <IpSettings form={form} protocol="ipv6" />
 
-            <form.Field name="useCustomDns">
+            <form.Field name="customDns">
               {(dnsToggle) => (
                 <>
                   <Checkbox
@@ -223,33 +352,24 @@ export default function ConnectionForm() {
                   />
                   {dnsToggle.state.value && (
                     <NestedContent margin="mxLg">
-                      <form.Field name="nameservers">
+                      <form.AppField name="nameservers">
                         {(field) => (
-                          <FormGroup fieldId={field.name}>
-                            <TextArea
-                              id={field.name}
-                              value={field.state.value}
-                              onChange={(_, v) => field.handleChange(v)}
-                              aria-label={_("DNS servers")}
-                              aria-describedby={`${field.name}-hint`}
-                            />
-                            <FormHelperText>
-                              <HelperText>
-                                <HelperTextItem variant="indeterminate" id={`${field.name}-hint`}>
-                                  {_("Space-separated list of DNS server addresses")}
-                                </HelperTextItem>
-                              </HelperText>
-                            </FormHelperText>
-                          </FormGroup>
+                          <field.ArrayField
+                            label={_("DNS servers")}
+                            skipDuplicates
+                            validateOnSubmit={(v) =>
+                              isValidNameserver(v) ? undefined : _("Invalid DNS server address")
+                            }
+                          />
                         )}
-                      </form.Field>
+                      </form.AppField>
                     </NestedContent>
                   )}
                 </>
               )}
             </form.Field>
 
-            <form.Field name="useCustomDnsSearch">
+            <form.Field name="customDnsSearch">
               {(dnsSearchToggle) => (
                 <>
                   <Checkbox
@@ -260,26 +380,17 @@ export default function ConnectionForm() {
                   />
                   {dnsSearchToggle.state.value && (
                     <NestedContent margin="mxLg">
-                      <form.Field name="dnsSearchList">
+                      <form.AppField name="dnsSearchList">
                         {(field) => (
-                          <FormGroup fieldId={field.name}>
-                            <TextArea
-                              id={field.name}
-                              value={field.state.value}
-                              onChange={(_, v) => field.handleChange(v)}
-                              aria-label={_("DNS search domains")}
-                              aria-describedby={`${field.name}-hint`}
-                            />
-                            <FormHelperText>
-                              <HelperText>
-                                <HelperTextItem variant="indeterminate" id={`${field.name}-hint`}>
-                                  {_("Space-separated, e.g. example.com local.lan")}
-                                </HelperTextItem>
-                              </HelperText>
-                            </FormHelperText>
-                          </FormGroup>
+                          <field.ArrayField
+                            label={_("DNS search domains")}
+                            skipDuplicates
+                            validateOnSubmit={(v) =>
+                              isValidDNSSearchDomain(v) ? undefined : _("Invalid DNS search domain")
+                            }
+                          />
                         )}
-                      </form.Field>
+                      </form.AppField>
                     </NestedContent>
                   )}
                 </>
diff --git a/web/src/components/network/IpSettings.tsx b/web/src/components/network/IpSettings.tsx
index 01695d290a..64eb842af9 100644
--- a/web/src/components/network/IpSettings.tsx
+++ b/web/src/components/network/IpSettings.tsx
@@ -26,13 +26,13 @@ import {
   FormHelperText,
   HelperText,
   HelperTextItem,
-  TextArea,
   TextInput,
 } from "@patternfly/react-core";
 import NestedContent from "~/components/core/NestedContent";
 import LabelText from "~/components/form/LabelText";
 import { connectionFormOptions } from "~/components/network/ConnectionForm";
 import { withForm } from "~/hooks/form";
+import { isValidIPv4Address, isValidIPv6Address } from "~/utils/network";
 import { _, N_ } from "~/i18n";
 
 /**
@@ -95,12 +95,6 @@ const IpSettings = withForm({
     const label = isIPv4 ? _("IPv4 Settings") : _("IPv6 Settings");
     const addressesLabel = isIPv4 ? _("IPv4 Addresses") : _("IPv6 Addresses");
     const gatewayLabel = isIPv4 ? _("IPv4 Gateway") : _("IPv6 Gateway");
-    const addressesHint = isIPv4
-      ? _("Space-separated IPv4 addresses with optional prefix, e.g. 192.168.1.1 or 192.168.1.1/24")
-      : _(
-          "Space-separated IPv6 addresses with optional prefix, e.g. 2001:db8::1 or 2001:db8::1/64",
-        );
-
     const modeField = isIPv4 ? "ipv4Mode" : "ipv6Mode";
     const addressesField = isIPv4 ? "addresses4" : "addresses6";
     const gatewayField = isIPv4 ? "gateway4" : "gateway6";
@@ -126,10 +120,9 @@ const IpSettings = withForm({
           {(mode) =>
             (mode === "manual" || mode === "auto") && (
               <NestedContent margin="mxLg">
-                <form.Field name={addressesField}>
+                <form.AppField name={addressesField}>
                   {(field) => (
-                    <FormGroup
-                      fieldId={field.name}
+                    <field.ArrayField
                       label={
                         mode === "auto" ? (
                           <LabelText suffix={_("(optional)")}>{addressesLabel}</LabelText>
@@ -137,48 +130,55 @@ const IpSettings = withForm({
                           addressesLabel
                         )
                       }
-                    >
-                      <TextArea
-                        id={field.name}
-                        value={field.state.value}
-                        onChange={(_, v) => field.handleChange(v)}
-                        resizeOrientation="vertical"
-                        aria-describedby={`${field.name}-hint`}
-                      />
-                      <FormHelperText>
-                        <HelperText>
-                          <HelperTextItem variant="indeterminate" id={`${field.name}-hint`}>
-                            {addressesHint}
-                          </HelperTextItem>
-                        </HelperText>
-                      </FormHelperText>
-                    </FormGroup>
+                      inputAriaLabel={
+                        mode === "auto" ? `${addressesLabel} ${_("(optional)")}` : addressesLabel
+                      }
+                      skipDuplicates
+                      validateOnSubmit={(v) =>
+                        (isIPv4 ? isValidIPv4Address(v) : isValidIPv6Address(v))
+                          ? undefined
+                          : isIPv4
+                            ? _("Invalid IPv4 address")
+                            : _("Invalid IPv6 address")
+                      }
+                    />
                   )}
-                </form.Field>
+                </form.AppField>
 
                 <form.Field name={gatewayField}>
-                  {(field) => (
-                    <FormGroup
-                      fieldId={field.name}
-                      label={
-                        <LabelText
-                          suffix={
-                            mode === "auto"
-                              ? _("(optional, ignored if no addresses provided)")
-                              : _("(optional)")
-                          }
-                        >
-                          {gatewayLabel}
-                        </LabelText>
-                      }
-                    >
-                      <TextInput
-                        id={field.name}
-                        value={field.state.value}
-                        onChange={(_, v) => field.handleChange(v)}
-                      />
-                    </FormGroup>
-                  )}
+                  {(field) => {
+                    const error = field.state.meta.errors[0] as string | undefined;
+                    return (
+                      <FormGroup
+                        fieldId={field.name}
+                        label={
+                          <LabelText
+                            suffix={
+                              mode === "auto"
+                                ? _("(optional, ignored if no addresses provided)")
+                                : _("(optional)")
+                            }
+                          >
+                            {gatewayLabel}
+                          </LabelText>
+                        }
+                      >
+                        <TextInput
+                          id={field.name}
+                          value={field.state.value}
+                          validated={error ? "error" : "default"}
+                          onChange={(_, v) => field.handleChange(v)}
+                        />
+                        {error && (
+                          <FormHelperText>
+                            <HelperText>
+                              <HelperTextItem variant="error">{error}</HelperTextItem>
+                            </HelperText>
+                          </FormHelperText>
+                        )}
+                      </FormGroup>
+                    );
+                  }}
                 </form.Field>
               </NestedContent>
             )
diff --git a/web/src/hooks/form.ts b/web/src/hooks/form.ts
index 434356a64f..812e43a627 100644
--- a/web/src/hooks/form.ts
+++ b/web/src/hooks/form.ts
@@ -23,6 +23,7 @@
 import { createFormHook } from "@tanstack/react-form";
 import { fieldContext, formContext, useFieldContext, useFormContext } from "~/hooks/form-contexts";
 import ChoiceField from "~/components/form/ChoiceField";
+import ArrayField from "~/components/form/ArrayField";
 
 /**
  * Application-wide TanStack Form hook.
@@ -34,6 +35,7 @@ const { useAppForm, withForm } = createFormHook({
   formContext,
   fieldComponents: {
     ChoiceField,
+    ArrayField,
   },
   formComponents: {},
 });
diff --git a/web/src/utils/network.ts b/web/src/utils/network.ts
index 5f81257bea..9dc18eed08 100644
--- a/web/src/utils/network.ts
+++ b/web/src/utils/network.ts
@@ -52,6 +52,46 @@ const isValidIp = (value: IPAddress["address"]) => ipaddr.IPv4.isValidFourPartDe
  * @param value - An netmask or a network prefix
  * @return true if given IP is valid; false otherwise.
  */
+/** Returns true if the value is a valid IP address, with or without a CIDR prefix. */
+const isValidAddress = (value: string): boolean =>
+  ipaddr.isValidCIDR(value) || ipaddr.isValid(value);
+
+/** Returns true if the value is a valid IPv4 address, with or without a CIDR prefix. */
+const isValidIPv4Address = (value: string): boolean =>
+  isValidAddress(value) && ipaddr.IPv4.isValidFourPartDecimal(value.split("/")[0]);
+
+/** Returns true if the value is a valid IPv6 address, with or without a CIDR prefix. */
+const isValidIPv6Address = (value: string): boolean =>
+  isValidAddress(value) && ipaddr.IPv6.isValid(value.split("/")[0]);
+
+/** Returns true if the value is a valid bare IPv4 address (no CIDR prefix). */
+const isValidIPv4 = (value: string): boolean => ipaddr.IPv4.isValidFourPartDecimal(value);
+
+/** Returns true if the value is a valid bare IPv6 address (no CIDR prefix). */
+const isValidIPv6 = (value: string): boolean => ipaddr.IPv6.isValid(value);
+
+/** Returns true if the value is a valid nameserver address (bare IPv4 or IPv6, no CIDR). */
+const isValidNameserver = (value: string): boolean =>
+  ipaddr.IPv4.isValidFourPartDecimal(value) || ipaddr.IPv6.isValid(value);
+
+/**
+ * Matches a valid DNS search domain or hostname per RFC 952 / RFC 1123.
+ *
+ * Rules:
+ * - Each label starts and ends with an alphanumeric character.
+ * - Labels may contain hyphens but not as the first or last character.
+ * - Labels are 1–63 characters long.
+ * - Labels are separated by dots.
+ * - No trailing dot (NetworkManager does not require one).
+ *
+ * Examples: `local`, `example.com`, `sub.example.com`.
+ */
+const DNS_SEARCH_DOMAIN_RE =
+  /^(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)*[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?$/;
+
+/** Returns true if the value is a valid DNS search domain or hostname. */
+const isValidDNSSearchDomain = (value: string): boolean => DNS_SEARCH_DOMAIN_RE.test(value);
+
 const isValidIpPrefix = (value: IPAddress["prefix"]) => {
   const prefix = String(value);
 
@@ -207,6 +247,13 @@ const connectionBindingMode = (connection: Connection): ConnectionBindingMode =>
 
 export {
   buildAddress,
+  isValidAddress,
+  isValidIPv4,
+  isValidIPv6,
+  isValidIPv4Address,
+  isValidIPv6Address,
+  isValidNameserver,
+  isValidDNSSearchDomain,
   buildAddresses,
   buildRoutes,
   connectionAddresses,