Skip to content
Telescope

Focus

Different UI elements require different focus styles. That's why we expose three different focus styles. This provides our customers who navigate by keyboard with an optimal experience.

Usage

Import the focus styles with the following code. To see the focus styles in action, tab to the interactive UI elements on this page.

import {focusRing} from '@pleo-io/telescope'

Regular

In most cases, use the regular variant. It adds a black ring around the interactive element.

Showing 99 expenses

Offset

Use the offset variant when the interactive element has a black border. It adds a white ring between the interactive element and the regular black ring.

Inset

When there's no space around an interactive element, the regular and offset focus styles can get clippped. That's where the inset variant comes in. It adds a black ring that sits on the inside of the interactive element.

Mon
Tue
Wed
Thu
Fri
Sat
Sun

focusRingSibling

Technically, there's a fourth focus style. It can be imported like this:

import {focusRingSibling} from '@pleo-io/telescope'

The focusRingSibling applies the same styling as the offset variant. The difference is that the focusRingSibling applies it to the visible sibling of a visually hidden element. This is useful when dealing with, for example, custom styled checkboxes and radio buttons.