[ @sdxc/u/state ]

disabled

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

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

import { disabled } from "@sdxc/u/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:

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

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

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

Responsive design

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

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

Signature

u.disabled(input: UtilityInput<Node>)