# indeterminate

> Matches indeterminate checkboxes and ARIA mixed-state widgets, painting a third visual state; it also matches radios in an unselected group and valueless `<progress>`, so scope it to the control you mean.

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

Matches indeterminate checkboxes and ARIA mixed-state widgets, painting a
third visual state; it also matches radios in an unselected group and
valueless `<progress>`, so scope it to the control you mean.

## Quick reference

Every documented call, beside the CSS it emits.

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

## Examples

### Basic example

Wrap utilities in `indeterminate()` to style a checkbox that is neither on nor off, like a "select all" whose list is partly ticked:

```tsx
<ul mix={[vstack({ gap: 2 }), text("sm")]}>
	<li mix={[hstack({ gap: 2, align: "center" }), weight("semibold")]}>
		<span
			role="checkbox"
			aria-checked="mixed"
			mix={[
				is(4),
				bs(4),
				rounded("sm"),
				border({ color: "neutral.strong", width: 2 }),
				indeterminate([bg("warning.solid"), border("warning.solid")]),
			]}
		/>
		All files
	</li>
	<li mix={[hstack({ gap: 2, align: "center" })]}>
		<span
			role="checkbox"
			aria-checked="true"
			mix={[
				is(4),
				bs(4),
				rounded("sm"),
				border({ color: "neutral.strong", width: 2 }),
				checked([bg("brand.solid"), border("brand.solid")]),
			]}
		/>
		report.pdf
	</li>
	<li mix={[hstack({ gap: 2, align: "center" })]}>
		<span
			role="checkbox"
			aria-checked="false"
			mix={[is(4), bs(4), rounded("sm"), border({ color: "neutral.strong", width: 2 })]}
		/>
		notes.txt
	</li>
</ul>
```

## Responsive design

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

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

## Signature

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