FocusRing

A utility component that applies a CSS class when an element has keyboard focus. Focus rings are visible only when the user is interacting with a keyboard, not with a mouse, touch, or other input methods.

install	`yarn add @react-aria/focus`
version	3.5.4
usage	`import {FocusRing} from '@react-aria/focus'`

View repository

GitHub

View package

NPM

Introduction#

FocusRing is a utility component that can be used to apply a CSS class when an element has keyboard focus. This helps keyboard users determine which element on a page or in an application has keyboard focus as they navigate around. Focus rings are only visible when interacting with a keyboard so as not to distract mouse and touch screen users. When we are unable to detect if the user is using a mouse or touch screen, such as switching in from a different tab, we show the focus ring.

If CSS classes are not being used for styling, see useFocusRing for a hooks version.

Props#

Name	Type	Default	Description
`children`	`ReactElement`	—	Child element to apply CSS classes to.
`focusClass`	`string`	—	CSS class to apply when the element is focused.
`focusRingClass`	`string`	—	CSS class to apply when the element has keyboard focus.
`within`	`boolean`	`false`	Whether to show the focus ring when something inside the container element has focus (true), or only if the container itself has focus (false).
`isTextInput`	`boolean`	—	Whether the element is a text input.
`autoFocus`	`boolean`	—	Whether the element will be auto focused.

Example#

This example shows how to use <FocusRing> to apply a CSS class when keyboard focus is on a button.

.button {
  -webkit-appearance: none;
  appearance: none;
  background: green;
  border: none;
  color: white;
  font-size: 14px;
  padding: 4px 8px;
}

.button.focus-ring {
  outline: 2px solid dodgerblue;
  outline-offset: 2px;
}

.button {
  -webkit-appearance: none;
  appearance: none;
  background: green;
  border: none;
  color: white;
  font-size: 14px;
  padding: 4px 8px;
}

.button.focus-ring {
  outline: 2px solid dodgerblue;
  outline-offset: 2px;
}

.button {
  -webkit-appearance: none;
  appearance: none;
  background: green;
  border: none;
  color: white;
  font-size: 14px;
  padding: 4px 8px;
}

.button.focus-ring {
  outline: 2px solid dodgerblue;
  outline-offset: 2px;
}

import {FocusRing} from '@react-aria/focus';

<FocusRing focusRingClass="focus-ring">
  <button className="button">Test</button>
</FocusRing>

import {FocusRing} from '@react-aria/focus';

<FocusRing focusRingClass="focus-ring">
  <button className="button">Test</button>
</FocusRing>

import {FocusRing} from '@react-aria/focus';

<FocusRing focusRingClass="focus-ring">
  <button className="button">
    Test
  </button>
</FocusRing>