# disabled

> Sugar over `when('&:disabled, &[aria-disabled="true"]', input)`, applying the given utilities under both the native and ARIA disabled selectors.

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

Sugar over `when('&:disabled, &[aria-disabled="true"]', input)`, applying
the given utilities under both the native and ARIA disabled selectors.
Callers choose the actual colors, opacity, and cursor for that state.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.disabled(u.opacity(50))` | `css({ '&:disabled, &[aria-disabled="true"]': { opacity: 0.5 } })` |

## Examples

### Basic example

Wrap utilities in `disabled()` to style a control the user cannot use. Hover both buttons to compare their cursors:

```tsx
<div mix={[...]}>
	<button
		type="button"
		mix={[
			bg("brand.solid"),
			fg("brand.onSolid"),
			cursor("pointer"),
			disabled([opacity(50), cursor("not-allowed")]),
			...,
		]}
	>
		Publish
	</button>
	<button
		type="button"
		disabled
		mix={[
			bg("brand.solid"),
			fg("brand.onSolid"),
			cursor("pointer"),
			disabled([opacity(50), cursor("not-allowed")]),
			...,
		]}
	>
		Publish
	</button>
</div>
```

### ARIA disabled

`disabled()` also matches `aria-disabled="true"`, for links and custom widgets that have no native disabled state:

```tsx
<nav mix={[...]}>
	<a
		href="#next"
		mix={[fg("brand"), textDecoration(), disabled([opacity(40), pointerEvents("none")])]}
	>
		Next page
	</a>
	<a
		href="#next"
		aria-disabled="true"
		mix={[fg("brand"), textDecoration(), disabled([opacity(40), pointerEvents("none")])]}
	>
		Next page
	</a>
</nav>
```

## Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

```ts
u.disabled(u.opacity("2.75rem"))
```

## Responsive design

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

```ts
u.at("md", u.disabled(u.opacity(50)))
```

## Signature

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