diff --git a/frontend/src/ts/components/common/AnimatedModal.tsx b/frontend/src/ts/components/common/AnimatedModal.tsx
index e7af3d3d599d..b0711d08c3e6 100644
--- a/frontend/src/ts/components/common/AnimatedModal.tsx
+++ b/frontend/src/ts/components/common/AnimatedModal.tsx
@@ -73,6 +73,7 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
 
   const showModal = async (isChained: boolean): Promise<void> => {
     if (dialogEl() === undefined || modalEl() === undefined) return;
+    if (dialogEl()?.native.open) return;
 
     await props.beforeShow?.();
 
@@ -265,7 +266,7 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
     if (modalEl() === undefined || dialogEl() === undefined) return;
     if (props.focusFirstInput === undefined) return;
 
-    const input = modalEl()?.qs<HTMLInputElement>("input:not(.hidden)");
+    const input = modalEl()?.qsa<HTMLInputElement>("input:not(.hidden)")[0];
     if (input) {
       if (props.focusFirstInput === true) {
         input.focus();
diff --git a/frontend/src/ts/components/modals/Modals.tsx b/frontend/src/ts/components/modals/Modals.tsx
index 97660402c556..0c8a5c21c784 100644
--- a/frontend/src/ts/components/modals/Modals.tsx
+++ b/frontend/src/ts/components/modals/Modals.tsx
@@ -2,6 +2,7 @@ import { JSXElement } from "solid-js";
 
 import { ContactModal } from "./ContactModal";
 import { RegisterCaptchaModal } from "./RegisterCaptchaModal";
+import { SimpleModal } from "./SimpleModal";
 import { SupportModal } from "./SupportModal";
 import { VersionHistoryModal } from "./VersionHistoryModal";
 
@@ -12,6 +13,7 @@ export function Modals(): JSXElement {
       <ContactModal />
       <RegisterCaptchaModal />
       <SupportModal />
+      <SimpleModal />
     </>
   );
 }
diff --git a/frontend/src/ts/components/modals/SimpleModal.tsx b/frontend/src/ts/components/modals/SimpleModal.tsx
new file mode 100644
index 000000000000..cd53d9a62432
--- /dev/null
+++ b/frontend/src/ts/components/modals/SimpleModal.tsx
@@ -0,0 +1,300 @@
+import { AnyFieldApi, createForm } from "@tanstack/solid-form";
+import { format as dateFormat } from "date-fns/format";
+import {
+  Accessor,
+  For,
+  JSXElement,
+  Match,
+  Show,
+  Switch,
+  untrack,
+} from "solid-js";
+
+import { showNoticeNotification } from "../../states/notifications";
+import {
+  simpleModalConfig,
+  SimpleModalInput,
+  executeSimpleModal,
+} from "../../states/simple-modal";
+import { cn } from "../../utils/cn";
+import { AnimatedModal } from "../common/AnimatedModal";
+import { Checkbox } from "../ui/form/Checkbox";
+import { InputField } from "../ui/form/InputField";
+import { SubmitButton } from "../ui/form/SubmitButton";
+import { fromSchema, fieldMandatory, handleResult } from "../ui/form/utils";
+
+type FormValues = Record<string, string | boolean>;
+
+type SyncValidator = (opts: {
+  value: string | boolean;
+}) => string | string[] | undefined;
+
+type AsyncValidator = (opts: {
+  value: string | boolean;
+  fieldApi: AnyFieldApi;
+}) => Promise<string | string[] | undefined>;
+
+type SimpleModalValidators = {
+  onChange?: SyncValidator;
+  onChangeAsyncDebounceMs?: number;
+  onChangeAsync?: AsyncValidator;
+};
+
+function inputKey(input: SimpleModalInput, index: number): string {
+  return input.name ?? index.toString();
+}
+
+function getDefaultValues(inputs: SimpleModalInput[] | undefined): FormValues {
+  if (inputs === undefined || inputs.length === 0) {
+    return {};
+  }
+  const entries: [string, string | boolean][] = inputs.map((input, i) => {
+    const key = inputKey(input, i);
+    if (input.type === "checkbox") {
+      return [key, input.initVal ?? false];
+    }
+    if (input.type === "datetime-local" && input.initVal !== undefined) {
+      return [key, dateFormat(input.initVal, "yyyy-MM-dd'T'HH:mm:ss")];
+    }
+    if (input.type === "date" && input.initVal !== undefined) {
+      return [key, dateFormat(input.initVal, "yyyy-MM-dd")];
+    }
+    return [key, input.initVal?.toString() ?? ""];
+  });
+  return Object.fromEntries(entries) as FormValues;
+}
+
+function getValidators(
+  input: SimpleModalInput,
+): SimpleModalValidators | undefined {
+  const required =
+    !input.hidden && !input.optional && input.type !== "checkbox";
+
+  const schema = input.validation?.schema;
+  const isValid = input.validation?.isValid;
+
+  if (schema === undefined && isValid === undefined && !required) {
+    return undefined;
+  }
+
+  const validators: SimpleModalValidators = {};
+
+  if (schema !== undefined) {
+    validators.onChange = fromSchema(schema) as SyncValidator;
+  } else if (required) {
+    validators.onChange = fieldMandatory() as SyncValidator;
+  }
+
+  if (isValid !== undefined) {
+    validators.onChangeAsyncDebounceMs = input.validation?.debounceDelay ?? 100;
+    validators.onChangeAsync = async ({ value, fieldApi }) => {
+      const result = await isValid(String(value));
+      if (result === true) {
+        return undefined;
+      }
+      if (typeof result === "string") {
+        return result;
+      }
+      return handleResult(fieldApi, [
+        { type: "warning", message: result.warning },
+      ]);
+    };
+  }
+
+  return validators;
+}
+
+function FieldInput(props: {
+  field: Accessor<AnyFieldApi>;
+  input: SimpleModalInput;
+}): JSXElement {
+  return (
+    <Switch
+      fallback={
+        <InputField
+          field={props.field}
+          type={props.input.type}
+          placeholder={props.input.placeholder}
+          disabled={props.input.disabled}
+          autocomplete="off"
+        />
+      }
+    >
+      <Match when={props.input.type === "checkbox"}>
+        <Checkbox
+          field={props.field}
+          label={(props.input as { label: string }).label}
+          disabled={props.input.disabled}
+        />
+      </Match>
+      <Match when={props.input.type === "textarea"}>
+        <textarea
+          class="w-full"
+          placeholder={props.input.placeholder}
+          value={props.field().state.value as string}
+          disabled={props.input.disabled}
+          autocomplete="off"
+          onInput={(e) => {
+            props.field().handleChange(e.currentTarget.value);
+            props.input.oninput?.(e);
+          }}
+          onBlur={() => props.field().handleBlur()}
+        ></textarea>
+      </Match>
+      <Match when={props.input.type === "range"}>
+        <div class="flex items-center gap-2">
+          <input
+            type="range"
+            class={cn(props.input.hidden && "hidden", "w-full")}
+            min={(props.input as { min: number }).min}
+            max={(props.input as { max: number }).max}
+            step={(props.input as { step?: number }).step}
+            value={props.field().state.value as string}
+            disabled={props.input.disabled}
+            onInput={(e) => {
+              props.field().handleChange(e.currentTarget.value);
+              props.input.oninput?.(e);
+            }}
+            onBlur={() => props.field().handleBlur()}
+          />
+          <span class="text-sub">{props.field().state.value as string}</span>
+        </div>
+      </Match>
+      <Match
+        when={
+          props.input.type === "datetime-local" || props.input.type === "date"
+        }
+      >
+        <input
+          type={props.input.type}
+          class="w-full"
+          value={props.field().state.value as string}
+          disabled={props.input.disabled}
+          min={
+            (props.input as { min?: Date }).min !== undefined
+              ? dateFormat(
+                  (props.input as { min: Date }).min,
+                  props.input.type === "date"
+                    ? "yyyy-MM-dd"
+                    : "yyyy-MM-dd'T'HH:mm:ss",
+                )
+              : undefined
+          }
+          max={
+            (props.input as { max?: Date }).max !== undefined
+              ? dateFormat(
+                  (props.input as { max: Date }).max,
+                  props.input.type === "date"
+                    ? "yyyy-MM-dd"
+                    : "yyyy-MM-dd'T'HH:mm:ss",
+                )
+              : undefined
+          }
+          onInput={(e) => {
+            props.field().handleChange(e.currentTarget.value);
+            props.input.oninput?.(e);
+          }}
+          onBlur={() => props.field().handleBlur()}
+        />
+      </Match>
+    </Switch>
+  );
+}
+
+export function SimpleModal(): JSXElement {
+  const config = simpleModalConfig;
+
+  // untrack prevents tanstack's internal createComputed from
+  // re-running api.update() when config changes, which would
+  // cause a re-render cascade during the modal's show animation.
+  const form = createForm(() => ({
+    defaultValues: untrack(() => getDefaultValues(config()?.inputs)),
+    onSubmit: async ({ value }) => {
+      const inputs = config()?.inputs ?? [];
+      const values = inputs.map((input, i) => {
+        const val = value[inputKey(input, i)];
+        if (typeof val === "boolean") {
+          return val ? "true" : "false";
+        }
+        return val?.toString() ?? "";
+      });
+      await executeSimpleModal(values);
+    },
+    onSubmitInvalid: () => {
+      showNoticeNotification("Please fill in all fields");
+    },
+  }));
+
+  const resetForm = (): void => {
+    const defaults = getDefaultValues(config()?.inputs);
+    form.update({ ...form.options, defaultValues: defaults });
+    form.reset();
+  };
+
+  return (
+    <AnimatedModal
+      id="SimpleModal"
+      title={config()?.title}
+      focusFirstInput={true}
+      beforeShow={resetForm}
+    >
+      <form
+        class="grid gap-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          void form.handleSubmit();
+        }}
+      >
+        <Show when={config()?.text}>
+          {(text) => (
+            <div
+              class="text-sub"
+              {...(config()?.textAllowHtml === true
+                ? { innerHTML: text() }
+                : { textContent: text() })}
+            ></div>
+          )}
+        </Show>
+        <Show when={(config()?.inputs?.length ?? 0) > 0}>
+          <div class="grid gap-2">
+            <For each={config()?.inputs}>
+              {(input, i) => (
+                <Show when={!input.hidden}>
+                  <form.Field
+                    name={inputKey(input, i())}
+                    validators={getValidators(input)}
+                    children={(field) => (
+                      <Show
+                        when={
+                          input.type !== "checkbox" &&
+                          input.label !== undefined &&
+                          input.label !== ""
+                        }
+                        fallback={<FieldInput field={field} input={input} />}
+                      >
+                        <label class="grid w-full grid-cols-[1fr_2fr] items-center gap-2 text-sub">
+                          <div>{input.label}</div>
+                          <FieldInput field={field} input={input} />
+                        </label>
+                      </Show>
+                    )}
+                  />
+                </Show>
+              )}
+            </For>
+          </div>
+        </Show>
+        <Show when={config()?.buttonText !== undefined}>
+          <SubmitButton
+            form={form}
+            variant="button"
+            class="w-full"
+            text={config()?.buttonText}
+            skipDirtyCheck={(config()?.inputs?.length ?? 0) === 0}
+          />
+        </Show>
+      </form>
+    </AnimatedModal>
+  );
+}
diff --git a/frontend/src/ts/components/pages/leaderboard/Navigation.tsx b/frontend/src/ts/components/pages/leaderboard/Navigation.tsx
index 58518603fad6..67b6bca974df 100644
--- a/frontend/src/ts/components/pages/leaderboard/Navigation.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/Navigation.tsx
@@ -1,39 +1,10 @@
 import { JSXElement, Setter, Show } from "solid-js";
 
-import { ExecReturn, SimpleModal } from "../../../elements/simple-modal";
 import { setPage } from "../../../states/leaderboard-selection";
+import { showSimpleModal } from "../../../states/simple-modal";
 import { cn } from "../../../utils/cn";
 import { Button } from "../../common/Button";
 import { LoadingCircle } from "../../common/LoadingCircle";
-
-const goToPageModal = new SimpleModal({
-  id: "lbGoToPage",
-  title: "Go to page",
-  inputs: [
-    {
-      type: "number",
-      placeholder: "Page number",
-    },
-  ],
-  buttonText: "Go",
-  execFn: async (_thisPopup, pageNumber): Promise<ExecReturn> => {
-    const page = parseInt(pageNumber, 10);
-    if (isNaN(page) || page < 1) {
-      return {
-        status: "notice",
-        message: "Invalid page number",
-      };
-    }
-
-    setPage(page - 1);
-
-    return {
-      status: "success",
-      message: "Navigating to page " + page,
-      showNotification: false,
-    };
-  },
-});
 export function Navigation(props: {
   lastPage: number;
   userPage?: number;
@@ -84,7 +55,30 @@ export function Navigation(props: {
         class={buttonClass}
       />
       <Button
-        onClick={() => goToPageModal.show(undefined, {})}
+        onClick={() =>
+          showSimpleModal({
+            title: "Go to page",
+            inputs: [
+              {
+                type: "number",
+                placeholder: "Page number",
+              },
+            ],
+            buttonText: "Go",
+            execFn: async (pageNumber) => {
+              const page = parseInt(pageNumber, 10);
+              if (isNaN(page) || page < 1) {
+                return { status: "notice", message: "Invalid page number" };
+              }
+              setPage(page - 1);
+              return {
+                status: "success",
+                message: "Navigating to page " + page,
+                showNotification: false,
+              };
+            },
+          })
+        }
         fa={{ icon: "fa-hashtag", fixedWidth: true }}
         class={buttonClass}
         disabled={props.lastPage <= 1}
diff --git a/frontend/src/ts/components/pages/profile/UserDetails.tsx b/frontend/src/ts/components/pages/profile/UserDetails.tsx
index c496dcee46eb..9990134f25e4 100644
--- a/frontend/src/ts/components/pages/profile/UserDetails.tsx
+++ b/frontend/src/ts/components/pages/profile/UserDetails.tsx
@@ -15,10 +15,9 @@ import { formatDistanceToNowStrict } from "date-fns/formatDistanceToNowStrict";
 import { createEffect, createSignal, For, JSXElement, Show } from "solid-js";
 
 import { Snapshot } from "../../../constants/default-snapshot";
-import { isFriend } from "../../../db";
+import { addFriend, isFriend } from "../../../db";
 import * as EditProfileModal from "../../../modals/edit-profile";
 import * as UserReportModal from "../../../modals/user-report";
-import { addFriend } from "../../../pages/friends";
 import { bp } from "../../../states/breakpoints";
 import { getUserId, isLoggedIn } from "../../../states/core";
 import {
diff --git a/frontend/src/ts/components/ui/form/SubmitButton.tsx b/frontend/src/ts/components/ui/form/SubmitButton.tsx
index bca2f98f2817..1e2f02db111e 100644
--- a/frontend/src/ts/components/ui/form/SubmitButton.tsx
+++ b/frontend/src/ts/components/ui/form/SubmitButton.tsx
@@ -24,9 +24,10 @@ type SubscribableForm = {
 export function SubmitButton(
   props: {
     form: SubscribableForm;
+    skipDirtyCheck?: boolean;
   } & Omit<ButtonProps, "type">,
 ): JSXElement {
-  const [local, others] = splitProps(props, ["disabled"]);
+  const [local, others] = splitProps(props, ["disabled", "skipDirtyCheck"]);
   return (
     <props.form.Subscribe
       selector={(state) => ({
@@ -41,7 +42,7 @@ export function SubmitButton(
           {...others}
           disabled={
             (local.disabled ?? false) ||
-            !state().isDirty ||
+            (!local.skipDirtyCheck && !state().isDirty) ||
             !state().canSubmit ||
             state().isSubmitting ||
             !state().isValid
diff --git a/frontend/src/ts/db.ts b/frontend/src/ts/db.ts
index bfe89e9330b8..43623d33b19f 100644
--- a/frontend/src/ts/db.ts
+++ b/frontend/src/ts/db.ts
@@ -1145,6 +1145,34 @@ function convertConnections(
   );
 }
 
+export function getReceiverUid(
+  connection: Pick<Connection, "initiatorUid" | "receiverUid">,
+): string {
+  const me = getAuthenticatedUser();
+  if (me === null) {
+    throw new Error("expected to be authenticated in getReceiverUid");
+  }
+
+  if (me.uid === connection.initiatorUid) return connection.receiverUid;
+  return connection.initiatorUid;
+}
+
+export async function addFriend(receiverName: string): Promise<true | string> {
+  const result = await Ape.connections.create({ body: { receiverName } });
+
+  if (result.status !== 200) {
+    return `Friend request failed: ${result.body.message}`;
+  } else {
+    const snapshot = getSnapshot();
+    if (snapshot !== undefined) {
+      const receiverUid = getReceiverUid(result.body.data);
+      // oxlint-disable-next-line no-unsafe-member-access
+      snapshot.connections[receiverUid] = result.body.data.status;
+    }
+    return true;
+  }
+}
+
 export function isFriend(uid: string | undefined): boolean {
   if (uid === undefined || uid === getAuthenticatedUser()?.uid) return false;
 
diff --git a/frontend/src/ts/elements/account-settings/blocked-user-table.ts b/frontend/src/ts/elements/account-settings/blocked-user-table.ts
index ddd9f357b143..7f440ca6ce30 100644
--- a/frontend/src/ts/elements/account-settings/blocked-user-table.ts
+++ b/frontend/src/ts/elements/account-settings/blocked-user-table.ts
@@ -3,8 +3,8 @@ import { Connection } from "@monkeytype/schemas/connections";
 import Ape from "../../ape";
 import { format } from "date-fns/format";
 import { isAuthenticated } from "../../firebase";
-import { getReceiverUid } from "../../pages/friends";
 import * as DB from "../../db";
+import { getReceiverUid } from "../../db";
 import { qsr } from "../../utils/dom";
 
 let blockedUsers: Connection[] = [];
diff --git a/frontend/src/ts/pages/friends.ts b/frontend/src/ts/pages/friends.ts
index 81459af97429..278512814c97 100644
--- a/frontend/src/ts/pages/friends.ts
+++ b/frontend/src/ts/pages/friends.ts
@@ -26,6 +26,7 @@ import { getAvatarElement } from "../utils/discord-avatar";
 import { formatTypingStatsRatio } from "../utils/misc";
 import { getLanguageDisplayString } from "../utils/strings";
 import * as DB from "../db";
+import { addFriend, getReceiverUid } from "../db";
 import { getAuthenticatedUser } from "../firebase";
 import * as ServerConfiguration from "../ape/server-configuration";
 import { authEvent } from "../events/auth";
@@ -42,35 +43,6 @@ let friendsTable: SortedTable<Friend> | undefined = undefined;
 let pendingRequests: Connection[] | undefined;
 let friendsList: Friend[] | undefined;
 
-export function getReceiverUid(
-  connection: Pick<Connection, "initiatorUid" | "receiverUid">,
-): string {
-  const me = getAuthenticatedUser();
-  if (me === null) {
-    throw new Error("expected to be authenticated in getReceiverUid");
-  }
-
-  if (me.uid === connection.initiatorUid) return connection.receiverUid;
-  return connection.initiatorUid;
-}
-
-export async function addFriend(receiverName: string): Promise<true | string> {
-  const result = await Ape.connections.create({ body: { receiverName } });
-
-  if (result.status !== 200) {
-    return `Friend request failed: ${result.body.message}`;
-  } else {
-    const snapshot = DB.getSnapshot();
-    if (snapshot !== undefined) {
-      const receiverUid = getReceiverUid(result.body.data);
-      // oxlint-disable-next-line no-unsafe-member-access
-      snapshot.connections[receiverUid] = result.body.data.status;
-      updatePendingConnections();
-    }
-    return true;
-  }
-}
-
 const addFriendModal = new SimpleModal({
   id: "addFriend",
   title: "Add a friend",
@@ -94,6 +66,7 @@ const addFriendModal = new SimpleModal({
     const result = await addFriend(receiverName);
 
     if (result === true) {
+      updatePendingConnections();
       return { status: "success", message: `Request sent to ${receiverName}` };
     }
 
diff --git a/frontend/src/ts/states/modals.ts b/frontend/src/ts/states/modals.ts
index 59b1dee62b7d..ffada9e73b32 100644
--- a/frontend/src/ts/states/modals.ts
+++ b/frontend/src/ts/states/modals.ts
@@ -8,7 +8,8 @@ export type ModalId =
   | "DevOptions"
   | "DevInboxPicker"
   | "RegisterCaptcha"
-  | "Alerts";
+  | "Alerts"
+  | "SimpleModal";
 
 export type ModalVisibility = {
   visible: boolean;
diff --git a/frontend/src/ts/states/simple-modal.ts b/frontend/src/ts/states/simple-modal.ts
new file mode 100644
index 000000000000..911bffbafa38
--- /dev/null
+++ b/frontend/src/ts/states/simple-modal.ts
@@ -0,0 +1,133 @@
+import { createSignal } from "solid-js";
+import { z } from "zod";
+
+import { showModal, hideModal } from "./modals";
+import {
+  addNotificationWithLevel,
+  AddNotificationOptions,
+  showErrorNotification,
+} from "./notifications";
+import { showLoaderBar, hideLoaderBar } from "./loader-bar";
+import { IsValidResponse } from "../types/validation";
+
+type CommonInput<TType, TValue> = {
+  type: TType;
+  name?: string;
+  initVal?: TValue;
+  placeholder?: string;
+  hidden?: boolean;
+  disabled?: boolean;
+  optional?: boolean;
+  label?: string;
+  oninput?: (event: Event) => void;
+  validation?: {
+    schema?: z.Schema<string>;
+    isValid?: (value: string) => Promise<IsValidResponse>;
+    debounceDelay?: number;
+  };
+};
+
+export type TextInput = CommonInput<"text", string>;
+export type TextArea = CommonInput<"textarea", string>;
+export type PasswordInput = CommonInput<"password", string>;
+type EmailInput = CommonInput<"email", string>;
+
+type RangeInput = {
+  min: number;
+  max: number;
+  step?: number;
+} & CommonInput<"range", number>;
+
+type DateTimeInput = {
+  min?: Date;
+  max?: Date;
+} & CommonInput<"datetime-local", Date>;
+
+type DateInput = {
+  min?: Date;
+  max?: Date;
+} & CommonInput<"date", Date>;
+
+type CheckboxInput = {
+  label: string;
+  placeholder?: never;
+  description?: string;
+} & CommonInput<"checkbox", boolean>;
+
+type NumberInput = {
+  min?: number;
+  max?: number;
+} & CommonInput<"number", number>;
+
+export type SimpleModalInput =
+  | TextInput
+  | TextArea
+  | PasswordInput
+  | EmailInput
+  | RangeInput
+  | DateTimeInput
+  | DateInput
+  | CheckboxInput
+  | NumberInput;
+
+export type ExecReturn = {
+  status: "success" | "notice" | "error";
+  message: string;
+  showNotification?: false;
+  notificationOptions?: AddNotificationOptions;
+  afterHide?: () => void;
+  alwaysHide?: boolean;
+};
+
+export type SimpleModalConfig = {
+  title: string;
+  inputs?: SimpleModalInput[];
+  text?: string;
+  textAllowHtml?: boolean;
+  buttonText: string;
+  execFn: (...inputValues: string[]) => Promise<ExecReturn>;
+};
+
+const [simpleModalConfig, setSimpleModalConfig] =
+  createSignal<SimpleModalConfig | null>(null);
+
+export { simpleModalConfig };
+
+export function showSimpleModal(config: SimpleModalConfig): void {
+  setSimpleModalConfig(config);
+  showModal("SimpleModal");
+}
+
+export function hideSimpleModal(): void {
+  hideModal("SimpleModal");
+}
+
+export async function executeSimpleModal(values: string[]): Promise<void> {
+  const config = simpleModalConfig();
+  if (config === null) return;
+
+  showLoaderBar();
+  try {
+    const res = await config.execFn(...values);
+    hideLoaderBar();
+
+    if (res.showNotification !== false) {
+      addNotificationWithLevel(
+        res.message,
+        res.status,
+        res.notificationOptions,
+      );
+    }
+
+    if (res.status === "success" || res.alwaysHide) {
+      hideSimpleModal();
+      res.afterHide?.();
+    }
+  } catch (error) {
+    console.error("Error executing simple modal function:", error);
+    showErrorNotification("An unexpected error occurred", {
+      error,
+    });
+    hideLoaderBar();
+  }
+}
diff --git a/packages/oxlint-config/rules/jsx.jsonc b/packages/oxlint-config/rules/jsx.jsonc
index 7c202bd5661e..3886eda75063 100644
--- a/packages/oxlint-config/rules/jsx.jsonc
+++ b/packages/oxlint-config/rules/jsx.jsonc
@@ -23,6 +23,7 @@
           "error",
           {
             "ignore": [
+              "autocomplete",
               "class",
               "classList",
               "innerHTML",