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 helps the user to fill in the field or fieldset in the right way by providing extra information on how the field or fieldset should be filled in. It can also be used to tell to user why certain information is asked in the field or fieldset.

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 provide feedback on a field or fieldset. If informs the user that the field or fieldset is correctly filled in.

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.
{% 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 -->
<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 */
{
  "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-primary--lighten-4",
        "field-description-background"
      );
    
      $field-message-icon-size: 1.5rem;
      $field-message-icon-margin: 1.5rem;
    
      position: relative;
      align-items: center;
      max-width: 40rem;
      min-height: 2.5rem;
      padding: 1.7rem 1.2rem .7rem;
      border-radius: border-radius("radius-1");
      font-size: .7rem;
      line-height: 1.43;
      overflow: hidden;
    
      &::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);
        }
      }
    
      &.success {
        @include icon("checkmark");
    
        padding-left: 2.9rem;
        background-color: color("green", -4);
      }
    
      &.error {
        @include icon("cross");
    
        padding-left: 2.9rem;
        background-color: color("red", -4);
      }
    
      a {
        color: inherit;
      }
    }
    
  • URL: /components/raw/field-message/_field-message.scss
  • Filesystem Path: components/21-atoms/field-message/_field-message.scss
  • Size: 1.4 KB