Focus Group

A container that draws one focus ring when a child inside it takes focus.

Standalone

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/focus-group.css" />

Default

Add data-focus-within to the container and data-focus to the focusable elements inside it. The parent shows the outline; the children suppress their own.

script.js

<style>
  .card {
    & header span {
      margin-right: auto;
    }

    & textarea {
      box-shadow: none;
      resize: none;
      font-family: monospace;
    }

    & footer {
      justify-content: space-between;

      & span {
        color: var(--ui-neutral-500);
      }
    }
  }
</style>

<article class="card" data-focus-within>
  <header>
    <svg>...</svg>
    <span>script.js</span>
    <button class="ghost square" aria-label="Reload" data-tooltip>
      <svg>...</svg>
    </button>
    <button class="ghost square" aria-label="Copy" data-tooltip>
      <svg>...</svg>
    </button>
  </header>
  <textarea
    data-focus
    rows="6"
    placeholder="console.log('Hello, world!');"
  ></textarea>
  <footer>
    <span>Line 1, Column 1</span>
    <button>Run <svg>...</svg></button>
  </footer>
</article>

API reference

Type	Classes / attributes	What it does
Focus target	`[data-focus]`	Moves this element's focus ring to the container