Field Level Message

The Field Level Message pattern describes methods for presenting information from the mobile application to the user. System messages are used to convey timely or important information that can assist with the user's taskflow, productivity and ease of navigation in an application. Messaging methods vary, depending upon the importance of the information, the need for user action, or the severity of consequences to the user if certain actions are not taken. Some types of messages may simply provide additional information that helps the user navigate a page or provides a model showing correct format to fill a form and can be safely overlooked or dismissed after reading; others, such as critical warning messages, may require user acknowledgment before the application will resume functioning on the page.

The message pattern describes two methods to display a message:


Appearance characteristics for this component.

Message Types

Icon Type Purpose
Error Error Error messages inform the user about issues related to data input, validation or application functionality.
Warning Warning Warning messages inform the user about pending action or situation that may need attention.
Confirmation Confirmation Confirmation messages inform the user that an action has completed successfully. Typically used to convey that an action took place (for example Product Item Added, Contact Removed)
Information Information Information messages inform the user about changes in the application that are not errors, warnings or confirmations.

Design Elements

  1. Message/Severity Icon - Optional
  2. Message Title (Material Design: Error Text) - Required
  3. Message Text (Material Design: Helper Text) - Optional
  4. Close Icon - Optional 

Field-Level Message


Common behaviors for this component.



Usage guidelines for this component.


Fig 1. Confirmation iOS


Fig 2. Confirmation Android


Fig 3. Information iOS


Fig 4. Information Android


Fig 5. Warning iOS


Fig 6. Warning Android


Fig 7. Error iOS


Fig 8. Error Android


Fig 9. Two Line Error iOS