Automattic Design System

Components

ValidityIndicator

Displays a validity message for a form control, with an icon matching the validity state: invalid, valid, or validating (a spinner while an async check is pending).

ControlWithError renders it automatically; use it directly to give a custom validated control the same presentation.

import { ValidityIndicator } from '@wordpress/ui';

View on Storybook

View source on GitHub

PropsPermalink to this section

NameDefaultDescription
id

string

The id to apply to the indicator element, so it can be associated with the control via aria-describedby.

type Required

"invalid" | "validating" | "valid"

The validation status to indicate.

message

string

The message to display next to the status icon.

ExamplesPermalink to this section

InvalidPermalink to this section

const Invalid = () => <ValidityIndicator type="invalid" message="Please enter a valid URL." />;

ValidPermalink to this section

const Valid = () => <ValidityIndicator type="valid" message="This URL is available." />;

ValidatingPermalink to this section

const Validating = () => <ValidityIndicator type="validating" message="Checking availability…" />;