The search component is a small form with a textfield and a search button used to trigger the search function of a website.
Use the search component on websites that have a search function to offer search functionality on any web page where it is wanted.
Do not use the search component on websites that don’t have a search function.
The search component is a small form with:
When clicking the search button, the search function of the website is triggerd. Typically, the user is brought to a search results page.
The search component is used in the header component. Here, as an exception, the textfield has a placeholder instead of label, because in the header component, a label is not possible.
<form class="form search">
{% if label %}
{% include '@label' with {
"label": label,
"for": search_id,
"label_optional": label_optional
} %}
{% endif %}
{% include '@input' with {
'type': 'search',
'placeholder': placeholder,
'modifier': modifier_search,
'id': search_id,
'name': search_id,
'required': true
} %}
{% include '@input-submit' with {
'value': text,
'modifier': modifier_submit
} %}
</form>
<form class="form search">
<label for="header-search">What are you looking for?
</label>
<input type="search" id="header-search" name="header-search" class="search inline" required="true" />
<input type="submit" value="Submit" class="" />
</form>
{
"label": "What are you looking for?",
"label_optional": "",
"placeholder": "",
"modifier_search": "inline",
"text": "Submit",
"search_id": "header-search",
"search_name": "header-search"
}
.search {
display: flex;
position: relative;
flex-wrap: wrap;
align-items: center;
label {
@extend %h3;
width: 100%;
max-width: 100%;
}
input {
margin-bottom: .5rem;
&:not([type="submit"]) {
flex: 1 1 $bp-mobile;
margin-right: .4rem;
}
}
input[type="search"] {
@extend %search-input;
}
input[type="submit"] {
@include button-large;
margin-right: 0;
}
}
%search-input {
padding-left: 2.4rem;
&,
&:focus {
@include theme-content('color-primary', 'link-color') {
background: svg-as-background('search', $theme-color, 32, 32) no-repeat left .4rem center;
};
}
}