State & feedback

Validation message

Question-level recovery guidance with icon, text, and non-color signaling.

Canonical sourcepatterns/validation-message.html

Behavior ownerApplication state

Runtime inside FormaNone

Example 1

Canonical

Canonical repository markup, namespaced only to keep examples independent.

Choose one response before continuing.

View HTML

<p class="ef-validation-message" id="ex1-validation-message-question-example-error">
  <span class="ef-validation-message__mark" aria-hidden="true">!</span>
  Choose one response before continuing.
</p>

Example 2

Secondary surface

The same contract demonstrated on a secondary Forma surface.

Choose one response before continuing.

View HTML

<p class="ef-validation-message" id="ex2-validation-message-question-example-error">
  <span class="ef-validation-message__mark" aria-hidden="true">!</span>
  Choose one response before continuing.
</p>

Example 3

Constrained layout

The canonical contract inside a narrow application region.

Choose one response before continuing.

View HTML

<p class="ef-validation-message" id="ex3-validation-message-question-example-error">
  <span class="ef-validation-message__mark" aria-hidden="true">!</span>
  Choose one response before continuing.
</p>