Field Error

Preview

<EsaFieldError message="This field is required." />

Empty state

With no message the component renders nothing and collapses out of layout, so it never reserves a gap under the input.

<EsaFieldError message="" />
<EsaFieldError message={null} />

With icon

Set icon for a small leading alert glyph.

<EsaFieldError message="Enter a valid email address." icon />

Under an input

It is presentational and composable — drop it beneath any control. Your validation layer decides the message.

<label>Email</label>
<input type="email" value="not-an-email" />
<EsaFieldError message="Enter a valid email address." icon />

API

Accessibility

• Renders with role="alert" and aria-live="polite" so the message is announced when it appears.
• Purely presentational — it does not own the input's aria-invalid or aria-describedby. Wire those on the control to point at this message when integrating.
• The leading icon is decorative (aria-hidden); the text carries the meaning.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.