# ariaChecked

> Keeps `aria-checked` on a native checked-state control in sync with its live checkedness, since the attribute is static and won't follow a control's state on its own.

```ts
import { ariaChecked } from "@sdxc/ui/mixins";
```

Adds `aria-checked` to a checkbox, switch, or radio, syncing it from the
host's own render-time state and again on every `change`. Apply the mixin
to every radio in a shared group — a change refreshes only the ones that carry it.

## Signature

```ts
ariaChecked(): MixinDescriptor<HTMLInputElement>
```

Returns: A mixin descriptor for a checkbox's, switch's, or radio's `mix` prop.

## Examples

```tsx
<Switch name="notifications" defaultChecked mix={[ariaChecked()]}>
	{t("settings.notifications.label")}
</Switch>
```

```tsx
<Checkbox name="terms" mix={[ariaChecked()]}>{t("signup.acceptTerms")}</Checkbox>
```

```tsx
// A radio's own input sits behind the `parts.input` passthrough.
<RadioGroup.Radio value="express" parts={{ input: [ariaChecked()] }}>
	{t("shipping.express")}
</RadioGroup.Radio>
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/mixins` too.

### syncAriaChecked

Rewrites CHECKED_ATTRIBUTE on `control`, and on its sibling radios,
since picking one radio unchecks another with no `change` event of its own.
Call this directly after a programmatic checked/indeterminate write or a form reset, neither of which fires `change`.

#### Signature

```ts
syncAriaChecked(control: HTMLInputElement): void
```

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `control` | `HTMLInputElement` | Mounted checkbox or radio whose attribute is brought back in line. |

#### Examples

```tsx
selectAll.indeterminate = someButNotAllSelected;
syncAriaChecked(selectAll);
```