Form controls

FormMessage

The outcome of a submit, stated once. A submit has two answers, so the component has two tones and no others: anything a page wants to say before the user presses the button is a hint on the field, not a result. Use Alert for a standing condition and Toast for something that happened elsewhere.

Both tones

Why the tones announce differently

The two differ in more than color. A failure takes role="alert" and aria-live="assertive", which interrupts whatever a screen reader is reading, because the submit did not go through and the user has something left to do. A confirmation takes aria-live="polite" and no role, and waits for a pause, because the work is done and nothing is being asked of anyone. Interrupting for good news costs the user the sentence they were in the middle of and buys nothing.

The glyph carries the same distinction, so the two are told apart without color. It is a stroked SVG rather than a tick or a cross typed as text: a character lands at whatever weight the reader's font gives it, which sat visibly lighter than every other icon in the library.

The region mounts empty and takes its text two frames later. Assistive technology reports a change to a live region, and a region that arrives with its text already inside it is not a change, so a message rendered in one step is silent. One frame is not enough, because Firefox would see the region arrive already full. A confirmation's region is atomic, so a change reads the whole message. On the server there are no frames, so the text is rendered immediately and a page delivered without its client bundle still carries the outcome.

Under a form

Render it after the submit resolves, below the last field and above nothing. An address with no @ is rejected here.

API