# 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.  * [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.  1. Attached to the parent element ```html ``` 1. Attached to a referenced element ```html
<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. |