# focusVisible

> Sugar over `when("&:focus-visible", input)`.

```ts
import { focusVisible } from "@sdxc/u/state";
```

Sugar over `when("&:focus-visible", input)`.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.focusVisible(u.ring("brand"))` | `css({ "&:focus-visible": { outlineColor: "..." } })` |

## Examples

### Basic example

Use `focusVisible()` to style focus only when the browser decides to show it, as it does for the keyboard. Tab to the button, then click it to compare:

```tsx
<button
	type="button"
	mix={[
		bg("brand.solid"),
		fg("brand.onSolid"),
		outline("none"),
		focusVisible(outline({ color: "brand", width: 2, offset: 2 })),
		cursor("pointer"),
		...,
	]}
>
	Continue
</button>
```

### Focusing a field

Text fields match `focusVisible()` however they were focused. Click or tab into the field:

```tsx
<input
	type="text"
	placeholder="Your name"
	mix={[
		border("neutral.border"),
		outline("none"),
		focusVisible([border("brand.strong"), outline({ color: "brand", width: 2, offset: 1 })]),
		...,
	]}
/>
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.focusVisible(u.ring("brand")))
```

## Signature

```ts
u.focusVisible(input: UtilityInput<Node>)
```