---
name: ".up-focus-visible"
area: "API"
kind: "CSS class"
parent: "up.viewport module"
visibility: "experimental"
url: "https://unpoly.com/api/up-focus-visible"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.viewport module](https://unpoly.com/api/up.viewport.md)</nav>

# .up-focus-visible

**This feature is experimental**. Please [share](https://github.com/unpoly/unpoly/discussions) your experiences so we know what to keep or change.

This class is assigned to elements that were [focused by Unpoly](https://unpoly.com/learn/focus.md) and should have a [visible focus ring](https://unpoly.com/learn/focus-visibility.md).

You can use this class to [give a new component a focus ring](#example) for keyboard users, while not rendering a focus ring for mouse or touch users.

<nav aria-label="Guides">

- [Learn: Focus ring visibility](https://unpoly.com/learn/focus-visibility.md)

</nav>

## Relation to `:focus-visible` {#relation-to-focus-visible}

Unpoly will try to force `:focus-visible` whenever it sets `.up-focus-visible`, but can only do so in [some browsers](https://caniuse.com/mdn-api_htmlelement_focus_options_focusvisible_parameter). Because of this the `.up-focus-visible` class may be set on elements that the browser considers to _not_ be [`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible).

## Example {#example}

When creating a new interactive component, you should make it focusable using the keyboard's `Tab` key by assigning a [`[tabindex]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute:

```html
<span class="my-button" tabindex="0">
  ...
</span>
```

To show a focus ring for keyboard users only, use CSS like this:

```css
.my-button {
  &:focus-visible:not(.up-focus-hidden),
  &.up-focus-visible {
    outline: 1px solid royalblue;
  }
}
```