Search

<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"
}

Search

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.