EC System

Feedback messages

Documentation • Demo

Feedback messages

Users receive feedback, in the form of a message, about an input. Messages can be either positive (indicating that the form was submitted successfully) or negative (“The number you’ve provided is incorrect”).

When to use

Use messages components to give feedback to users.

When validating a page, show one error notification on the top of the page which states “Some required information is missing or incomplete”.

Then, for each input field with an error, show an error notification which states either “This is a required field” or “This is not a valid format”.

Use success messages once the form has been submitted successfully, show a success notification.

{#
  Parameters:
    - "title" (string): message title
    - "body" (string): message body
    - "has_error" (boolean) (default: false)
    - "level" (number) (default: 4): title level
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-form-feedback-message' %}
 
/* Default */
{
  "title": "Some feedback message",
  "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quam urna, elementum eget ultrices non, efficitur quis lectus. Donec mollis felis ac felis tempus mattis"
}


/* Error */
{
  "title": "Some feedback message",
  "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quam urna, elementum eget ultrices non, efficitur quis lectus. Donec mollis felis ac felis tempus mattis",
  "has_error": true
}


<!-- Default -->
<div class="ecl-feedback-message" role="alert">
  <div class="ecl-feedback-message__title" role="heading" aria-level="4">Some feedback message</div>
  <p class="ecl-feedback-message__body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quam urna, elementum eget ultrices non, efficitur quis lectus. Donec mollis felis ac felis tempus mattis</p>
</div>


<!-- Error -->
<div class="ecl-feedback-message ecl-feedback-message--error" role="alert">
  <div class="ecl-feedback-message__title" role="heading" aria-level="4">Some feedback message</div>
  <p class="ecl-feedback-message__body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quam urna, elementum eget ultrices non, efficitur quis lectus. Donec mollis felis ac felis tempus mattis</p>
</div>
  • Content: 
    /*
 * Feedback message
 * @define feedback-message
 */

// Import base and generic
@import '@ecl/ec-base/ec-base';
@import '@ecl/generic-component-form-feedback-message/generic-component-form-feedback-message';

// Use generic mixin
@include exports('ec-component-form-feedback-message') {
  @include ecl-feedback-message();
}
  • URL: /components/raw/ec-component-form-feedback-message/ec-component-form-feedback-message.scss
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-form/ec-component-form-feedback-message/ec-component-form-feedback-message.scss
  • Size: 327 Bytes
  • Handle: @ecl/ec-component-form-feedback-message
  • Tags: atom
  • Preview:
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-form/ec-component-form-feedback-message/ec-component-form-feedback-message.twig