material-components_material-web/docs/components/focus-ring.md

Focus ring

Focus rings are accessible outlines for components to show keyboard focus.

Focus rings follow the same heuristics as :focus-visible to determine when they are visible.

• Design article (coming soon)
• API Documentation (coming soon)
• Source code

Usage

Focus rings display on keyboard navigation. They may be attached to a control in one of three ways.

1. Attached to the parent element

   <style>
     .container {
       position: relative;
       --md-focus-ring-shape: 8px;
     }
   </style>
   <button class="container">
     <md-focus-ring></md-focus-ring>
   </button>
   

2. Attached to a referenced element

   <style>
     .container {
       position: relative;
       --md-focus-ring-shape: 8px;
     }
   </style>
   <div class="container">
     <md-focus-ring for="control"></md-focus-ring>
     <input id="control">
   </div>
   

3. Attached imperatively

   <style>
     .container {
       position: relative;
       --md-focus-ring-shape: 8px;
     }
   </style>
   <div class="container">
     <md-focus-ring id="ring"></md-focus-ring>
     <button id="ring-control"></button>
   </div>
   <script>
     const focusRing = document.querySelector('#ring');
     const control = document.querySelector('#ring-control');
     focusRing.attach(control);
   </script>
   

Note: focus rings must be placed within a position: relative container.

Animation

The focus ring animation may be customized or disabled using CSS custom properties.

<style>
  :root {
    --md-focus-ring-duration: 0; /* disabled animation */
  }
</style>

Accessibility

Focus rings are visual components and do not have assistive technology requirements.

Theming

Focus rings supports Material theming and can be customized in terms of color and shape.

Tokens

Token	Default value
--md-focus-ring-color	--md-sys-color-secondary
--md-focus-ring-offset	2px
--md-focus-ring-shape	9999px
--md-focus-ring-width	3px

• All tokens

Example

<style>
:root {
  --md-focus-ring-shape: 0px;
  --md-focus-ring-width: 2px;
  --md-sys-color-secondary: #4A6363;
}
</style>

<button>
  <md-focus-ring></md-focus-ring>
</button>