Focus Ring

Adds a focus ring to an element.
Overview API

Usage

Place wc-focus-ring inside a focusable element. Tab to the element to see the ring appear.

 

  <style>
    .focus-surface {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 24px;
      border-radius: 8px;
      background: var(--color-surface-container-high);
      color: var(--color-on-surface);
      cursor: pointer;
      border: none;
      font: inherit;
    }
  </style>

  <button class="focus-surface">
    Tab to focus me
    <wc-focus-ring></wc-focus-ring>
  </button>

Inward

Use the inward attribute to animate the ring inward instead of outward — useful for elements like text fields.

 

  <style>
    .focus-surface-inward {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 24px;
      border-radius: 8px;
      background: var(--color-surface-container-high);
      color: var(--color-on-surface);
      cursor: pointer;
      border: none;
      font: inherit;
    }
  </style>

  <button class="focus-surface-inward">
    Tab to focus me
    <wc-focus-ring inward="true"></wc-focus-ring>
  </button>

On this page

  • Usage
  • Inward
Sponsor

Properties

Events

Methods

CSS Custom Properties