[ @sdxc/u/state ]

checked

Sugar over when('&:checked, &[aria-checked="true"]', input), matching both native checked controls and ARIA-checked custom widgets.

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.checked(u.bg("brand.solid"))`	`css({ '&:checked, &[aria-checked="true"]': { backgroundColor: "..." } })`

Examples

Basic example

Wrap utilities in checked() to style a checkbox or radio once it is selected. Click the checkbox:

Email me about new releases

<label mix={[hstack({ gap: 2, align: "center" }), text("sm"), cursor("pointer")]}>
	<input
		type="checkbox"
		mix={[
			appearance(),
			is(5),
			bs(5),
			rounded("sm"),
			bg(),
			border({ color: "neutral.strong", width: 2 }),
			checked([bg("brand.solid"), border("brand.solid")]),
			cursor("pointer"),
		]}
	/>
	Email me about new releases
</label>

Radio buttons

Radios match checked() too, and only one of a group is checked at a time. Pick a plan:

MonthlyYearly

<fieldset mix={[...]}>
	<label mix={[hstack({ gap: 2, align: "center" }), text("sm"), cursor("pointer")]}>
		<input
			type="radio"
			name="plan"
			checked
			mix={[accent(), is(4), bs(4), checked(outline({ color: "brand", offset: 2 }))]}
		/>
		Monthly
	</label>
	<label mix={[hstack({ gap: 2, align: "center" }), text("sm"), cursor("pointer")]}>
		<input
			type="radio"
			name="plan"
			mix={[accent(), is(4), bs(4), checked(outline({ color: "brand", offset: 2 }))]}
		/>
		Yearly
	</label>
</fieldset>

Responsive design

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

u.at("md", u.checked(u.bg("brand.solid")))

Signature

u.checked(input: UtilityInput<Node>)