Error message

The one-line failure text under a field, which holds its space so a message never shifts the layout.

Refined portWildErrorMessage.vueWErrorMessage

Try it

Switch the message on and off, and watch the field below it stay put.

High threshold (kPa)

Use a value between 0 and 250 kPa.

Low threshold (kPa)

Message

<WildTextInput v-model="high" aria-describedby="high-error" />
<WildErrorMessage
  id="high-error"
  :messages="errors"
  :current-message-id="1"
/>

The line is always there. It holds 18px when empty, so a one-line message never moves the next field.

When to use

Use it under one field, to say how to fix that field’s value.
Show it on blur or on submit, and clear it once the value is valid.

Don’t use it

For a problem with the whole form or a failed save. Use an alert.
Inside a form field. Set its error prop instead.

Anatomy

An exclamation mark and a sentence, left-aligned under the field it belongs to.

High threshold (kPa)

Use a value between 0 and 250 kPa.

Length

One line is the target. A longer message wraps under its own text, keeps the mark on the first line, and pushes the next field down.

Enter a site name.

one line

Use a value between 0 and 250 kPa. Use numbers only, e.g. 120 or 120.5, with no unit after them.

wrapping

Inline, nothing below

Required.

no reserved line

Content

Say what to do, not what went wrong. “Use a value between 0 and 250 kPa” fixes the field; “Invalid value” only tells you it’s broken.

Use a value between 0 and 250 kPa.

Invalid value.

don't

Accessibility

Give the line an id and point the field’s aria-describedby at it, so a showing message is read with the field. In React the line also stays mounted as a polite live region, so a new message is announced without moving focus. The shipped Vue line is not a live region and unmounts when empty.

Site name

Enter a site name.

<WildTextInput v-model="name" aria-describedby="name-error" />
<WildErrorMessage id="name-error" :messages="errors" :current-message-id="0" />

Props

Rows from id down are refined additions.

Prop	Type	Default	Description
messages	{ id: number, message: string }[]	—	Every message this field can show.
current-message-id	number	—	Required. Index into messages; -1 shows none.
id	string	—	Target for the field’s aria-describedby.
reserve	boolean	true	Hold the 18px line when empty.

Tokens

Token	Value	Where it lands
--color-error	#E12121	Message text and mark.
--font-size-sm	12px	Message text, 18px line.
--size-icon-xs	14px	The exclamation mark.