# checked

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

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

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

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

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

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

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

## Signature

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