[ @sdxc/u/state ]

focusVisible

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

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

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:

<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:

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

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

Signature

u.focusVisible(input: UtilityInput<Node>)