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 ">
            <input class="f-base --background-gray-100" type="search" id="input-search-1703820019" 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">
      <img src="images/svg/mag.svg"  loading="lazy">
  
  </span>
    </span>
    </button>
            </div>
        
            </div>
    <input type="hidden" data-autocomplete-url>

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_location: true,
  button: {
    title: "Hledej"
  },
}} %}

      
  •           



        <div class="f-search ">
          <div class="f-wrap ">
          <span class="f-input__wrapper ">
            <input class="f-base --background-gray-100" type="search" id="input-search-6630592" 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">
      <img src="images/svg/mag.svg"  loading="lazy">
  
  </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" alt="Hledat">
                <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" alt="Další">
            </a>
            </div>
    <input type="hidden" data-autocomplete-url>

With autocomplete, Tomas' source 

  •         {% include "@Components/forms/search-field/search-field.twig" with { props: {
	placeholder: "Obec, ulici, text, ID nemovitosti...",
	attributes: [
		"data-autocomplete",
		"autocomplete='off'",
		"data-api-source-endpoint='https://nove.ceskereality.cz/real-estate/ajax/autocomplete/?filter[search]=__QUERY_STRING__'",
	],
	search_in_location: true,
	button: {
		title: "Hledej"
	}
} } %}

      
  •           



        <div class="f-search ">
          <div class="f-wrap ">
          <span class="f-input__wrapper ">
            <input class="f-base --background-gray-100" type="search" id="input-search-1746066438" placeholder="Obec, ulici, text, ID nemovitosti..." data-autocomplete autocomplete='off' data-api-source-endpoint='https://nove.ceskereality.cz/real-estate/ajax/autocomplete/?filter[search]=__QUERY_STRING__'>
                </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">
      <img src="images/svg/mag.svg"  loading="lazy">
  
  </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" alt="Hledat">
                <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" alt="Další">
            </a>
            </div>
    <input type="hidden" data-autocomplete-url>

Without button 

  •         {% include "@Components/forms/search-field/search-field.twig" with { props: {
	placeholder: "Obec, ulici, text, ID nemovitosti...",
	attributes: [
		"data-autocomplete",
		"autocomplete='off'",
		"data-api-source-endpoint='https://nove.ceskereality.cz/real-estate/ajax/autocomplete/?filter[search]=__QUERY_STRING__'",
	],
	search_in_location: true,
} } %}

      
  •           



        <div class="f-search --without-button">
          <div class="f-wrap ">
          <span class="f-input__wrapper ">
            <input class="f-base --background-gray-100" type="search" id="input-search-501816553" placeholder="Obec, ulici, text, ID nemovitosti..." data-autocomplete autocomplete='off' data-api-source-endpoint='https://nove.ceskereality.cz/real-estate/ajax/autocomplete/?filter[search]=__QUERY_STRING__'>
                </span>
  </div>
        
                    <a class="search-autocomplete__geolocation d-none" data-compute-geolocation>
                <img class="search-autocomplete__area-icon" src="images/svg/my-area.svg" alt="Hledat">
                <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" alt="Další">
            </a>
            </div>
    <input type="hidden" data-autocomplete-url>

English translations 

  •         {% include "@Components/forms/search-field/search-field.twig" with { props: {
	placeholder: "Search wherever the fuck u want",
	attributes: [
		"data-autocomplete",
		"autocomplete='off'",
		"data-api-source-endpoint='https://nove.ceskereality.cz/real-estate/ajax/autocomplete/?filter[search]=__QUERY_STRING__'",
	],
    button: {
        title: "Search"
    },
	search_in_location: true,
	search_in_location_text: 'Search in my location',
	search_in_location_note: 'This requires temporary access to your current location',
} } %}

      
  •           



        <div class="f-search ">
          <div class="f-wrap ">
          <span class="f-input__wrapper ">
            <input class="f-base --background-gray-100" type="search" id="input-search-424902227" placeholder="Search wherever the fuck u want" data-autocomplete autocomplete='off' data-api-source-endpoint='https://nove.ceskereality.cz/real-estate/ajax/autocomplete/?filter[search]=__QUERY_STRING__'>
                </span>
  </div>
                    <div class="f-search__button">
                <button class="btn --conversion  --icon-before" type="submit">    <span class="btn__title ">Search</span>
        <span class="btn__icon ">
      <span class="icon">
      <img src="images/svg/mag.svg"  loading="lazy">
  
  </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" alt="Hledat">
                <span class="search-autocomplete__geolocation-main">Search in my location</span>
                <span class="search-autocomplete__geolocation-note">This requires temporary access to your current location</span>
                <img class="search-autocomplete__arrow-icon" src="images/svg/arrow-big-right.svg" alt="Další">
            </a>
            </div>
    <input type="hidden" data-autocomplete-url>

Schema 

    {
  "props": {
    "placeholder": {
      "type": "string",
      "description": "Input's placeholder"
    },
    "search_in_location": {
      "type": "boolean",
      "description": "Enable/disable my location button"
    },
    "search_in_location_text": {
      "type": "string",
      "description": "Translation text for 'Hledat v mé lokalitě'"
    },
    "search_in_location_note": {
      "type": "string",
      "description": "Translation text for 'Vyžaduje dočasný přístup k aktuální poloze'"
    },
    "attributes": {
      "type": "array",
      "description": "HTML attributes set [\"data-autocomplete\"] to display autocomplete"
    },
    "button": {
      "type": "object",
      "description": "Inherited form Button component"
    }
  }
}