Edit Find and Replace · UI Element Compendium

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

{
  "html": "<div class=\"findreplace\" style=\"--accent:{{accent}};\">\n  <div class=\"findreplace__row\">\n    <svg viewBox=\"0 0 20 20\" width=\"14\" height=\"14\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"8.5\" r=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"/><path d=\"M13 13l4 4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"/></svg>\n    <input type=\"text\" value=\"{{findText}}\" readonly aria-label=\"Find\">\n    <span class=\"findreplace__count\">{{matchCount}} matches</span>\n  </div>\n  <div class=\"findreplace__row\">\n    <svg viewBox=\"0 0 20 20\" width=\"14\" height=\"14\" aria-hidden=\"true\"><path d=\"M4 10h9M13 10l-3-3M13 10l-3 3\" stroke=\"currentColor\" stroke-width=\"1.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    <input type=\"text\" value=\"{{replaceText}}\" readonly aria-label=\"Replace with\">\n    <button type=\"button\" class=\"findreplace__all\">Replace all</button>\n  </div>\n  <label class=\"findreplace__case\">\n    <span class=\"findreplace__toggle {{#if matchCase}}findreplace__toggle--on{{/if}}\" aria-hidden=\"true\"></span>\n    <span>Match case</span>\n  </label>\n</div>\n<style>\n.findreplace { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; border: 1.5px solid #24143022; border-radius: 10px; padding: 12px; max-width: 300px; }\n.findreplace__row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; }\n.findreplace__row input { flex: 1; border: 1.5px solid #24143033; border-radius: 6px; padding: 5px 8px; font: inherit; color: #241430; background: #fff; min-width: 0; }\n.findreplace__row input:focus-visible { outline: 2px solid var(--accent); }\n.findreplace__count { font-size: 12px; color: #24143099; white-space: nowrap; }\n.findreplace__all { margin-left: auto; border: none; background: var(--accent); color: #241430; font: 600 12px system-ui, sans-serif; padding: 6px 10px; border-radius: 6px; cursor: pointer; }\n.findreplace__case { display: flex; align-items: center; gap: 8px; padding: 6px 4px 2px; font-size: 13px; cursor: pointer; }\n.findreplace__toggle { width: 30px; height: 17px; border-radius: 999px; background: #24143033; position: relative; display: inline-block; }\n@media (prefers-reduced-motion: no-preference) {\n.findreplace__toggle { transition: background .15s; }\n}\n.findreplace__toggle::after { content: \"\"; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; }\n@media (prefers-reduced-motion: no-preference) {\n.findreplace__toggle::after { transition: transform .15s; }\n}\n.findreplace__toggle--on { background: var(--accent); }\n.findreplace__toggle--on::after { transform: translateX(13px); }\n</style>",
  "tailwind": "<div style=\"--accent:{{accent}};\" class=\"font-sans text-sm text-[#241430] bg-[#FAF7F2] border-[1.5px] border-[#24143022] rounded-[10px] p-3 max-w-[300px]\">\n  <div class=\"flex items-center gap-2 py-1.5 px-1\">\n    <svg viewBox=\"0 0 20 20\" width=\"14\" height=\"14\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"8.5\" r=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"/><path d=\"M13 13l4 4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"/></svg>\n    <input type=\"text\" value=\"{{findText}}\" readonly aria-label=\"Find\" class=\"flex-1 min-w-0 border-[1.5px] border-[#24143033] rounded-md px-2 py-1 bg-white text-[#241430]\">\n    <span class=\"text-xs text-[#241430]/60 whitespace-nowrap\">{{matchCount}} matches</span>\n  </div>\n  <div class=\"flex items-center gap-2 py-1.5 px-1\">\n    <svg viewBox=\"0 0 20 20\" width=\"14\" height=\"14\" aria-hidden=\"true\"><path d=\"M4 10h9M13 10l-3-3M13 10l-3 3\" stroke=\"currentColor\" stroke-width=\"1.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    <input type=\"text\" value=\"{{replaceText}}\" readonly aria-label=\"Replace with\" class=\"flex-1 min-w-0 border-[1.5px] border-[#24143033] rounded-md px-2 py-1 bg-white text-[#241430]\">\n    <button type=\"button\" class=\"ml-auto border-0 text-[#241430] font-semibold text-xs px-2.5 py-1.5 rounded-md\" style=\"background:{{accent}}\">Replace all</button>\n  </div>\n  <label class=\"flex items-center gap-2 pt-1.5 pb-0.5 px-1 text-[13px] cursor-pointer\">\n    <span class=\"findreplace-tw__toggle {{#if matchCase}}findreplace-tw__toggle--on{{/if}} inline-block w-[30px] h-[17px] rounded-full relative\" aria-hidden=\"true\"></span>\n    <span>Match case</span>\n  </label>\n</div>\n<style>\n.findreplace-tw__toggle { background: #24143033; }\n@media (prefers-reduced-motion: no-preference) {\n.findreplace-tw__toggle { transition: background .15s; }\n}\n.findreplace-tw__toggle::after { content: \"\"; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; }\n@media (prefers-reduced-motion: no-preference) {\n.findreplace-tw__toggle::after { transition: transform .15s; }\n}\n.findreplace-tw__toggle--on { background: var(--accent); }\n.findreplace-tw__toggle--on::after { transform: translateX(13px); }\n</style>",
  "react": "export function FindAndReplace({\n  findText = \"{{findText}}\",\n  replaceText = \"{{replaceText}}\",\n  matchCount = {{matchCount}},\n  matchCase = {{matchCase}},\n  accent = \"{{accent}}\",\n}) {\n  return (\n    <div style={{ fontFamily: \"system-ui, sans-serif\", fontSize: 14, color: \"#241430\", background: \"#FAF7F2\",\n      border: \"1.5px solid #24143022\", borderRadius: 10, padding: 12, maxWidth: 300 }}>\n      <div style={{ display: \"flex\", alignItems: \"center\", gap: 8, padding: \"6px 4px\" }}>\n        <svg viewBox=\"0 0 20 20\" width=\"14\" height=\"14\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"8.5\" r=\"6\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.6\" /><path d=\"M13 13l4 4\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" /></svg>\n        <input type=\"text\" readOnly value={findText} aria-label=\"Find\" style={{ flex: 1, minWidth: 0, border: \"1.5px solid #24143033\", borderRadius: 6, padding: \"5px 8px\", font: \"inherit\", color: \"#241430\", background: \"#fff\" }} />\n        <span style={{ fontSize: 12, color: \"#24143099\", whiteSpace: \"nowrap\" }}>{matchCount} matches</span>\n      </div>\n      <div style={{ display: \"flex\", alignItems: \"center\", gap: 8, padding: \"6px 4px\" }}>\n        <svg viewBox=\"0 0 20 20\" width=\"14\" height=\"14\" aria-hidden=\"true\"><path d=\"M4 10h9M13 10l-3-3M13 10l-3 3\" stroke=\"currentColor\" strokeWidth=\"1.6\" fill=\"none\" strokeLinecap=\"round\" strokeLinejoin=\"round\" /></svg>\n        <input type=\"text\" readOnly value={replaceText} aria-label=\"Replace with\" style={{ flex: 1, minWidth: 0, border: \"1.5px solid #24143033\", borderRadius: 6, padding: \"5px 8px\", font: \"inherit\", color: \"#241430\", background: \"#fff\" }} />\n        <button type=\"button\" style={{ marginLeft: \"auto\", border: \"none\", background: accent, color: \"#241430\", fontSize: 12, fontWeight: 600, padding: \"6px 10px\", borderRadius: 6, cursor: \"pointer\" }}>Replace all</button>\n      </div>\n      <label style={{ display: \"flex\", alignItems: \"center\", gap: 8, padding: \"6px 4px 2px\", fontSize: 13, cursor: \"pointer\" }}>\n        <span style={{ width: 30, height: 17, borderRadius: 999, position: \"relative\", display: \"inline-block\",\n          background: matchCase ? accent : \"#24143033\" }}>\n          <span className=\"far-thumb\" style={{ position: \"absolute\", top: 2, left: matchCase ? 15 : 2, width: 13, height: 13, borderRadius: \"50%\", background: \"#fff\" }} />\n        </span>\n        <span>Match case</span>\n      </label>\n      <style>{`\n        @media (prefers-reduced-motion: no-preference) {\n          .far-thumb { transition: left .15s; }\n        }\n      `}</style>\n    </div>\n  );\n}"
}