useNativeValidity
Takes an input to a form control and an error message, then sets the custom validity of that form control in an effect.
Usage
const MyInput = ({
scope,
label,
}: {
scope: FormScope<string>;
label: string;
}) => {
const field = useField(scope);
const id = useId();
const ref = useRef<HTMLInputElement>(null);
useNativeValidity(ref, field.error());
return (
<div>
<label htmlFor={id}>{label}</label>
<input {...field.getInputProps({ id, ref })} />
</div>
);
};