---
title: "Core — focusMixin"
canonical: https://sky-ui.cf.sky.com/core/utilities/focus-mixin
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Core — focusMixin

```js
import { focusMixin } from '@sky-uk/ui-core';
```

---

The `focusMixin` is a mixin designed to help apply focus styles consistently across components.

It applies an `:after` pseudo-element that has a rounded and offset outline style.

`position: relative` must be set on the consuming parent as the focus mixin uses `position: absolute`.

`outline: none` should be set on the consuming parent to unset the browsers default styling.

```tsx
function Example() {
  const MyComponent = styled.div`
    background: ${color('grey10')};
    border-radius: ${radius(1)};
    margin-bottom: ${spacing(4)};
    height: 100px;
    width: 100px;

    // Required
    outline: none;
    position: relative;

    ${focusMixin({ radius: 1 })}
  `;

  return <MyComponent $focused={true} />;
}
```

---

By default, the mixin assumes `$focused` is being set via props.

```jsx
<MyComponent $focused={true} />
```

---

If you would like this to appear on keyboard focus, the following should be added to the consuming parent's styles:

```css
&:focus::after {
  opacity: 1;
}
```

---

## Arguments

### appearance

- `primary (default)`
- `light`

### radius

[(See Radius)](/foundations/radius)

```jsx
${focusMixin({ appearance: 'light', radius: 4 })}
```