# Focus Ring

The focus ring is used to identify the currently focused element on your page.
While this is important for accessibility, styling every component to have a
focus ring can be tedious.

Chakra UI provides the `focusRing` and `focusVisibleRing` style props to style
focus ring with ease. The value of the `focusRing` prop can be "outside",
"inside", or "mixed".

## Focus Ring

This focus ring maps to the `&:is(:focus, [data-focus])` CSS selector.

Here's how to style a button from scratch with a focus ring:

```tsx
<chakra.button px="4" py="2" focusRing="outside">
  Click me
</chakra.button>
```

## Focus Visible Ring

This focus ring maps to the `&:is(:focus-visible, [data-focus-visible])` CSS
selector.

```tsx
<chakra.button px="4" py="2" focusVisibleRing="outside">
  Click me
</chakra.button>
```

### Difference between Focus Ring and Focus Visible Ring

The Focus Visible Ring functions similarly to the Focus Ring, but with a key
difference: it only applies focus indicator styles when an element receives
keyboard focus.

This ensures that the focus ring is visible only when navigating via keyboard,
improving accessibility without affecting mouse interactions.

## Built-in Focus Ring

Here's a preview of the supported focus ring.

```tsx
import { Center, For, Stack } from "@chakra-ui/react"

export const TokensFocusRing = () => {
  return (
    <Stack gap="4">
      <For each={["inside", "outside", "mixed"]}>
        {(focusRing) => (
          <Center
            h="20"
            bg="bg"
            borderWidth="1px"
            focusRing={focusRing}
            data-focus
          >
            {focusRing}
          </Center>
        )}
      </For>
    </Stack>
  )
}

```

## Customization

### Ring Color

There are three ways to customize the focus ring color:

**1. Per component** - Use the `focusRingColor` prop:

```tsx
<Button focusRingColor="red.500">Click me</Button>
```

**2. Globally** - Set it in global CSS:

```tsx title="theme.ts"
const config = defineConfig({
  globalCss: {
    "*": {
      focusRingColor: "red.500 !important",
    },
  },
})

export const system = createSystem(defaultConfig, config)
```

**3. Per color palette** - Define semantic tokens for each palette:

```tsx title="theme.ts"
const config = defineConfig({
  theme: {
    semanticTokens: {
      colors: {
        gray: {
          focusRing: { value: "blue.500" },
        },
        blue: {
          focusRing: { value: "blue.400" },
        },
      },
    },
  },
})

export const system = createSystem(defaultConfig, config)
```

### Ring Width

To change the focus ring width for a specific component, you can use the
`focusRingWidth` prop.

```tsx
<Button focusRingWidth="2px">Click me</Button>
```

### Ring Style

To change the focus ring style for a specific component, you can use the
`focusRingStyle` prop.

```tsx
<Button focusRingStyle="dashed">Click me</Button>
```