Form Error

Validation error message for form fields. Displays in danger color.

Default

This field is required

Base

Class	Description
`.ui-form-error`	Base class

Override these CSS custom properties to customize the component.

Token	Default	Description
`--ui-form-error-color`	`var(--ui-color-danger)`	Text color
`--ui-form-error-size`	`var(--ui-font-size-sm)`	Overall size
`--ui-form-error-gap`	`0`	Gap between children

With Icon

Please enter a valid email

<span class="ui-form-error">
  <svg class="ui-form-error__icon ui-icon ui-icon--sm" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
  </svg>
  <span>Please enter a valid email</span>
</span>