<form class="form form-search">
<div class="form-label">
<label for="header-search">What are you looking for?
</label>
</div>
<input type="search" name="header-search" id="header-search" placeholder="" class="inline">
<input type="submit" value="Submit" class="btn btn--inline" />
</form>
<form class="form form-search">
<div class="form-label">
{% include '@label' with {
"label": label,
"for": for,
"label_optional": label_optional
} %}
</div>
{% include '@input-search' with {
'placeholder': placeholder,
'modifier': modifier_search,
'search_id': search_id,
'search_name': search_id
} %}
{% include '@input-submit' with {
'value': text,
'modifier': modifier_submit
} %}
</form>
{
"label": "What are you looking for?",
"for": "header-search",
"label_optional": null,
"placeholder": null,
"modifier_search": "inline",
"text": "Submit",
"search_id": "header-search",
"search_name": "header-search",
"modifier_submit": "btn--inline"
}
The search molecule can be used in many different contexts. One example could be the header organisme of the City of Ghent.
It never has a placeholder, as defined by the style guide for all input types. One exception is inside the header organisme, where a label is not possible and it does need a placeholder.