Search input with button

Default type text 

  •         {% include "@Components/forms/search-field/search-field.twig" with { props: {
  placeholder: "Obec, ulici, text, ID nemovitosti...",
  button: {
    title: "Hledej"
  }
} } %}

      
  •           
<div class="f-search">
  <div class="f-wrap">
    
  <span class="f-input__wrapper position-relative">
        <input class="f-base --background-gray-100" type="search" id="test" placeholder="Obec, ulici, text, ID nemovitosti...">
      </span>

</div>
  <div class="f-search__button">
    <button class="btn --conversion  --icon-before" type="submit">    <span class="btn__title">Hledej</span>
  
      <span class="btn__icon">
      <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs></defs><g transform="translate(0 517.576)"><path class="a" d="M15.731-503.136l-2.146-2.138a7.607,7.607,0,0,0,1.624-4.7,7.641,7.641,0,0,0-7.6-7.6,7.641,7.641,0,0,0-7.6,7.6,7.641,7.641,0,0,0,7.6,7.6,7.606,7.606,0,0,0,4.7-1.624l2.138,2.146a.91.91,0,0,0,.646.269.91.91,0,0,0,.645-.269A.91.91,0,0,0,16-502.49a.91.91,0,0,0-.269-.646ZM1.85-509.956a5.8,5.8,0,0,1,5.77-5.77,5.8,5.8,0,0,1,5.77,5.77,5.8,5.8,0,0,1-5.77,5.77A5.8,5.8,0,0,1,1.85-509.956Z"/></g></svg>

  </span>
    </span>
  </button>
  </div>

  </div>

With autocomplete 

  •         {% include "@Components/forms/search-field/search-field.twig" with { props: {
  placeholder: "Obec, ulici, text, ID nemovitosti...",
  attributes: ["data-autocomplete", "autocomplete='off'"],
  search_in_locaion: true,
  button: {
    title: "Hledej"
  }
} } %}

      
  •           
<div class="f-search">
    <div class="f-wrap">
    
  <span class="f-input__wrapper position-relative">
        <input class="f-base --background-gray-100" type="search" id="test" placeholder="Obec, ulici, text, ID nemovitosti..." data-autocomplete autocomplete='off'>
      </span>

</div>
  <div class="f-search__button">
    <button class="btn --conversion  --icon-before" type="submit">    <span class="btn__title">Hledej</span>
  
      <span class="btn__icon">
      <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs></defs><g transform="translate(0 517.576)"><path class="a" d="M15.731-503.136l-2.146-2.138a7.607,7.607,0,0,0,1.624-4.7,7.641,7.641,0,0,0-7.6-7.6,7.641,7.641,0,0,0-7.6,7.6,7.641,7.641,0,0,0,7.6,7.6,7.606,7.606,0,0,0,4.7-1.624l2.138,2.146a.91.91,0,0,0,.646.269.91.91,0,0,0,.645-.269A.91.91,0,0,0,16-502.49a.91.91,0,0,0-.269-.646ZM1.85-509.956a5.8,5.8,0,0,1,5.77-5.77,5.8,5.8,0,0,1,5.77,5.77,5.8,5.8,0,0,1-5.77,5.77A5.8,5.8,0,0,1,1.85-509.956Z"/></g></svg>

  </span>
    </span>
  </button>
  </div>

      <a class="search-autocomplete__geolocation d-none" data-compute-geolocation>
      <img class="search-autocomplete__area-icon" src="images/svg/my-area.svg">
      <span class="search-autocomplete__geolocation-main">Hledat v mé lokalitě</span>
      <span class="search-autocomplete__geolocation-note">Vyžaduje dočasný přístup k aktuální poloze</span>
      <img class="search-autocomplete__arrow-icon" src="images/svg/arrow-big-right.svg">
    </a>
  </div>

Schema 

    {
  "props": {
    "placeholder": {
      "type": "string",
      "description": "Input's placeholder"
    },
    "search_in_locaion": {
      "type": "boolean",
      "description": "Enable/disable my location button"
    },
    "attributes": {
      "type": "array",
      "description": "HTML attributes set [\"data-autocomplete\"] to display autocomplete"
    },
    "button": {
      "type": "object",
      "description": "Inherited form Button component"
    }
  }
}