state

invalid

Waits for user interaction before flagging a field invalid, matching :user-invalid alongside the ARIA fallback so validation only surfaces once it is meaningful to the person filling in the field.

import { invalid } from "@sdxc/u/state";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.invalid(u.border("danger"))`	`css({ '&:user-invalid, &[aria-invalid="true"]': { borderColor: "..." } })`

Using a custom value

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

u.invalid(u.border("danger"))

Responsive design

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

u.at("md", u.invalid(u.border("danger")))

Signature

u.invalid(input: UtilityInput<Node>)