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.
Types of search
Corporate search
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.
Internal search
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
{#
Parameters:
- "variant" (string) (default: ''): can be '' or 'internal'
- "aria_label" (string) (default: 'Search this website')
- "button" (object) (default: { 'label': 'Search' }): shape of @ecl/eu-component-button
- "input" (object) (default: { 'id': 'search' }): shape of @ecl/eu-component-form-text-input
- "extra_classes" (string) (default: '')
- "extra_attributes" (array) (default: []): format: [
{
"name" (string) (default: ''),
"value" (string) (default: '')
},
...
]
#}
{% include '@ecl/generic-component-search-form' with {
'variant': variant|default(''),
'aria_label': aria_label|default('Search this website'),
'button': { 'label': 'Search' }|merge(button|default({})),
'input': { 'id': 'search' }|merge(input|default({})),
'extra_classes': extra_classes|default(''),
'extra_attributes': extra_attributes|default([]),
'system': 'eu'
} only %}
{
"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 type="submit" class="ecl-button ecl-button--form ecl-search-form__button">Search</button>
</form>
-
Content:
/** * Search form * @define search-form */ // Import base and generic @import '@ecl/eu-base/eu-base'; @import '@ecl/generic-component-search-form/generic-component-search-form'; // Check if overridden dependencies are already loaded, if needed @include check-imports(('eu-component-form-text-input', 'eu-component-button')); // Use generic mixin @include exports('eu-component-search-form') { @include ecl-search-form(); } - URL: /components/raw/eu-component-search-form/eu-component-search-form.scss
- Filesystem Path: ../../src/systems/eu/eu-component/eu-component-search-form/eu-component-search-form.scss
- Size: 431 Bytes