{% load design_components %}
<dds-search-box class="dds-search-box" data-state="closed" data-index-id="{{ index_id }}" {{ attrs }}>
  <div data-search-field>
    {% dds__icon name="search" size="sm" %}
    <input type="search" id="{{ input_id }}" data-search-input placeholder="{{ placeholder }}" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="{{ results_id }}" aria-label="{{ aria_label }}">
    {% if shortcut_hint %}
      <kbd data-search-shortcut aria-hidden="true">{{ shortcut_hint }}</kbd>
    {% endif %}
  </div>
  <div id="{{ results_id }}" data-search-results data-surface="popout" role="listbox" aria-label="Search results" hidden></div>
  <script id="{{ index_id }}" type="application/json" data-search-index>{{ search_index_json }}</script>
</dds-search-box>