---
title: Focus Ring
description: "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])`.

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

### focusVisibleRing

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

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

:::note
By default, Yamada UI sets `focusVisibleRing="outline"` for all elements via [global styles](https://yamada-ui.com/docs/styling/global-styles.md). Therefore, you do not need to set `focusVisibleRing` individually for each element.
:::

## Customize

### Change Variant

```tsx
<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`.

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

### Change Width

To change the width, set a value to `focusRingWidth`.

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

### Change Style

To change the style, set a value to `focusRingStyle`.

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

### Change Offset

To change the offset, set a value to `focusRingOffset`.

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