useFieldInvalid
Returns whether the enclosing Field is in an error state.
Signature
Field publishes one boolean to its descendants so a control can style its own border and set aria-invalid without receiving an invalid prop. Bordered controls in the library read it.
function useFieldInvalid(): boolean;Usage
import type { InputHTMLAttributes } from "react";
import { useFieldInvalid } from "@solarius/onset";
function ColorSwatchInput(props: InputHTMLAttributes<HTMLInputElement>) {
const invalid = useFieldInvalid();
return (
<input
{...props}
aria-invalid={invalid || undefined}
style={{
borderColor: invalid ? "var(--m-color-err)" : "var(--m-color-border)",
}}
/>
);
}