Focus Ring

Yamada UI provides features to apply various styles when an element is focused.

Overview

A focus ring is used to identify the element that is currently focused. Yamada UI provides focusRing and focusVisibleRing to easily configure the style of the focus ring.

Usage

focusRing

focusRing is applied to &:is(:focus, [data-focus]).

<Button variant="outline" focusRing="outside" data-focus>
  Button
</Button>

focusVisibleRing

focusVisibleRing is applied to &:is(:focus-visible, [data-focus-visible]).

<Button variant="outline" focusVisibleRing="outside" data-focus-visible>
  Button
</Button>

By default, Yamada UI sets focusVisibleRing="outline" for all elements via global styles. Therefore, you do not need to set focusVisibleRing individually for each element.

Customize

Change Variant

<Wrap gap="md">
  <For each={["outline", "inline", "mixed", "outside", "inside", "none"]}>
    {(value, index) => (
      <Button key={index} variant="outline" focusRing={value} data-focus>
        {toTitleCase(value)}
      </Button>
    )}
  </For>
</Wrap>

Change Color

To change the color, set a value to focusRingColor.

<Button
  variant="outline"
  focusRing="outline"
  focusRingColor="success"
  data-focus
>
  Button
</Button>

Change Width

To change the width, set a value to focusRingWidth.

<Button variant="outline" focusRing="outline" focusRingWidth="1px" data-focus>
  Button
</Button>

Change Style

To change the style, set a value to focusRingStyle.

<Button
  variant="outline"
  focusRing="outline"
  focusRingStyle="dashed"
  data-focus
>
  Button
</Button>

Change Offset

To change the offset, set a value to focusRingOffset.

<Button variant="outline" focusRing="outline" focusRingOffset="5px" data-focus>
  Button
</Button>