Sets a custom validation message on a HTML form control element using the standard Constraint Validation API.

It uses the HTML form control element’s setCustomValidity method to set a custom validationMessage that displays a native tooltip and activates the CSS :invalid pseudo-class.

Useful when making form control components from scratch; it’s used by many of the form components.



TypeReact ref (required)

React ref for the HTML form control element.


TypeString (optional)

Validation message for the HTML form control element. An empty string means valid.


How to import.
import useCustomValidity from "device-agnostic-ui/useCustomValidity.mjs";
A contrived usage example; normally you would use <Textbox> which has a validationMessage prop.
import useCustomValidity from "device-agnostic-ui/useCustomValidity.mjs";
import React from "react";

const Input = ({ validationMessage, ...props }) => {
  const ref = React.useRef();

  useCustomValidity(ref, validationMessage);

  return <input {...props} ref={ref} />;

const result = (
  <Input type="email" validationMessage="Email address already registered." />