Barmer Fractal

Search Bar: Default 

<div class="m-search-bar js-search-bar-init">
    <form action="/action/barmer-ueberuns/12368/search" method="get" data-suggestion-url="/mock/search-suggestion.json?query&#x3D;" data-min-length="3" class="search-bar__form">
        <div class="search-bar__input-container" role="combobox" aria-expanded="false" aria-owns="" aria-haspopup="listbox">
            <label class="a-label " for="bm-search-query-header">
                Suche nach:

            </label>

            <input type="text" value="" class="a-input input--text" id="bm-search-query-header" placeholder="Suchbegriff, Login-Code" autocomplete="off" minlength="2" required="required" data-no-result="Keine Ergebnisse gefunden" data-one-result="Ein Ergebnis gefunden" data-more-results="Ergebnisse gefunden" aria-autocomplete="list">
            <button class="a-btn btn--search-submit js-search-submit" type="submit" aria-label="Suchanfrage abschicken" disabled="disabled"><i class="a-icon icon--search" aria-hidden="true"></i></button>

            <button class="a-btn btn--search-close js-search-close" type="button" aria-label="Schließt das Such-Interface"><i class="a-icon icon--close" aria-hidden="true"></i></button>

        </div>
        <ul role="listbox" class="search-bar__suggestion-panel m-nav-list" id="" hidden></ul>
    </form>

</div>
 
<div class="m-search-bar {{viewtypes.specifier}}" {{#content.id}}id="{{this}}"{{/content.id}}>
  <form action="{{content.formUrl}}" method="get" {{#switches.hasSuggestions}}data-suggestion-url="{{content.suggestionUrl}}" data-min-length="{{content.suggestionMinLength}}"{{/switches.hasSuggestions}} class="search-bar__form">
    <div class="search-bar__input-container" role="combobox" aria-expanded="false" aria-owns="{{content.panelId}}" aria-haspopup="listbox">
      {{# switches.hasLabel }}
      {{ render '@formelement-label' partials.label merge=true }}
      {{/ switches.hasLabel }}
      {{ render '@formelement-input--text' partials.input merge=true }}
      {{ render '@button--search' partials.btnSubmitAsIcon merge=true }}
      {{ render '@button--close' partials.btnClose merge=true }}
    </div>
    {{# switches.hasBtnSubmit }}
      {{ render '@button--submit' partials.btnSubmit merge=true }}
    {{/switches.hasBtnSubmit}}
    {{#switches.hasSuggestions}}<ul role="listbox" class="search-bar__suggestion-panel m-nav-list" id="{{content.panelId}}" hidden></ul>{{/switches.hasSuggestions}}
  </form>

  {{# switches.hasSearchSpecials }}
    {{ render '@search-specials' merge=true }}
  {{/switches.hasSearchSpecials }}

</div>
 
{
  "switches": {
    "hasSearchSpecials": false,
    "hasLabel": true,
    "hasBtnSubmit": false,
    "hasSuggestions": true
  },
  "viewtypes": {
    "specifier": "js-search-bar-init"
  },
  "content": {
    "formUrl": "/action/barmer-ueberuns/12368/search",
    "suggestionUrl": "/mock/search-suggestion.json?query=",
    "suggestionMinLength": "3"
  },
  "partials": {
    "label": {
      "switches": {},
      "viewtypes": {},
      "content": {
        "text": "Suche nach:",
        "for": "bm-search-query-header"
      },
      "partials": {}
    },
    "input": {
      "switches": {
        "isRequired": true
      },
      "viewtypes": {},
      "content": {
        "id": "bm-search-query-header",
        "placeholder": "Suchbegriff, Login-Code",
        "autocomplete": "off",
        "ariaAutocomplete": "list",
        "minlength": "2",
        "dataAttributes": "data-no-result=\"Keine Ergebnisse gefunden\" data-one-result=\"Ein Ergebnis gefunden\" data-more-results=\"Ergebnisse gefunden\""
      },
      "partials": {}
    },
    "btnSubmitAsIcon": {
      "switches": {
        "isDisabled": true
      },
      "viewtypes": {
        "specifier": "btn--search-submit js-search-submit"
      },
      "content": {
        "ariaLabel": "Suchanfrage abschicken",
        "ariaHasPopup": false,
        "ariaExpanded": false,
        "type": "submit"
      },
      "partials": {}
    },
    "btnClose": {
      "switches": {},
      "viewtypes": {
        "specifier": "btn--search-close js-search-close"
      },
      "content": {
        "ariaLabel": "Schließt das Such-Interface"
      },
      "partials": {}
    }
  }
}

Use of INPUT[type=text] instead of [type=search] due to styling differences: in some browsers [type=search] renders an additional cross icon (x) that conflicts visually with out set of icons