Form notifications

Ask a question Design guidelines

Summary

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

Status

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

Examples

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

Code

HTML

Use markup to display description for your form fields:
Demo code
AخA
 
<form class="aui">
    <div class="field-group">
        <label for="demo-info-message">Input with an info notification</label>
        <input id="demo-info-message" class="text" type="text">
        <div class="description">
            Choose a username at least 6 characters long
        </div>
    </div>
</form>
Demo code
 
<form class="aui">
    <div class="field-group">
        <label for="demo-info-message">Input with an info notification</label>
        <input id="demo-info-message" class="text" type="text">
        <div class="error">
            <ul>
                <li><span class="aui-icon aui-icon-small aui-iconfont-error aui-icon-notification">This field has a problem</span>This
                    field has a problem
                </li>
                <li><span class="aui-icon aui-icon-small aui-iconfont-error aui-icon-notification">In fact, it has two problems</span>In
                    fact, it has two problems
                </li>
            </ul>
        </div>
    </div>
</form>

Data attributes deprecated

Use HTML markup

Data attributes are deprecated and will be removed in 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

Demo code
 
<form class="aui">
    <div class="field-group">
        <label for="demo-info-message">Input with an info notification</label>
        <input id="demo-info-message" class="text" type="text" data-aui-notification-field
               data-aui-notification-info="Choose a username at least 6 characters long">
    </div>
</form>

Error messages

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

Demo code
 
<form class="aui">
    <div class="field-group">
        <label for="demo-info-message">Input
            with an error notification</label>
        <input id="demo-info-message" class="text" type="text" data-aui-notification-field
               data-aui-notification-error="There is a problem with this field">
    </div>
</form>

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.

Demo code
 
<form class="aui">
    <div class="field-group">
        <label for="demo-info-message">Input with multiple error notifications</label>
        <input id="demo-info-message" class="text" type="text" data-aui-notification-field
               data-aui-notification-error='["This field has a problem","In fact, it has two problems"]'>
    </div>
</form>