Form notifications

Ask a question Design guidelines

Summary

Form notifications are used to display description or error messages for form fields.

Status

API status: general
Web resource key: com.atlassian.auiplugin:aui-form-notification
AMD Module key: require('aui/form-notification')
Experimental API: 5.7
General API: 9.7

Examples

Choose a username at least 6 characters long
  • This field has a problem
  • In fact, it has two problems

Code

HTML

Use markup to display description for your form fields:

Data attributes deprecated

Use HTML markup

Data attributes are deprecated and will be removed in the future. Use HTML markup directly instead.

Create a field with the attribute data-aui-notification-field.

Info messages

Information about a field can be communicated by adding the data-aui-notification-info data attribute. The value of this attribute should be the message you wish to place on the field

Error messages

In the same way, you may put error messages on the field with the data-aui-notification-error data attribute.

The .error container is only present when there are a non-zero number of errors. It is removed from the DOM otherwise.

Stacked messages

You can stack multiple messages on a field at the same time. This can be done by making the array a JSON array string.