# Focus ring Focus rings are accessible outlines for components to show keyboard focus. Focus rings follow the same heuristics as [`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) to determine when they are visible. ![Three elements with a focus ring that moves between them.](images/focus/hero.gif "A focus ring moving across elements.") * [API Documentation](#api) * [Source code](https://github.com/material-components/material-web/tree/main/focus) ## Usage Focus rings display on keyboard navigation. They may be attached to a control in one of three ways. ![An element with a focus ring.](images/focus/usage.gif "A focus ring.") 1. Attached to the parent element ```html ``` 1. Attached to a referenced element ```html
``` 1. Attached imperatively ```html
``` > Note: focus rings must be placed within a `position: relative` container. ### Inward Focus rings can be changed to animate inwards by adding an `inward` attribute. This is useful for components like list items. ![An element with a focus ring that animates inward.](images/focus/usage-inward.gif "A focus ring animating inward.") ```html ``` ### Animation The focus ring animation may be customized or disabled using CSS custom properties. ![An element with a focus ring that does not animate.](images/focus/usage-animation.gif "A focus ring with disabled animations.") ```html ``` ## Accessibility Focus rings are visual components and do not have assistive technology requirements. ## Theming Focus rings supports [Material theming](../theming/README.md) 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-shape` | `--md-sys-shape-corner-full` `--md-focus-ring-width` | `3px` * [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-focus-ring.scss) ### Example ![Image of a focus ring with a different theme applied](images/focus/theming.gif "Focus ring theming example.") ```html ``` ## API ### MdFocusRing <md-focus-ring> #### Properties | Property | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | `visible` | `visible` | `boolean` | `false` | Makes the focus ring visible. | | `inward` | `inward` | `boolean` | `false` | Makes the focus ring animate inwards instead of outwards. | | `htmlFor` | | `string` | `undefined` | | | `control` | | `HTMLElement` | `undefined` | | #### Methods | Method | Parameters | Returns | Description | | --- | --- | --- | --- | | `attach` | `control` | `void` | | | `detach` | _None_ | `void` | | #### Events | Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description | | --- | --- | --- | --- | --- | | `visibility-changed` | `Event` | No | No | Fired whenever `visible` changes. |