From 4b9211e3bf3e8dbad0e4f3c26809cec25f454a92 Mon Sep 17 00:00:00 2001
From: Om Tiwari Pandey <115196863+OmTiwariPandey@users.noreply.github.com>
Date: Mon, 6 Jul 2026 16:15:33 +0530
Subject: [PATCH] feat: add settings page search (@OmTiwariPandey) (#8135)

### Description

<!--
  Please describe the change(s) made in your PR:
  - explain the problem being solved
- for bug fixes without an open issue, include steps to reproduce the
issue
  - summarize the approach taken

  Use your own words. Do not rely on AI-generated descriptions.
They do not demonstrate your understanding of the problem or the
solution.
Writing the description yourself helps you verify the scope of your work
and
helps us better understand your intent, reasoning and level of insight.
-->

The settings page has a lot of options cluttered, and finding a setting
would mean scrolling through everything. you can press escape to search,
yes but still it just makes you quickly change a setting, not searching
it and its neighboring settings.
This PR adds a search box at the top of the settings page. As you type,
matching settings show up in a dropdown, and picking one scrolls to that
setting and briefly flashes it so it's easy to spot. You can also use
arrow keys and enter to do the same.

A few notes on the approach:

- The list it searches is built from the settings actually rendered on
the page, so options that are currently hidden (e.g. the keymap settings
when keymap mode is off) don't appear, and every result is guaranteed to
scroll to something that exists.
- The "scroll to and flash" behavior reuses the highlight that the
per-setting copy-link buttons and ?highlight= URLs already use. I moved
that logic into a small shared helper so the search and the existing URL
handler use the same code instead of duplicating it.
- Matching is a simple case-insensitive match on the setting name,
capped at 8 results. Escape clears the search and clicking outside
closes the dropdown.

### Checks

- [x] Make sure the PR title follows the Conventional Commits standard.
(https://www.conventionalcommits.org for more info)
- [x] Make sure to include your GitHub username prefixed with @ inside
parentheses at the end of the PR title.

<!-- label(optional scope): pull request title (@your_github_username)
-->

<!-- I know I know they seem boring but please do them, they help us and
you will find out it also helps you. -->

Closes #

<!-- The issue(s) your PR resolves if any (delete if that is not the
case) -->
<!-- Please reference any issues and/or PRs related to your pull request
-->

<!-- Pro tip: you can mention an issue, PR, or discussion on GitHub by
referencing its hash number, e.g.:
[#1234](https://github.com/monkeytypegame/monkeytype/pull/1234) -->

<!-- Pro tip: you can press . (dot or period) in the code tab of any
GitHub repo to get access to GitHub's VS Code web editor. Enjoy! :) -->

---------

Co-authored-by: Miodec <jack@monkeytype.com>
---
 frontend/src/ts/components/common/Setting.tsx |   2 +
 .../ts/components/pages/settings/QuickNav.tsx |   4 +-
 .../pages/settings/SearchableAutoSetting.tsx  | 137 ++++++++
 .../pages/settings/SearchableSetting.tsx      |  47 +++
 .../pages/settings/SettingsPage.tsx           | 319 ++++++------------
 .../pages/settings/SettingsSearch.tsx         |  44 +++
 .../custom-setting/AnimationFpsLimit.tsx      |   4 +-
 .../custom-setting/AutoSwitchTheme.tsx        |   4 +-
 .../custom-setting/CustomBackground.tsx       |  10 +-
 .../CustomBackgroundFilters.tsx               |   4 +-
 .../custom-setting/CustomLayoutfluid.tsx      |   4 +-
 .../custom-setting/CustomPolyglot.tsx         |   4 +-
 .../settings/custom-setting/FontFamily.tsx    |  10 +-
 .../pages/settings/custom-setting/Funbox.tsx  |   4 +-
 .../settings/custom-setting/ImportExport.tsx  |   4 +-
 .../settings/custom-setting/KeymapLayout.tsx  |   4 +-
 .../settings/custom-setting/KeymapSize.tsx    |   4 +-
 .../settings/custom-setting/Language.tsx      |   4 +-
 .../pages/settings/custom-setting/Layout.tsx  |   4 +-
 .../settings/custom-setting/MaxLineWidth.tsx  |   4 +-
 .../pages/settings/custom-setting/MinAcc.tsx  |   4 +-
 .../settings/custom-setting/MinBurst.tsx      |   4 +-
 .../settings/custom-setting/MinSpeed.tsx      |   4 +-
 .../settings/custom-setting/PaceCaret.tsx     |  10 +-
 .../pages/settings/custom-setting/Presets.tsx |   4 +-
 .../settings/custom-setting/SoundVolume.tsx   |   4 +-
 .../pages/settings/custom-setting/Tags.tsx    |   4 +-
 .../pages/settings/custom-setting/Theme.tsx   |   4 +-
 frontend/src/ts/config/metadata.tsx           |  45 +++
 frontend/src/ts/states/settings-search.ts     |  60 ++++
 30 files changed, 493 insertions(+), 271 deletions(-)
 create mode 100644 frontend/src/ts/components/pages/settings/SearchableAutoSetting.tsx
 create mode 100644 frontend/src/ts/components/pages/settings/SearchableSetting.tsx
 create mode 100644 frontend/src/ts/components/pages/settings/SettingsSearch.tsx
 create mode 100644 frontend/src/ts/states/settings-search.ts

diff --git a/frontend/src/ts/components/common/Setting.tsx b/frontend/src/ts/components/common/Setting.tsx
index fc5d7e6d8947..a9c4a0727277 100644
--- a/frontend/src/ts/components/common/Setting.tsx
+++ b/frontend/src/ts/components/common/Setting.tsx
@@ -18,6 +18,7 @@ export type SettingProps = {
   inputs?: JSXElement;
   fullWidthInputs?: JSXElement;
   breakpoints?: "none" | "normal" | "narrow";
+  class?: string;
 } & ParentProps &
   (
     | {
@@ -51,6 +52,7 @@ export function Setting(props: SettingProps): JSXElement {
         "group grid gap-2",
         "-m-4 rounded-double p-4",
         // "animate-[ring-flash_4s_ease-in_forwards]",
+        props.class,
       )}
       {...("key" in props && props.key !== undefined
         ? { "data-setting-key": props.key }
diff --git a/frontend/src/ts/components/pages/settings/QuickNav.tsx b/frontend/src/ts/components/pages/settings/QuickNav.tsx
index 64d14d006e38..e03dff2e6150 100644
--- a/frontend/src/ts/components/pages/settings/QuickNav.tsx
+++ b/frontend/src/ts/components/pages/settings/QuickNav.tsx
@@ -3,10 +3,10 @@ import { JSXElement } from "solid-js";
 import { cn } from "../../../utils/cn";
 import { Button } from "../../common/Button";
 
-export function QuickNav(): JSXElement {
+export function QuickNav(props: { class?: string }): JSXElement {
   const buttonClass = "px-3 py-3";
   return (
-    <div>
+    <div class={props.class}>
       <div
         class={cn(
           "mx-auto rounded bg-sub-alt text-em-xs",
diff --git a/frontend/src/ts/components/pages/settings/SearchableAutoSetting.tsx b/frontend/src/ts/components/pages/settings/SearchableAutoSetting.tsx
new file mode 100644
index 000000000000..13a2e115e08e
--- /dev/null
+++ b/frontend/src/ts/components/pages/settings/SearchableAutoSetting.tsx
@@ -0,0 +1,137 @@
+import { Config, ConfigKey, ConfigSchema } from "@monkeytype/schemas/configs";
+import { createForm } from "@tanstack/solid-form";
+import { For, JSXElement } from "solid-js";
+import { z } from "zod";
+
+import {
+  configMetadata,
+  getOptionLabel,
+  getOptionSearchKeywords,
+  getVisibleOptions,
+} from "../../../config/metadata";
+import { setConfig } from "../../../config/setters";
+import { getConfig } from "../../../config/store";
+import { useSavedIndicator } from "../../../hooks/useSavedIndicator";
+import { cn } from "../../../utils/cn";
+import { Button } from "../../common/Button";
+import { InputField } from "../../ui/form/InputField";
+import { fromSchema } from "../../ui/form/utils";
+import { SearchableSetting } from "./SearchableSetting";
+
+export function SearchableAutoSetting<T extends ConfigKey>(props: {
+  key: T;
+  inputs?: JSXElement;
+  wide?: boolean;
+  onOptionClick?: (value: Config[T]) => void;
+}): JSXElement {
+  const savedIndicator = useSavedIndicator();
+
+  const form = createForm(() => ({
+    defaultValues: {
+      [props.key]: getConfig[props.key],
+    },
+    onSubmit: ({ value }) => {
+      const val = parseFloat(String(value[props.key]));
+      if (val === getConfig[props.key]) return;
+      savedIndicator.flash();
+      setConfig(props.key, val as Config[T]);
+    },
+  }));
+
+  const autoInputs = () => {
+    if (
+      ConfigSchema.shape[props.key]._def.typeName ===
+      z.ZodFirstPartyTypeKind.ZodNumber
+    ) {
+      return (
+        <div class="grid w-full gap-2">
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              void form.handleSubmit();
+            }}
+          >
+            <form.Field
+              //@ts-expect-error -- i think because props.key is a key of config, which is a zod schema, the typechecker gives up (too complex to infer or something)
+              name={props.key}
+              validators={{
+                onChange: ({ value }) => {
+                  const val = parseFloat(String(value));
+                  if (isNaN(val)) {
+                    return "Must be a number";
+                  }
+                  return fromSchema(
+                    ConfigSchema.shape[props.key] as z.ZodNumber,
+                  )({
+                    value: val,
+                  });
+                },
+                onBlur: () => {
+                  void form.handleSubmit();
+                },
+              }}
+              children={(field) => (
+                <div class="relative">
+                  <InputField
+                    field={field}
+                    schema={ConfigSchema.shape[props.key]}
+                    placeholder={
+                      configMetadata[props.key].displayString ?? props.key
+                    }
+                    type="number"
+                    resetToDefaultIfEmptyOnBlur
+                  />
+                  <savedIndicator.component />
+                </div>
+              )}
+            />
+          </form>
+        </div>
+      );
+    }
+
+    const options = getVisibleOptions(props.key);
+
+    if (options !== undefined) {
+      return (
+        <div
+          class={cn(
+            "grid grid-cols-[repeat(auto-fit,minmax(4.5rem,1fr))] gap-2",
+            props.wide && "grid-cols-[repeat(auto-fit,minmax(13.5rem,1fr))]",
+          )}
+        >
+          <For each={options}>
+            {(option) => (
+              <Button
+                active={getConfig[props.key] === option}
+                onClick={() => {
+                  if (getConfig[props.key] === option) return;
+                  props.onOptionClick?.(option);
+                  setConfig(props.key, option);
+                }}
+              >
+                {getOptionLabel(props.key, option)}
+              </Button>
+            )}
+          </For>
+        </div>
+      );
+    }
+    return undefined;
+  };
+
+  return (
+    <SearchableSetting
+      key={props.key}
+      title={configMetadata[props.key].displayString ?? props.key}
+      fa={configMetadata[props.key].fa}
+      description={configMetadata[props.key].description}
+      extraSearchKeywords={getOptionSearchKeywords(props.key)}
+      inputs={!props.wide ? autoInputs() : props.inputs}
+      fullWidthInputs={
+        props.wide ? (autoInputs() ?? props.inputs) : props.inputs
+      }
+    />
+  );
+}
diff --git a/frontend/src/ts/components/pages/settings/SearchableSetting.tsx b/frontend/src/ts/components/pages/settings/SearchableSetting.tsx
new file mode 100644
index 000000000000..927a1707f9fa
--- /dev/null
+++ b/frontend/src/ts/components/pages/settings/SearchableSetting.tsx
@@ -0,0 +1,47 @@
+import { createMemo, JSXElement } from "solid-js";
+
+import {
+  registerSearchable,
+  settingMatchesSearch,
+} from "../../../states/settings-search";
+import { cn } from "../../../utils/cn";
+import { Setting, SettingProps } from "../../common/Setting";
+
+export type SearchableSettingProps = SettingProps & {
+  // extra text (e.g. option labels) the search filter also matches against
+  extraSearchKeywords?: string;
+};
+
+// pull plain text out of a (possibly JSX) description so search can match it.
+// solid renders JSX to real DOM nodes/arrays, so we can read their textContent.
+function textOf(node: string | JSXElement): string {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(textOf).join(" ");
+  if (node instanceof Node) return node.textContent ?? "";
+  return "";
+}
+
+// a Setting that hides itself when it doesn't match the active settings search.
+// hides (via css) instead of unmounting so typing doesn't remount every setting
+// on each keypress; the hidden class stays on the Setting root so the section
+// auto-collapse selector keeps working.
+export function SearchableSetting(props: SearchableSettingProps): JSXElement {
+  // static per setting — only the query changes as the user types, so build once
+  const haystack = createMemo(() =>
+    [props.title, textOf(props.description), props.extraSearchKeywords ?? ""]
+      .join(" ")
+      .toLowerCase(),
+  );
+
+  // scoring is global (a setting shows only if it ties the best match across all
+  // settings), so register this haystack for the shared best-match computation.
+  // oxlint-disable-next-line solid/reactivity -- getter stored, called in a tracked memo
+  registerSearchable(haystack);
+
+  return (
+    <Setting
+      {...props}
+      class={cn(props.class, !settingMatchesSearch(haystack()) && "hidden")}
+    />
+  );
+}
diff --git a/frontend/src/ts/components/pages/settings/SettingsPage.tsx b/frontend/src/ts/components/pages/settings/SettingsPage.tsx
index df344727ae74..9d098917df63 100644
--- a/frontend/src/ts/components/pages/settings/SettingsPage.tsx
+++ b/frontend/src/ts/components/pages/settings/SettingsPage.tsx
@@ -1,11 +1,7 @@
-import { Config, ConfigSchema } from "@monkeytype/schemas/configs";
-import { createForm } from "@tanstack/solid-form";
-import { createResource, createSignal, For, JSXElement, Show } from "solid-js";
+import { createResource, createSignal, JSXElement, Show } from "solid-js";
 import { z } from "zod";
 
 import { resetConfig } from "../../../config/lifecycle";
-import { configMetadata, OptionMetadata } from "../../../config/metadata";
-import { setConfig } from "../../../config/setters";
 import { getConfig } from "../../../config/store";
 import {
   playTimeWarning,
@@ -13,22 +9,18 @@ import {
   previewError,
 } from "../../../controllers/sound-controller";
 import { useLocalStorage } from "../../../hooks/useLocalStorage";
-import { useSavedIndicator } from "../../../hooks/useSavedIndicator";
 import { isAuthenticated } from "../../../states/core";
 import { showModal } from "../../../states/modals";
+import { isSettingsSearchActive } from "../../../states/settings-search";
 import { showSimpleModal } from "../../../states/simple-modal";
 import { cn } from "../../../utils/cn";
 import fileStorage from "../../../utils/file-storage";
 import { wordsToCamelCase } from "../../../utils/strings";
-import { getOptions } from "../../../utils/zod";
 import { Anime, AnimeShow } from "../../common/anime";
 import { Button } from "../../common/Button";
 import { Fa } from "../../common/Fa";
 import { Page } from "../../common/Page";
-import { Setting } from "../../common/Setting";
 import { CommandlineHotkey } from "../../hotkeys/CommandlineHotkey";
-import { InputField } from "../../ui/form/InputField";
-import { fromSchema } from "../../ui/form/utils";
 import { AnimationFpsLimit } from "./custom-setting/AnimationFpsLimit";
 import { AutoSwitchTheme } from "./custom-setting/AutoSwitchTheme";
 import { CustomBackground } from "./custom-setting/CustomBackground";
@@ -52,6 +44,9 @@ import { SoundVolume } from "./custom-setting/SoundVolume";
 import { Tags } from "./custom-setting/Tags";
 import { Theme } from "./custom-setting/Theme";
 import { QuickNav } from "./QuickNav";
+import { SearchableAutoSetting } from "./SearchableAutoSetting";
+import { SearchableSetting } from "./SearchableSetting";
+import { SettingsSearch } from "./SettingsSearch";
 
 export function SettingsPage(): JSXElement {
   const [hasLocalBg] = createResource(
@@ -62,54 +57,63 @@ export function SettingsPage(): JSXElement {
   return (
     <Page id="settings">
       <div class="grid gap-8">
-        <QuickNav />
+        {/* while filtering, only the matching settings stay visible; everything
+            else is hidden with css so nothing unmounts while typing */}
+        <QuickNav class={cn(isSettingsSearchActive() && "hidden")} />
         <Show when={getConfig.showKeyTips}>
-          <div class="text-center text-sub">
+          <div
+            class={cn(
+              "text-center text-sub",
+              isSettingsSearchActive() && "hidden",
+            )}
+          >
             tip: You can also change all these settings quickly using the
             command line
             <br />( <CommandlineHotkey /> )
           </div>
         </Show>
         <AccountSettingsNotice />
-        <div>
+        <SettingsSearch />
+        {/* while filtering, lay the matching sections out with a uniform gap */}
+        <div class={cn(isSettingsSearchActive() && "grid gap-8")}>
           <Section title="behavior">
             <Show when={isAuthenticated()}>
               <Tags />
               <Presets />
-              <AutoSetting key="resultSaving" />
+              <SearchableAutoSetting key="resultSaving" />
             </Show>
-            <AutoSetting key="difficulty" />
-            <AutoSetting key="quickRestart" />
-            <AutoSetting key="repeatQuotes" />
-            <AutoSetting key="blindMode" />
-            <AutoSetting key="alwaysShowWordsHistory" />
-            <AutoSetting key="singleListCommandLine" />
+            <SearchableAutoSetting key="difficulty" />
+            <SearchableAutoSetting key="quickRestart" />
+            <SearchableAutoSetting key="repeatQuotes" />
+            <SearchableAutoSetting key="blindMode" />
+            <SearchableAutoSetting key="alwaysShowWordsHistory" />
+            <SearchableAutoSetting key="singleListCommandLine" />
             <MinSpeed />
             <MinAcc />
             <MinBurst />
-            <AutoSetting key="britishEnglish" />
+            <SearchableAutoSetting key="britishEnglish" />
             <Language />
             <Funbox />
             <CustomLayoutfluid />
             <CustomPolyglot />
           </Section>
           <Section title="input">
-            <AutoSetting key="freedomMode" />
-            <AutoSetting key="strictSpace" />
-            <AutoSetting key="oppositeShiftMode" />
-            <AutoSetting key="stopOnError" />
-            <AutoSetting key="confidenceMode" />
-            <AutoSetting key="quickEnd" />
-            <AutoSetting key="indicateTypos" />
-            <AutoSetting key="hideExtraLetters" />
-            <AutoSetting key="compositionDisplay" />
-            <AutoSetting key="lazyMode" />
+            <SearchableAutoSetting key="freedomMode" />
+            <SearchableAutoSetting key="strictSpace" />
+            <SearchableAutoSetting key="oppositeShiftMode" />
+            <SearchableAutoSetting key="stopOnError" />
+            <SearchableAutoSetting key="confidenceMode" />
+            <SearchableAutoSetting key="quickEnd" />
+            <SearchableAutoSetting key="indicateTypos" />
+            <SearchableAutoSetting key="hideExtraLetters" />
+            <SearchableAutoSetting key="compositionDisplay" />
+            <SearchableAutoSetting key="lazyMode" />
             <Layout />
-            <AutoSetting key="codeUnindentOnBackspace" />
+            <SearchableAutoSetting key="codeUnindentOnBackspace" />
           </Section>
           <Section title="sound">
             <SoundVolume />
-            <AutoSetting
+            <SearchableAutoSetting
               key="playSoundOnClick"
               wide
               onOptionClick={(option) => {
@@ -117,7 +121,7 @@ export function SettingsPage(): JSXElement {
                 void previewClick(option);
               }}
             />
-            <AutoSetting
+            <SearchableAutoSetting
               key="playSoundOnError"
               wide
               onOptionClick={(option) => {
@@ -125,7 +129,7 @@ export function SettingsPage(): JSXElement {
                 void previewError(option);
               }}
             />
-            <AutoSetting
+            <SearchableAutoSetting
               key="playTimeWarning"
               wide
               onOptionClick={(option) => {
@@ -135,61 +139,61 @@ export function SettingsPage(): JSXElement {
             />
           </Section>
           <Section title="caret">
-            <AutoSetting key="smoothCaret" />
-            <AutoSetting key="caretStyle" wide />
+            <SearchableAutoSetting key="smoothCaret" />
+            <SearchableAutoSetting key="caretStyle" wide />
             <PaceCaret />
-            <AutoSetting key="repeatedPace" />
-            <AutoSetting key="paceCaretStyle" wide />
+            <SearchableAutoSetting key="repeatedPace" />
+            <SearchableAutoSetting key="paceCaretStyle" wide />
           </Section>
           <Section title="appearance">
-            <AutoSetting key="timerStyle" wide />
-            <AutoSetting key="liveSpeedStyle" />
-            <AutoSetting key="liveAccStyle" />
-            <AutoSetting key="liveBurstStyle" />
-            <AutoSetting key="timerColor" />
-            <AutoSetting key="timerOpacity" />
-            <AutoSetting key="highlightMode" wide />
-            <AutoSetting key="typedEffect" />
-            <AutoSetting key="tapeMode" />
-            <AutoSetting key="tapeMargin" />
-            <AutoSetting key="smoothLineScroll" />
-            <AutoSetting key="showAllLines" />
-            <AutoSetting key="alwaysShowDecimalPlaces" />
-            <AutoSetting key="typingSpeedUnit" />
-            <AutoSetting key="startGraphsAtZero" />
+            <SearchableAutoSetting key="timerStyle" wide />
+            <SearchableAutoSetting key="liveSpeedStyle" />
+            <SearchableAutoSetting key="liveAccStyle" />
+            <SearchableAutoSetting key="liveBurstStyle" />
+            <SearchableAutoSetting key="timerColor" />
+            <SearchableAutoSetting key="timerOpacity" />
+            <SearchableAutoSetting key="highlightMode" wide />
+            <SearchableAutoSetting key="typedEffect" />
+            <SearchableAutoSetting key="tapeMode" />
+            <SearchableAutoSetting key="tapeMargin" />
+            <SearchableAutoSetting key="smoothLineScroll" />
+            <SearchableAutoSetting key="showAllLines" />
+            <SearchableAutoSetting key="alwaysShowDecimalPlaces" />
+            <SearchableAutoSetting key="typingSpeedUnit" />
+            <SearchableAutoSetting key="startGraphsAtZero" />
             <MaxLineWidth />
-            <AutoSetting key="fontSize" />
+            <SearchableAutoSetting key="fontSize" />
             <FontFamily />
-            <AutoSetting key="keymapMode" />
+            <SearchableAutoSetting key="keymapMode" />
             <Show when={getConfig.keymapMode !== "off"}>
               <KeymapLayout />
-              <AutoSetting key="keymapStyle" wide />
-              <AutoSetting key="keymapLegendStyle" wide />
-              <AutoSetting key="keymapShowTopRow" wide />
+              <SearchableAutoSetting key="keymapStyle" wide />
+              <SearchableAutoSetting key="keymapLegendStyle" wide />
+              <SearchableAutoSetting key="keymapShowTopRow" wide />
               <KeymapSize />
             </Show>
           </Section>
           <Section title="theme">
-            <AutoSetting key="flipTestColors" />
-            <AutoSetting key="colorfulMode" />
+            <SearchableAutoSetting key="flipTestColors" />
+            <SearchableAutoSetting key="colorfulMode" />
             <CustomBackground />
             <Show when={getConfig.customBackground !== "" || hasLocalBg()}>
               <CustomBackgroundFilters />
             </Show>
             <AutoSwitchTheme />
-            <AutoSetting key="randomTheme" wide />
+            <SearchableAutoSetting key="randomTheme" wide />
             <Theme />
           </Section>
           <Section title="hide elements">
-            <AutoSetting key="showKeyTips" />
-            <AutoSetting key="showOutOfFocusWarning" />
-            <AutoSetting key="capsLockWarning" />
-            <AutoSetting key="showAverage" />
+            <SearchableAutoSetting key="showKeyTips" />
+            <SearchableAutoSetting key="showOutOfFocusWarning" />
+            <SearchableAutoSetting key="capsLockWarning" />
+            <SearchableAutoSetting key="showAverage" />
           </Section>
           <Section title="danger zone">
             <ImportExport />
-            <AutoSetting key="ads" />
-            <Setting
+            <SearchableAutoSetting key="ads" />
+            <SearchableSetting
               key="cookies"
               title="update cookie preferences"
               description="If you changed your mind about which cookies you consent to, you can change your preferences here."
@@ -208,7 +212,7 @@ export function SettingsPage(): JSXElement {
               }
             />
             <AnimationFpsLimit />
-            <Setting
+            <SearchableSetting
               key="resetSettings"
               title="reset settings"
               description={
@@ -262,7 +266,12 @@ function AccountSettingsNotice(): JSXElement {
   });
   return (
     <Show when={!dismissed()}>
-      <div class="grid grid-cols-[auto_1fr] items-center gap-4 rounded px-4 py-4 ring-4 ring-sub-alt md:grid-cols-[auto_1fr_auto] md:gap-8">
+      <div
+        class={cn(
+          "grid grid-cols-[auto_1fr] items-center gap-4 rounded px-4 py-4 ring-4 ring-sub-alt md:grid-cols-[auto_1fr_auto] md:gap-8",
+          isSettingsSearchActive() && "hidden",
+        )}
+      >
         <Fa icon="fa-user-cog" class="text-4xl text-sub" />
         <div>
           Account settings have moved. You can now access them by hovering over
@@ -287,10 +296,20 @@ function Section(props: { title: string; children: JSXElement }): JSXElement {
   const [isOpen, setIsOpen] = createSignal(true);
 
   return (
-    <div id={`group_${wordsToCamelCase(props.title)}`}>
+    <div
+      id={`group_${wordsToCamelCase(props.title)}`}
+      class={cn(
+        // when filtering, drop sections where every setting is hidden
+        isSettingsSearchActive() &&
+          "not-has-[[data-setting-key]:not(.hidden)]:hidden",
+      )}
+    >
       <Button
         variant="text"
-        class="mb-8 w-max gap-4 p-0 text-4xl"
+        class={cn(
+          "mb-8 w-max gap-4 p-0 text-4xl",
+          isSettingsSearchActive() && "hidden",
+        )}
         onClick={() => setIsOpen((prev) => !prev)}
       >
         <Anime
@@ -303,158 +322,14 @@ function Section(props: { title: string; children: JSXElement }): JSXElement {
         </Anime>
         {props.title}
       </Button>
-      <AnimeShow when={isOpen()} slide class="grid gap-8">
+      <AnimeShow
+        when={isOpen() || isSettingsSearchActive()}
+        slide
+        class="grid gap-8"
+      >
         {props.children}
-        <div class="h-16"></div>
+        <div class={cn("h-16", isSettingsSearchActive() && "hidden")}></div>
       </AnimeShow>
     </div>
   );
 }
-
-function AutoSetting<T extends keyof Config>(props: {
-  key: T;
-  inputs?: JSXElement;
-  wide?: boolean;
-  onOptionClick?: (value: Config[T]) => void;
-}): JSXElement {
-  const savedIndicator = useSavedIndicator();
-
-  const form = createForm(() => ({
-    defaultValues: {
-      [props.key]: getConfig[props.key],
-    },
-    onSubmit: ({ value }) => {
-      const val = parseFloat(String(value[props.key]));
-      if (val === getConfig[props.key]) return;
-      savedIndicator.flash();
-      setConfig(props.key, val as Config[T]);
-    },
-  }));
-
-  const autoInputs = () => {
-    if (
-      ConfigSchema.shape[props.key]._def.typeName ===
-      z.ZodFirstPartyTypeKind.ZodNumber
-    ) {
-      return (
-        <div class="grid w-full gap-2">
-          <form
-            onSubmit={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              void form.handleSubmit();
-            }}
-          >
-            <form.Field
-              //@ts-expect-error what
-              name={props.key}
-              validators={{
-                onChange: ({ value }) => {
-                  const val = parseFloat(String(value));
-                  if (isNaN(val)) {
-                    return "Must be a number";
-                  }
-                  return fromSchema(
-                    ConfigSchema.shape[props.key] as z.ZodNumber,
-                  )({
-                    value: val,
-                  });
-                },
-                onBlur: () => {
-                  void form.handleSubmit();
-                },
-              }}
-              children={(field) => (
-                <div class="relative">
-                  <InputField
-                    field={field}
-                    schema={ConfigSchema.shape[props.key]}
-                    placeholder={
-                      configMetadata[props.key].displayString ?? props.key
-                    }
-                    type="number"
-                    resetToDefaultIfEmptyOnBlur
-                  />
-                  <savedIndicator.component />
-                </div>
-              )}
-            />
-          </form>
-        </div>
-      );
-    }
-
-    const options = getOptions(ConfigSchema.shape[props.key])?.filter((opt) => {
-      const optionsMeta = (
-        configMetadata[props.key] as {
-          optionsMetadata?: Record<string, OptionMetadata> | undefined;
-        }
-      ).optionsMetadata;
-
-      const optionMeta = optionsMeta?.[String(opt)];
-
-      return optionMeta?.visible !== false;
-    });
-
-    if (options !== undefined) {
-      return (
-        <div
-          class={cn(
-            "grid grid-cols-[repeat(auto-fit,minmax(4.5rem,1fr))] gap-2",
-            props.wide && "grid-cols-[repeat(auto-fit,minmax(13.5rem,1fr))]",
-          )}
-        >
-          <For each={options}>
-            {(option) => {
-              const text = () => {
-                const optionsMeta = configMetadata[props.key]
-                  .optionsMetadata as
-                  | Record<string, { displayString?: string }>
-                  | undefined;
-                const match = optionsMeta?.[String(option)];
-                if (match?.displayString !== undefined) {
-                  return match.displayString;
-                }
-
-                if (option === true) {
-                  return "on";
-                }
-                if (option === false) {
-                  return "off";
-                }
-
-                return (option as string).toString().replace(/_/g, " ");
-              };
-              return (
-                <Button
-                  active={getConfig[props.key] === option}
-                  onClick={() => {
-                    if (getConfig[props.key] === option) return;
-                    props.onOptionClick?.(option as Config[T]);
-                    setConfig(props.key, option as Config[T]);
-                  }}
-                >
-                  {text()}
-                </Button>
-              );
-            }}
-          </For>
-        </div>
-      );
-    }
-    return undefined;
-  };
-
-  return (
-    <Setting
-      key={props.key}
-      title={configMetadata[props.key].displayString ?? props.key}
-      fa={configMetadata[props.key].fa}
-      description={configMetadata[props.key].description}
-      inputs={!props.wide ? autoInputs() : props.inputs}
-      fullWidthInputs={
-        props.wide ? (autoInputs() ?? props.inputs) : props.inputs
-      }
-    />
-  );
-}
diff --git a/frontend/src/ts/components/pages/settings/SettingsSearch.tsx b/frontend/src/ts/components/pages/settings/SettingsSearch.tsx
new file mode 100644
index 000000000000..40c74540da13
--- /dev/null
+++ b/frontend/src/ts/components/pages/settings/SettingsSearch.tsx
@@ -0,0 +1,44 @@
+import { JSXElement, onCleanup, Show } from "solid-js";
+
+import {
+  getSettingsSearch,
+  setSettingsSearch,
+} from "../../../states/settings-search";
+import { cn } from "../../../utils/cn";
+import { Button } from "../../common/Button";
+import { Fa } from "../../common/Fa";
+
+export function SettingsSearch(): JSXElement {
+  // reset the filter when leaving the settings page
+  onCleanup(() => setSettingsSearch(""));
+
+  return (
+    <div class="relative">
+      <Fa
+        icon="fa-search"
+        class="pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 text-sub"
+      />
+      <input
+        class={cn(
+          "w-full rounded border-none bg-sub-alt py-3 pr-10 pl-10",
+          "text-em-base text-text caret-main outline-none placeholder:text-sub",
+          "focus-visible:shadow-[0_0_0_0.1rem_var(--bg-color),0_0_0_0.2rem_var(--text-color)]",
+        )}
+        type="text"
+        placeholder="search settings"
+        autocomplete="off"
+        value={getSettingsSearch()}
+        onInput={(e) => setSettingsSearch(e.currentTarget.value)}
+      />
+      <Show when={getSettingsSearch() !== ""}>
+        <Button
+          variant="text"
+          class="absolute top-1/2 right-2 -translate-y-1/2"
+          fa={{ icon: "fa-times" }}
+          balloon={{ text: "clear search", position: "left" }}
+          onClick={() => setSettingsSearch("")}
+        />
+      </Show>
+    </div>
+  );
+}
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/AnimationFpsLimit.tsx b/frontend/src/ts/components/pages/settings/custom-setting/AnimationFpsLimit.tsx
index 0f17bc74865f..9ff96a46f325 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/AnimationFpsLimit.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/AnimationFpsLimit.tsx
@@ -5,9 +5,9 @@ import { fpsLimitSchema, getfpsLimit, setfpsLimit } from "../../../../anim";
 import { useSavedIndicator } from "../../../../hooks/useSavedIndicator";
 import { Button } from "../../../common/Button";
 import { Separator } from "../../../common/Separator";
-import { Setting } from "../../../common/Setting";
 import { InputField } from "../../../ui/form/InputField";
 import { fromSchema } from "../../../ui/form/utils";
+import { SearchableSetting } from "../SearchableSetting";
 
 export function AnimationFpsLimit(): JSXElement {
   const savedIndicator = useSavedIndicator();
@@ -24,7 +24,7 @@ export function AnimationFpsLimit(): JSXElement {
   }));
 
   return (
-    <Setting
+    <SearchableSetting
       key="animationFpsLimit"
       title="animation fps limit"
       description={`Limit the maximum fps for animations. Setting this to "native" will run the animations as fast as possible (at your monitor's refresh rate). Setting this above your monitor's refresh rate will have no effect.`}
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/AutoSwitchTheme.tsx b/frontend/src/ts/components/pages/settings/custom-setting/AutoSwitchTheme.tsx
index 9e53a2e09d5f..5f06eee972ea 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/AutoSwitchTheme.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/AutoSwitchTheme.tsx
@@ -7,12 +7,12 @@ import { getConfig } from "../../../../config/store";
 import { ThemesList } from "../../../../constants/themes";
 import { cn } from "../../../../utils/cn";
 import { Button } from "../../../common/Button";
-import { Setting } from "../../../common/Setting";
 import SlimSelect from "../../../ui/SlimSelect";
+import { SearchableSetting } from "../SearchableSetting";
 
 export function AutoSwitchTheme(): JSXElement {
   return (
-    <Setting
+    <SearchableSetting
       key="autoSwitchTheme"
       title={
         configMetadata.autoSwitchTheme.displayString ?? "auto switch theme"
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/CustomBackground.tsx b/frontend/src/ts/components/pages/settings/custom-setting/CustomBackground.tsx
index 0e79cc766360..74c65f3e6d68 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/CustomBackground.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/CustomBackground.tsx
@@ -5,7 +5,10 @@ import {
 import { createForm } from "@tanstack/solid-form";
 import { createResource, JSXElement, For, Show } from "solid-js";
 
-import { configMetadata } from "../../../../config/metadata";
+import {
+  configMetadata,
+  getOptionSearchKeywords,
+} from "../../../../config/metadata";
 import { setConfig } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
 import { applyCustomBackground } from "../../../../controllers/theme-controller";
@@ -16,9 +19,9 @@ import { getOptions } from "../../../../utils/zod";
 import { Button } from "../../../common/Button";
 import { Fa } from "../../../common/Fa";
 import { Separator } from "../../../common/Separator";
-import { Setting } from "../../../common/Setting";
 import { InputField } from "../../../ui/form/InputField";
 import { fromSchema } from "../../../ui/form/utils";
+import { SearchableSetting } from "../SearchableSetting";
 
 export function CustomBackground(): JSXElement {
   const savedIndicator = useSavedIndicator();
@@ -50,12 +53,13 @@ export function CustomBackground(): JSXElement {
   };
 
   return (
-    <Setting
+    <SearchableSetting
       key="customBackground"
       title={
         configMetadata.customBackground.displayString ?? "custom background"
       }
       fa={configMetadata.customBackground.fa}
+      extraSearchKeywords={getOptionSearchKeywords("customBackgroundSize")}
       description={
         <>
           {configMetadata.customBackground.description}
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/CustomBackgroundFilters.tsx b/frontend/src/ts/components/pages/settings/custom-setting/CustomBackgroundFilters.tsx
index 5a01de0fabaa..2f1aca854f97 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/CustomBackgroundFilters.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/CustomBackgroundFilters.tsx
@@ -4,8 +4,8 @@ import { configMetadata } from "../../../../config/metadata";
 import { setConfig } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
 import { applyCustomBackgroundFilters } from "../../../../controllers/theme-controller";
-import { Setting } from "../../../common/Setting";
 import { Slider } from "../../../common/Slider";
+import { SearchableSetting } from "../SearchableSetting";
 
 export function CustomBackgroundFilters(): JSXElement {
   let refBlur: HTMLInputElement | undefined = undefined;
@@ -26,7 +26,7 @@ export function CustomBackgroundFilters(): JSXElement {
   };
 
   return (
-    <Setting
+    <SearchableSetting
       key="customBackgroundFilter"
       title="custom background filters"
       description={configMetadata.customBackgroundFilter.description}
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/CustomLayoutfluid.tsx b/frontend/src/ts/components/pages/settings/custom-setting/CustomLayoutfluid.tsx
index ff8315d15530..bccef8afe9de 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/CustomLayoutfluid.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/CustomLayoutfluid.tsx
@@ -6,12 +6,12 @@ import { setConfig } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
 import { LayoutsList } from "../../../../constants/layouts";
 import { areUnsortedArraysEqual } from "../../../../utils/arrays";
-import { Setting } from "../../../common/Setting";
 import SlimSelect from "../../../ui/SlimSelect";
+import { SearchableSetting } from "../SearchableSetting";
 
 export function CustomLayoutfluid(): JSXElement {
   return (
-    <Setting
+    <SearchableSetting
       key="customLayoutfluid"
       title="custom layoutfluid"
       description={configMetadata.customLayoutfluid.description}
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/CustomPolyglot.tsx b/frontend/src/ts/components/pages/settings/custom-setting/CustomPolyglot.tsx
index 3b65c893504d..80f846be93be 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/CustomPolyglot.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/CustomPolyglot.tsx
@@ -11,12 +11,12 @@ import {
 } from "../../../../constants/languages";
 import { areUnsortedArraysEqual } from "../../../../utils/arrays";
 import { getLanguageDisplayString } from "../../../../utils/strings";
-import { Setting } from "../../../common/Setting";
 import SlimSelect from "../../../ui/SlimSelect";
+import { SearchableSetting } from "../SearchableSetting";
 
 export function CustomPolyglot(): JSXElement {
   return (
-    <Setting
+    <SearchableSetting
       key="customPolyglot"
       title="polyglot languages"
       description={configMetadata.customPolyglot.description}
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/FontFamily.tsx b/frontend/src/ts/components/pages/settings/custom-setting/FontFamily.tsx
index 122ed1d47a86..44cd8bdee7d2 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/FontFamily.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/FontFamily.tsx
@@ -3,7 +3,10 @@ import { FontNameSchema } from "@monkeytype/schemas/fonts";
 import { createResource, For, JSXElement, Show } from "solid-js";
 import { z } from "zod";
 
-import { configMetadata } from "../../../../config/metadata";
+import {
+  configMetadata,
+  getOptionSearchKeywords,
+} from "../../../../config/metadata";
 import { setConfig } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
 import { showNoticeNotification } from "../../../../states/notifications";
@@ -14,7 +17,7 @@ import { normalizeName } from "../../../../utils/strings";
 import { getOptions } from "../../../../utils/zod";
 import { Button } from "../../../common/Button";
 import { Separator } from "../../../common/Separator";
-import { Setting } from "../../../common/Setting";
+import { SearchableSetting } from "../SearchableSetting";
 
 export function FontFamily(): JSXElement {
   const [hasLocalFont, { refetch }] = createResource(async () =>
@@ -35,10 +38,11 @@ export function FontFamily(): JSXElement {
   };
 
   return (
-    <Setting
+    <SearchableSetting
       key="fontFamily"
       title={configMetadata.fontFamily.displayString ?? "font family"}
       fa={configMetadata.fontFamily.fa}
+      extraSearchKeywords={getOptionSearchKeywords("fontFamily")}
       description={
         <>
           {configMetadata.fontFamily.description}
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/Funbox.tsx b/frontend/src/ts/components/pages/settings/custom-setting/Funbox.tsx
index a13ec89540f9..8af71772921a 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/Funbox.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/Funbox.tsx
@@ -7,11 +7,11 @@ import { toggleFunbox } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
 import { getActiveFunboxNames } from "../../../../test/funbox/list";
 import { Button } from "../../../common/Button";
-import { Setting } from "../../../common/Setting";
+import { SearchableSetting } from "../SearchableSetting";
 
 export function Funbox(): JSXElement {
   return (
-    <Setting
+    <SearchableSetting
       key="funbox"
       title="funbox"
       description={configMetadata.funbox.description}
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/ImportExport.tsx b/frontend/src/ts/components/pages/settings/custom-setting/ImportExport.tsx
index 83581b4ac7e6..0cc9735fe846 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/ImportExport.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/ImportExport.tsx
@@ -9,11 +9,11 @@ import {
 } from "../../../../states/notifications";
 import { showSimpleModal } from "../../../../states/simple-modal";
 import { Button } from "../../../common/Button";
-import { Setting } from "../../../common/Setting";
+import { SearchableSetting } from "../SearchableSetting";
 
 export function ImportExport(): JSXElement {
   return (
-    <Setting
+    <SearchableSetting
       key="importExport"
       title="import/export settings"
       description="Import or export the settings as JSON."
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/KeymapLayout.tsx b/frontend/src/ts/components/pages/settings/custom-setting/KeymapLayout.tsx
index fb7bb99b2366..dd347ee9e949 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/KeymapLayout.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/KeymapLayout.tsx
@@ -5,12 +5,12 @@ import { configMetadata } from "../../../../config/metadata";
 import { setConfig } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
 import { LayoutsList } from "../../../../constants/layouts";
-import { Setting } from "../../../common/Setting";
 import SlimSelect from "../../../ui/SlimSelect";
+import { SearchableSetting } from "../SearchableSetting";
 
 export function KeymapLayout(): JSXElement {
   return (
-    <Setting
+    <SearchableSetting
       key="keymapLayout"
       title="keymap layout"
       description={configMetadata.keymapLayout.description}
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/KeymapSize.tsx b/frontend/src/ts/components/pages/settings/custom-setting/KeymapSize.tsx
index 3da2f86f1145..020566bc8315 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/KeymapSize.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/KeymapSize.tsx
@@ -3,12 +3,12 @@ import { JSXElement } from "solid-js";
 import { configMetadata } from "../../../../config/metadata";
 import { setConfig } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
-import { Setting } from "../../../common/Setting";
 import { Slider } from "../../../common/Slider";
+import { SearchableSetting } from "../SearchableSetting";
 
 export function KeymapSize(): JSXElement {
   return (
-    <Setting
+    <SearchableSetting
       key="keymapSize"
       title="keymap size"
       description={configMetadata.keymapSize.description}
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/Language.tsx b/frontend/src/ts/components/pages/settings/custom-setting/Language.tsx
index 05da846d38b8..63be4e8d411e 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/Language.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/Language.tsx
@@ -10,12 +10,12 @@ import {
   LanguageGroups,
 } from "../../../../constants/languages";
 import { getLanguageDisplayString } from "../../../../utils/strings";
-import { Setting } from "../../../common/Setting";
 import SlimSelect from "../../../ui/SlimSelect";
+import { SearchableSetting } from "../SearchableSetting";
 
 export function Language(): JSXElement {
   return (
-    <Setting
+    <SearchableSetting
       key="language"
       title="language"
       description={configMetadata.language.description}
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/Layout.tsx b/frontend/src/ts/components/pages/settings/custom-setting/Layout.tsx
index 03b715be812c..719169d16329 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/Layout.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/Layout.tsx
@@ -5,12 +5,12 @@ import { configMetadata } from "../../../../config/metadata";
 import { setConfig } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
 import { LayoutsList } from "../../../../constants/layouts";
-import { Setting } from "../../../common/Setting";
 import SlimSelect from "../../../ui/SlimSelect";
+import { SearchableSetting } from "../SearchableSetting";
 
 export function Layout(): JSXElement {
   return (
-    <Setting
+    <SearchableSetting
       key="layout"
       title="layout"
       description={configMetadata.layout.description}
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/MaxLineWidth.tsx b/frontend/src/ts/components/pages/settings/custom-setting/MaxLineWidth.tsx
index 59e9d59cdd04..74d60ad3b301 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/MaxLineWidth.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/MaxLineWidth.tsx
@@ -6,10 +6,10 @@ import { configMetadata } from "../../../../config/metadata";
 import { setConfig } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
 import { useSavedIndicator } from "../../../../hooks/useSavedIndicator";
-import { Setting } from "../../../common/Setting";
 // import { showSuccessNotification } from "../../../../states/notifications";
 import { InputField } from "../../../ui/form/InputField";
 import { fromSchema } from "../../../ui/form/utils";
+import { SearchableSetting } from "../SearchableSetting";
 
 export function MaxLineWidth(): JSXElement {
   const { component: SavedIndicator, flash } = useSavedIndicator();
@@ -27,7 +27,7 @@ export function MaxLineWidth(): JSXElement {
   }));
 
   return (
-    <Setting
+    <SearchableSetting
       key="maxLineWidth"
       title={configMetadata.maxLineWidth.displayString ?? "max line width"}
       fa={configMetadata.maxLineWidth.fa}
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/MinAcc.tsx b/frontend/src/ts/components/pages/settings/custom-setting/MinAcc.tsx
index 7db767a927a7..47204d95869d 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/MinAcc.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/MinAcc.tsx
@@ -8,9 +8,9 @@ import { getConfig } from "../../../../config/store";
 import { useSavedIndicator } from "../../../../hooks/useSavedIndicator";
 // import { showSuccessNotification } from "../../../../states/notifications";
 import { Button } from "../../../common/Button";
-import { Setting } from "../../../common/Setting";
 import { InputField } from "../../../ui/form/InputField";
 import { fromSchema } from "../../../ui/form/utils";
+import { SearchableSetting } from "../SearchableSetting";
 
 export function MinAcc(): JSXElement {
   const savedIndicator = useSavedIndicator();
@@ -33,7 +33,7 @@ export function MinAcc(): JSXElement {
   }));
 
   return (
-    <Setting
+    <SearchableSetting
       key="minAcc"
       title={configMetadata.minAcc.displayString ?? "min accuracy"}
       fa={configMetadata.minAcc.fa}
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/MinBurst.tsx b/frontend/src/ts/components/pages/settings/custom-setting/MinBurst.tsx
index 8600b2a825ca..45293467adda 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/MinBurst.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/MinBurst.tsx
@@ -8,9 +8,9 @@ import { getConfig } from "../../../../config/store";
 import { useSavedIndicator } from "../../../../hooks/useSavedIndicator";
 // import { showSuccessNotification } from "../../../../states/notifications";
 import { Button } from "../../../common/Button";
-import { Setting } from "../../../common/Setting";
 import { InputField } from "../../../ui/form/InputField";
 import { fromSchema } from "../../../ui/form/utils";
+import { SearchableSetting } from "../SearchableSetting";
 
 export function MinBurst(): JSXElement {
   const savedIndicator = useSavedIndicator();
@@ -33,7 +33,7 @@ export function MinBurst(): JSXElement {
   }));
 
   return (
-    <Setting
+    <SearchableSetting
       key="minBurst"
       title={configMetadata.minBurst.displayString ?? "min burst"}
       fa={configMetadata.minBurst.fa}
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/MinSpeed.tsx b/frontend/src/ts/components/pages/settings/custom-setting/MinSpeed.tsx
index 34a21200f0af..fc4a1a8d754c 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/MinSpeed.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/MinSpeed.tsx
@@ -8,9 +8,9 @@ import { getConfig } from "../../../../config/store";
 import { useSavedIndicator } from "../../../../hooks/useSavedIndicator";
 // import { showSuccessNotification } from "../../../../states/notifications";
 import { Button } from "../../../common/Button";
-import { Setting } from "../../../common/Setting";
 import { InputField } from "../../../ui/form/InputField";
 import { fromSchema } from "../../../ui/form/utils";
+import { SearchableSetting } from "../SearchableSetting";
 
 export function MinSpeed(): JSXElement {
   const savedIndicator = useSavedIndicator();
@@ -33,7 +33,7 @@ export function MinSpeed(): JSXElement {
   }));
 
   return (
-    <Setting
+    <SearchableSetting
       key="minSpeed"
       title={configMetadata.minWpm.displayString ?? "min speed"}
       fa={configMetadata.minWpm.fa}
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/PaceCaret.tsx b/frontend/src/ts/components/pages/settings/custom-setting/PaceCaret.tsx
index ea019e169907..8e20275d3d91 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/PaceCaret.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/PaceCaret.tsx
@@ -5,15 +5,18 @@ import {
 import { createForm } from "@tanstack/solid-form";
 import { For, JSXElement } from "solid-js";
 
-import { configMetadata } from "../../../../config/metadata";
+import {
+  configMetadata,
+  getOptionSearchKeywords,
+} from "../../../../config/metadata";
 import { setConfig } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
 import { useSavedIndicator } from "../../../../hooks/useSavedIndicator";
 import { getOptions } from "../../../../utils/zod";
 import { Button } from "../../../common/Button";
-import { Setting } from "../../../common/Setting";
 import { InputField } from "../../../ui/form/InputField";
 import { fromSchema } from "../../../ui/form/utils";
+import { SearchableSetting } from "../SearchableSetting";
 
 export function PaceCaret(): JSXElement {
   const savedIndicator = useSavedIndicator();
@@ -36,10 +39,11 @@ export function PaceCaret(): JSXElement {
   }));
 
   return (
-    <Setting
+    <SearchableSetting
       key="paceCaret"
       title={configMetadata.paceCaret.displayString ?? "pace caret"}
       fa={configMetadata.paceCaret.fa}
+      extraSearchKeywords={getOptionSearchKeywords("paceCaret")}
       description={configMetadata.paceCaret.description}
       inputs={
         <div class="grid w-full gap-2">
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/Presets.tsx b/frontend/src/ts/components/pages/settings/custom-setting/Presets.tsx
index 334cbe43029a..314db8695a75 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/Presets.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/Presets.tsx
@@ -9,13 +9,13 @@ import { showEditPresetModal } from "../../../../states/edit-preset-modal";
 import { showModal } from "../../../../states/modals";
 import { showSimpleModal } from "../../../../states/simple-modal";
 import { Button } from "../../../common/Button";
-import { Setting } from "../../../common/Setting";
+import { SearchableSetting } from "../SearchableSetting";
 
 export function Presets(): JSXElement {
   const presets = usePresetsLiveQuery();
 
   return (
-    <Setting
+    <SearchableSetting
       key="presets"
       title="presets"
       description="Create settings presets that can be applied with one click. Remember to edit your preset if you make any changes - they don't save on their own."
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/SoundVolume.tsx b/frontend/src/ts/components/pages/settings/custom-setting/SoundVolume.tsx
index 043cce5fa24e..812fcb40544f 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/SoundVolume.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/SoundVolume.tsx
@@ -7,12 +7,12 @@ import {
   playClick,
   previewClick,
 } from "../../../../controllers/sound-controller";
-import { Setting } from "../../../common/Setting";
 import { Slider } from "../../../common/Slider";
+import { SearchableSetting } from "../SearchableSetting";
 
 export function SoundVolume(): JSXElement {
   return (
-    <Setting
+    <SearchableSetting
       key="soundVolume"
       title="sound volume"
       description={configMetadata.soundVolume.description}
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/Tags.tsx b/frontend/src/ts/components/pages/settings/custom-setting/Tags.tsx
index 969e7f2655fa..df06120a7d88 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/Tags.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/Tags.tsx
@@ -13,14 +13,14 @@ import {
 import { showSimpleModal } from "../../../../states/simple-modal";
 import { normalizeName } from "../../../../utils/strings";
 import { Button } from "../../../common/Button";
-import { Setting } from "../../../common/Setting";
 import { showAddTagModal } from "../../../modals/AddTagModal";
+import { SearchableSetting } from "../SearchableSetting";
 
 export function Tags(): JSXElement {
   const tags = useTagsLiveQuery();
 
   return (
-    <Setting
+    <SearchableSetting
       key="tags"
       title="tags"
       description="With tags, you can compare how fast you're typing in different situations. You can see your active tags above the test words. They will remain active until you deactivate them, or refresh the page."
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/Theme.tsx b/frontend/src/ts/components/pages/settings/custom-setting/Theme.tsx
index b72ba8bbda8c..55138be2db30 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/Theme.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/Theme.tsx
@@ -41,7 +41,7 @@ import { AnimeMatch } from "../../../common/anime/AnimeMatch";
 import { Button } from "../../../common/Button";
 import { Fa } from "../../../common/Fa";
 import { Separator } from "../../../common/Separator";
-import { Setting } from "../../../common/Setting";
+import { SearchableSetting } from "../SearchableSetting";
 
 export const sortedThemes: ThemeWithName[] = [...ThemesList].sort((a, b) => {
   const b1 = hexToHSL(a.bg);
@@ -254,7 +254,7 @@ export function Theme(): JSXElement {
   );
 
   return (
-    <Setting
+    <SearchableSetting
       key="theme"
       title={configMetadata.theme.displayString ?? "theme"}
       fa={configMetadata.theme.fa}
diff --git a/frontend/src/ts/config/metadata.tsx b/frontend/src/ts/config/metadata.tsx
index aaf6f16d0c30..874f7dcd8459 100644
--- a/frontend/src/ts/config/metadata.tsx
+++ b/frontend/src/ts/config/metadata.tsx
@@ -11,6 +11,7 @@ import { FaObject } from "../types/font-awesome";
 import { isDevEnvironment } from "../utils/env";
 import { reloadAfter } from "../utils/misc";
 import { capitalizeFirstLetter } from "../utils/strings";
+import { getOptions } from "../utils/zod";
 import { canSetFunboxWithConfig } from "./funbox-validation";
 // type SetBlock = {
 //   [K in keyof ConfigSchemas.Config]?: ConfigSchemas.Config[K][];
@@ -1301,3 +1302,47 @@ export const configMetadata: ConfigMetadataObject = {
     },
   },
 };
+
+// typed accessor for a single option's metadata, avoiding per-callsite casts
+export function getOptionMetadata<K extends keyof ConfigSchemas.Config>(
+  key: K,
+  option: ConfigSchemas.Config[K],
+): OptionMetadata | undefined {
+  return (
+    configMetadata[key] as {
+      optionsMetadata?: Record<string, OptionMetadata> | undefined;
+    }
+  ).optionsMetadata?.[String(option)];
+}
+
+// the selectable options for a config key, excluding those marked visible:false
+export function getVisibleOptions<K extends keyof ConfigSchemas.Config>(
+  key: K,
+): ConfigSchemas.Config[K][] | undefined {
+  return getOptions(ConfigSchemas.ConfigSchema.shape[key])?.filter(
+    (option) =>
+      getOptionMetadata(key, option as ConfigSchemas.Config[K])?.visible !==
+      false,
+  ) as ConfigSchemas.Config[K][] | undefined;
+}
+
+// the label shown for a single option (and used to match it while searching)
+export function getOptionLabel<K extends keyof ConfigSchemas.Config>(
+  key: K,
+  option: ConfigSchemas.Config[K],
+): string {
+  const optionMeta = getOptionMetadata(key, option);
+  if (optionMeta?.displayString !== undefined) return optionMeta.displayString;
+  if (option === true) return "on";
+  if (option === false) return "off";
+  return String(option).replace(/_/g, " ");
+}
+
+// all of a setting's visible option labels joined, so search can match on them
+export function getOptionSearchKeywords<K extends keyof ConfigSchemas.Config>(
+  key: K,
+): string {
+  return (getVisibleOptions(key) ?? [])
+    .map((option) => getOptionLabel(key, option))
+    .join(" ");
+}
diff --git a/frontend/src/ts/states/settings-search.ts b/frontend/src/ts/states/settings-search.ts
new file mode 100644
index 000000000000..bf23de49a4f2
--- /dev/null
+++ b/frontend/src/ts/states/settings-search.ts
@@ -0,0 +1,60 @@
+import { createMemo, createSignal, onCleanup } from "solid-js";
+
+// the current settings filter query, shared between the search input and the
+// settings/sections that hide themselves when they don't match
+export const [getSettingsSearch, setSettingsSearch] = createSignal("");
+
+export const isSettingsSearchActive = (): boolean =>
+  getSettingsSearch().trim() !== "";
+
+// registry of every searchable setting's haystack getter. settings register on
+// mount and clean up on unmount, so best-match scoring sees only live settings.
+const [getHaystacks, setHaystacks] = createSignal<Set<() => string>>(
+  new Set(),
+  {
+    equals: false,
+  },
+);
+
+export function registerSearchable(haystack: () => string): void {
+  setHaystacks((s) => s.add(haystack));
+  onCleanup(() =>
+    setHaystacks((s) => {
+      s.delete(haystack);
+      return s;
+    }),
+  );
+}
+
+const queryTokens = createMemo(() => {
+  const query = getSettingsSearch().trim().toLowerCase();
+  return query === "" ? [] : query.split(/\s+/);
+});
+
+// how many of the query's tokens appear in this haystack
+function scoreOf(haystack: string, tokens: string[]): number {
+  let score = 0;
+  for (const token of tokens) if (haystack.includes(token)) score++;
+  return score;
+}
+
+// the highest token-match count any live setting achieves for the current query.
+// we only reveal settings that tie this, so a partial match shows only when
+// nothing matches better (2/2 beats 1/2; 1/2 shows only if nothing hits 2/2).
+const bestScore = createMemo(() => {
+  const tokens = queryTokens();
+  if (tokens.length === 0) return 0;
+  let best = 0;
+  for (const haystack of getHaystacks()) {
+    const score = scoreOf(haystack(), tokens);
+    if (score > best) best = score;
+  }
+  return best;
+});
+
+export function settingMatchesSearch(haystack: string): boolean {
+  const tokens = queryTokens();
+  if (tokens.length === 0) return true;
+  const best = bestScore();
+  return best > 0 && scoreOf(haystack, tokens) === best;
+}