City of Ghent Style Guide

Field message

When to use this component

A field message is used in the context of a form to provide help or feedback on fields or fieldsets.

When not to use this component

A field message should not be used outside the context of a form.

How it works

There are three types of field messages:

  1. Normal field message
  2. Error field message
  3. Success field message

Normal field message

A normal field message is used to provide help on a field or fieldset.

  • The text in the field message provides extra information to the user on how the field or fieldset should be filled in. It can also be used to tell to the user why certain information is asked.
  • Try not to specify what is already implied by the input label. Only use this kind of messages to provide extra information to the user.
  • As it is intended to provide help, a normal field message is always visible from the first page view of the form.

Error field message

An error field message is used to provide feedback on a field or fieldset. It informs the user that there was an error in filling in the field or fieldset.

  • The text in the error field message tells to the user what is wrong and how to fix it.
  • As it provides feedback on user input, an error field message is not visible on the first page view of the form. It is only visible during or after filling in the field or fieldset or when triggered by form validation.

Success field message

A success field message is used to inform the user that the field or fieldset is correctly filled in.

  • The text in the error field message tells the user about the success.
  • As it provides feedback on user input, a success field message is not visible on the first page view of the form. It is only visible during or after filling in the field or fieldset or when triggered by form validation.

Web accessibility

  • A field must reference the field message by use of aria-describedby, this error and success messages have priority over the normal field message whose information has already been conveyed to the user on first page view.
  • A field message must have the role=alert attribute so content updates are read automatically in case of ajax- or frontend validation.
  • Error messages should be as specific as possible, the item that is in error is identified and the error is described to the user in text. See WCAG 2.0 Success Criterion 3.3.1 Error Identification
  • The field that causes an error message has the aria-invalid=true attribute.

Usage in form validation

For more information about the usage of field messages components in the context of a form and form validation, see the form component documentation.

Field Message 

{% if field_message %}
  <div class="field-message {{ modifier }}"
    {% if modifier %}
      role="alert"
    {% endif %}
    {% if id %}
      id="{{ id }}"
    {% endif %}>
    {{ field_message }}
    {% include '@accolade' %}
  </div>
{% endif %}
 
<!-- Default -->
<div class="field-message ">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam.
      <div class="accolade "></div>
  </div>


<!-- Field Message Error -->
<div class="field-message error" role="alert">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam.
      <div class="accolade "></div>
  </div>


<!-- Field Message Success -->
<div class="field-message success" role="alert">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam.
      <div class="accolade "></div>
  </div>


/* Default */
{
  "field_message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam."
}


/* Field Message Error */
{
  "field_message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam.",
  "modifier": "error"
}


/* Field Message Success */
{
  "field_message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam.",
  "modifier": "success"
}
  • Content: 
    .field-message {
  @include theme('color', 'color-tertiary--lighten-1', 'field-messages-color');
  @include theme('background-color', 'color-info--lighten-5', 'field-messages-info-background');

  $field-message-icon-size: 1.5rem;
  $field-message-icon-margin: 1.5rem;

  display: inline-block;
  position: relative;
  align-items: center;
  max-width: 40rem;
  min-height: 2.5rem;
  margin-top: .2rem;
  padding: 1.7rem 1.2rem .7rem;
  border-radius: border-radius('radius-1');
  font-size: .8rem;
  overflow: hidden;

  :nth-last-child(2) {
    margin-bottom: 0;
  }

  &::before {
    display: block;
    position: absolute;
    top: 1.5rem;
    left: .7rem;
    width: $field-message-icon-size;
    height: $field-message-icon-size;
    margin: auto $field-message-icon-margin auto auto;
    border-radius: 100%;
    background-color: color('white');
    font-size: 1.1rem;
    line-height: $field-message-icon-size;
    text-align: center;
  }

  .accolade {
    top: 0;
    transform: rotate(180deg);

    &::before {
      left: -1px;
      width: calc(100% - 1.5rem + 1px);
    }

    &::after {
      right: -1px;
      width: calc(1.5rem + 1px);
    }
  }

  a {
    @include theme('color', 'color-tertiary--lighten-1', 'field-messages-color');
    @include link-background('color-tertiary', 'color-primary--lighten-3', 'field-messages-link-border-color', 'link-background-color');

    &:hover {
      @include theme('color', 'color-tertiary', 'field-messages-link-hover-color');
    }
  }

  &.success {
    @include icon('checkmark');
    @include theme('background-color', 'color-success--lighten-4', 'field-description-background');

    padding-left: 2.9rem;

    &::before {
      @include theme('color', 'color-success', 'field-description-icon');
    }

    a {
      @include link-background('color-tertiary', 'color-success--lighten-3', 'field-messages-link-border-color', 'field-messages-success-background-color');
    }
  }

  &.error {
    @include icon('cross');
    @include theme('background-color', 'color-error--lighten-4', 'field-description-background');

    padding-left: 2.9rem;

    &::before {
      @include theme('color', 'color-error', 'field-description-icon');
    }

    a {
      @include link-background('color-tertiary', 'color-error--lighten-3', 'field-messages-link-border-color', 'field-messages-error-background-color');
    }
  }
}
  • URL: /components/raw/field-message/_field-message.scss
  • Filesystem Path: components/21-atoms/field-message/_field-message.scss
  • Size: 2.4 KB