Europa Component Library

Search forms: Corporate

Documentation • Demo

Search form

Why and how to use this component

A “Search” functionality helps users to locate content quicker by using specific words or phrases without having to navigate through the entire website.

The search box allows the user to search within all EC websites through the EC search engine. The search results are displayed in a separate page.

This search box allows you to search only within the pages of the current website.

When to use this component

  • the corporate search is located on the the site header
  • if an internal search is required, it can be implemented below the page header
{#
  - variant: can be '','internal' (default: '')
  - button (object)
    - label (string)
  - input (object)
    - extra_attributes (array of { name: '', value: '' })
  - extra_classes (string): additional classes to add to the component
  - extra_attributes (array of { name: '', value: '' })
#}

{# Internal properties #}

{% set _css_class = 'ecl-search-form' %}
{% set _extra_attributes = '' %}
{% set _aria_label = aria_label|default('Search this website') %}
{% set _button = { 'label': 'Search' }|merge(button|default({})) %}
{% set _input = { 'id': 'search', 'extra_attributes': [] }|merge(input|default({})) %}

{# Internal logic - Process properties #}

{% if variant is defined and variant is not empty %}
  {% set _css_class = _css_class ~ ' ' ~ 'ecl-search-form--' ~ variant %}
{% endif %}

{% if extra_classes is defined %}
  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}

{% if extra_attributes is defined %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %}
  {% endfor %}
{% endif %}

{# Print result #}
<form class="{{ _css_class }}"{{ _extra_attributes|raw }}>
  <label class="ecl-search-form__textfield-wrapper">
    <span class="ecl-u-sr-only">{{ _aria_label }}</span>
    {% include '@ec-europa/ecl-forms-text-inputs' with {
      'id': _input.id,
      'type': 'search',
      'extraClass': 'ecl-search-form__textfield',
      'extraAttributes': _input.extra_attributes
    } %}
  </label>
  {% include '@ec-europa/ecl-buttons' with {
    'modifier': variant is defined and variant == 'internal' ? 'form-primary' : 'form',
    'label': _button.label,
    'extra_classes': 'ecl-search-form__button',
    'extra_attributes': [{ 'name': 'type', 'value': 'submit'}]
  } %}
</form>
 
{
  "aria_label": "Search this website",
  "button": {
    "label": "Search"
  },
  "input": {
    "id": "corporate-search",
    "extra_attributes": [
      {
        "name": "size",
        "value": "30"
      },
      {
        "name": "maxlength",
        "value": "128"
      }
    ]
  }
}
 
<form class="ecl-search-form">
  <label class="ecl-search-form__textfield-wrapper">
    <span class="ecl-u-sr-only">Search this website</span>
    






  

              


<input
  type="search"
  class="ecl-text-input ecl-search-form__textfield"
  id="corporate-search"
  name="default-name"
   size="30" maxlength="128"
/>
  </label>

  <button class="ecl-button ecl-button--form ecl-search-form__button" type="submit">Search</button>
</form>
  • Content: 
    /**
 * Search form
 * @define search-form
 */

.ecl-search-form {
  @include ecl-hidden-print();

  border: 1px solid map-get($ecl-colors, 'grey-50');
  display: flex;
  margin: 0;
}

.ecl-search-form__textfield-wrapper {
  border: 3px solid transparent; // Keeps the focus in the container
  flex-grow: 1;
}

.ecl-search-form__textfield {
  border: 0;
  margin-top: 0;
  padding: map-get($ecl-spacing, 'xxs') map-get($ecl-spacing, 'xs');
}

.ecl-search-form__button {
  @extend %ecl-icon;

  flex-shrink: 0;
  padding: 0 map-get($ecl-spacing, 'm');
  position: relative;
  text-indent: -999em;

  &::before {
    @include ecl-icon('search');

    font-size: map-get($ecl-font-size, 'l');
    left: 50%;
    position: absolute;
    text-indent: 0;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

@include ecl-media-breakpoint-up(lg) {
  .ecl-search-form__button {
    padding: 0 map-get($ecl-spacing, 's');
    text-indent: 0;

    &::before {
      display: none !important;
    }
  }
}

.ecl-search-form--internal {
  display: flex;

  .ecl-search-form__textfield-wrapper {
    @extend %ecl-icon;

    border-color: #fff;
    flex-grow: 1;
    position: relative;

    /* stylelint-disable-next-line */
    &::before {
      @include ecl-icon('search');

      color: map-get($ecl-colors, 'grey-25');
      font-size: map-get($ecl-font-size, 'm');
      left: map-get($ecl-spacing, 'xxs');
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .ecl-search-form__textfield {
    // ~ 1 * icon's width + 1 * icon's left space + 1 * space between icon and input
    padding-left: map-get($ecl-font-size, 'm') + 2 *
      map-get($ecl-spacing, 'xxs');
  }
}
  • URL: /components/raw/ecl-search-forms/_search-forms.scss
  • Filesystem Path: framework/components/ecl-search-forms/_search-forms.scss
  • Size: 1.7 KB