FEC Pattern Library

Success

Validation messages are displayed after a user has interacted with a particular field. Success validations help users feel confident that their changes to filters or fields have been applied.

When to use

  • When a user’s intended action has affirmatively been applied (even if that action is removing a filter, validations confirm that the filter was successfully removed)
  • When a user’s entry to a field has been accepted by the system, such as meeting password requirements

When to consider something else

  • Validation styles should not be used to describe the limitations or behavior of the filter. If a filter needs more context, consider using a persistent message outside of the field, or a tooltip.

GitHub issues

<div class="container" style="padding: 2rem">
    <div id="filters" class="filters is-open" style="border: none; padding: 20px;">
        <div class="filter js-filter" id="contributor_city-field" data-filter="text">
            <label class="label" for="contributor_city">City</label>
            <ul class="js-filter dropdown__selected" data-filter="checkbox" data-removable="true">
                <li><input id="contributor_city1" name="contributor_city" value="boston" type="checkbox" checked="">
                    <label for="contributor_city1" class="is-successful">"boston"</label>
                    <div class="filter__message filter__message--success" style>
                        <strong>Filter added</strong>
                        <br>
                        270,000 fewer results
                    </div>
                    <button class="dropdown__remove js-remove"><span class="u-visually-hidden">Remove</span></button>
                </li>
            </ul>
            <div class="combo combo--filter--mini">
                <input id="contributor_city" type="text" name="contributor_city" class="combo__input" tabindex="0">
                <button class="combo__button button--go button--standard is-disabled" type="button" tabindex="0">
                    <span class="u-visually-hidden">Search</span>
                </button>
            </div>
        </div>
    </div>
</div>
 
<div class="container" style="padding: 2rem">
  <div id="filters" class="filters is-open" style="border: none; padding: 20px;">
    <div class="filter js-filter" id="contributor_city-field" data-filter="text">
      <label class="label" for="contributor_city">City</label>
      <ul class="js-filter dropdown__selected" data-filter="checkbox" data-removable="true">
        <li><input id="contributor_city1" name="contributor_city" value="boston" type="checkbox" checked="">
          <label for="contributor_city1" class="is-successful">"boston"</label>
          <div class="filter__message filter__message--success" style>
          <strong>Filter added</strong>
          <br>
          270,000 fewer results</div>
          <button class="dropdown__remove js-remove"><span class="u-visually-hidden">Remove</span></button>
        </li>
      </ul>
      <div class="combo combo--filter--mini">
        <input id="contributor_city" type="text" name="contributor_city" class="combo__input" tabindex="0">
        <button class="combo__button button--go button--standard is-disabled" type="button" tabindex="0">
          <span class="u-visually-hidden">Search</span>
        </button>
      </div>
    </div>
  </div>
</div>
 
/* No context defined. */
  • Handle: @success-validation
  • Preview:
  • Filesystem Path: components/02-components/filter-validation/01-success-validation/success-validation.html