Field message

wu-field-message is hint or status text under a control. Link it to the control with aria-describedby; link a hidden error only once it shows (see field). The words carry the meaning (“Error: …”); the role adds a color and a marker shape: a larger octagon with an exclamation mark for error, a check for success, a small circle for info. Error text is also medium weight, so it stands apart from info without relying on color.

Class	Effect
`wu-field-message`	Root. Muted hint text
`error`	Medium weight danger text with an octagon and an exclamation mark. Inside a field, hidden until the control is invalid
`success`	Success text with a check
`info`	Info text with a circle

Messages

Hint: at least 12 characters.

Info: the name is visible to your team.

Success: the username is available.

Error: the passwords do not match.

<div class="flex col gap-2">
  <p class="wu-field-message">Hint: at least 12 characters.</p>
  <p class="wu-field-message info">Info: the name is visible to your team.</p>
  <p class="wu-field-message success">Success: the username is available.</p>
  <p class="wu-field-message error">Error: the passwords do not match.</p>
</div>

Right to left

The marker comes first in reading order, so it sits on the right.

تلميح: 12 حرفًا على الأقل.

نجاح: اسم المستخدم متاح.

خطأ: كلمتا المرور غير متطابقتين.

<div class="flex col gap-2">
  <p class="wu-field-message">تلميح: 12 حرفًا على الأقل.</p>
  <p class="wu-field-message success">نجاح: اسم المستخدم متاح.</p>
  <p class="wu-field-message error">خطأ: كلمتا المرور غير متطابقتين.</p>
</div>

Load only the field message

@use "@wovenui/components/field-message";

The field message needs no other component.