Focus Management

Programmatic control of focus.

html

<div class="fm-demo" data-target="heading" style="--accent:#F5C2E0;">
  <div class="fm-demo__panel">
    <div class="fm-demo__head">
      <h3 class="fm-demo__title fm-demo__ring">Add teammate</h3>
      <button type="button" class="fm-demo__close fm-demo__ring" aria-label="Close">&times;</button>
    </div>
    <label class="fm-demo__field-label">Email
      <input class="fm-demo__field fm-demo__ring" type="email" placeholder="name@example.com" />
    </label>
  </div>
  <p class="fm-demo__caption">On open, focus moves to the heading</p>
</div>
<style>
.fm-demo { width: 320px; font: 14px system-ui, sans-serif; color: #241430; }
.fm-demo__panel { border-radius: 12px; border: 1.5px solid #24143022; padding: 16px; background: #FAF7F2; }
.fm-demo__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.fm-demo__title { margin: 0; font-size: 16px; }
.fm-demo__close { border: none; background: transparent; font-size: 18px; cursor: pointer; }
.fm-demo__field-label { display: block; font-size: 12px; font-weight: 600; }
.fm-demo__field { display: block; margin-top: 6px; width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 6px; border: 1.5px solid #24143033; font: inherit; }
.fm-demo__ring { outline: none; border-radius: 6px; }
.fm-demo[data-target="heading"] .fm-demo__title.fm-demo__ring { outline: 3px solid var(--accent); outline-offset: 3px; }
.fm-demo[data-target="closeButton"] .fm-demo__close.fm-demo__ring { outline: 3px solid var(--accent); outline-offset: 2px; }
.fm-demo[data-target="firstField"] .fm-demo__field.fm-demo__ring { outline: 3px solid var(--accent); outline-offset: 1px; }
.fm-demo__caption { margin-top: 10px; font-size: 12px; color: #241430aa; }
</style>

tailwind

<div class="fm-tw fm-tw--heading" style="width:320px;font-family:system-ui,sans-serif;color:#241430">
  <div class="rounded-xl border p-4" style="border-color:#24143022;background:#FAF7F2">
    <div class="flex items-center justify-between mb-3">
      <h3 class="fm-tw__title m-0 text-base rounded-md">Add teammate</h3>
      <button type="button" aria-label="Close" class="fm-tw__close border-0 bg-transparent text-lg cursor-pointer rounded-md">&times;</button>
    </div>
    <label class="block text-xs font-semibold">Email
      <input type="email" placeholder="name@example.com" class="fm-tw__field block mt-1.5 w-full box-border px-2.5 py-2 rounded-md border" style="border-color:#24143033" />
    </label>
  </div>
  <p class="mt-2.5 text-xs text-[#241430aa]">On open, focus moves to the heading</p>
</div>
<style>
.fm-tw--heading .fm-tw__title { outline: 3px solid #F5C2E0; outline-offset: 3px; }
.fm-tw--closeButton .fm-tw__close { outline: 3px solid #F5C2E0; outline-offset: 2px; }
.fm-tw--firstField .fm-tw__field { outline: 3px solid #F5C2E0; outline-offset: 1px; }
</style>

react

export function FocusManagement({
  title = "Add teammate",
  target = "heading",
  accent = "#F5C2E0",
}) {
  const ring = { outline: "3px solid " + accent, outlineOffset: 2, borderRadius: 6 };
  return (
    <div style={{ width: 320, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <div style={{ borderRadius: 12, border: "1.5px solid #24143022", padding: 16, background: "#FAF7F2" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
          <h3 style={{ margin: 0, fontSize: 16, ...(target === "heading" ? ring : {}) }}>{title}</h3>
          <button type="button" aria-label="Close" style={{ border: "none", background: "transparent", fontSize: 18, cursor: "pointer", ...(target === "closeButton" ? ring : {}) }}>&times;</button>
        </div>
        <label style={{ display: "block", fontSize: 12, fontWeight: 600 }}>Email
          <input type="email" placeholder="name@example.com" style={{ display: "block", marginTop: 6, width: "100%", boxSizing: "border-box", padding: "8px 10px", borderRadius: 6, border: "1.5px solid #24143033", font: "inherit", ...(target === "firstField" ? ring : {}) }} />
        </label>
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430aa" }}>On open, focus moves to the {target}</p>
    </div>
  );
}