---
name: ValidityIndicator
package: '@wordpress/ui'
category: '@wordpress-ui'
status: stable
canonical: 'https://system.automattic.design/components/validityindicator/'
storybook: 'https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-form-primitives-validityindicator--docs'
github: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/ui/src/form'
---

# 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.

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

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `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. |


## Examples

### Invalid

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

### Valid

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

### Validating

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