[ @sdxc/u/state ]

focusWithin

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

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.focusWithin(u.border("brand"))`	`css({ "&:focus-within": { borderColor: "..." } })`

Examples

Basic example

Use focusWithin() to style an element while it or anything inside it has focus. Click into the field:

<label
	mix={[
		hstack({ gap: 2, align: "center" }),
		p(2, 3),
		rounded("md"),
		bg(),
		border({ color: "neutral.border", width: 1 }),
		focusWithin([border("brand.strong"), outline({ color: "brand", width: 2 })]),
	]}
>
	<span mix={[...]}>Search</span>
	<input
		type="search"
		placeholder="Packages, utilities…"
		mix={[border("none"), outline("none"), text("sm"), bg("transparent")]}
	/>
</label>

Highlighting a group

Put focusWithin() on a container to mark the group being edited. Tab through the fields and watch the active section change:

Shipping

Billing

<div mix={[...]}>
	<fieldset
		mix={[vstack({ gap: 2 }), focusWithin(outline({ color: "brand", width: 2 })), ...]}
	>
		<legend mix={[text("sm"), weight("semibold")]}>Shipping</legend>
		<input type="text" placeholder="Street" mix={[border("neutral.border"), ...]} />
	</fieldset>
	<fieldset
		mix={[vstack({ gap: 2 }), focusWithin(outline({ color: "brand", width: 2 })), ...]}
	>
		<legend mix={[text("sm"), weight("semibold")]}>Billing</legend>
		<input
			type="text"
			placeholder="Card holder"
			mix={[border("neutral.border"), ...]}
		/>
	</fieldset>
</div>

Responsive design

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

u.at("md", u.focusWithin(u.border("brand")))

Signature

u.focusWithin(input: UtilityInput<Node>)