InstantSearch specs

✏️ edit page

VoiceSearch

The icon is from <a href="https://feathericons.com/" target="_blank">Feather icons</a>. Its license is MIT and the attribution is not needed according to <a href="https://github.com/feathericons/feather/issues/95" target="_blank">this</a>.

Widget example

Amazon Fire tablet

HTML output

<div class="ais-VoiceSearch">
  <button class="ais-VoiceSearch-button" type="button" title="Search by voice">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
      <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
      <line x1="12" y1="19" x2="12" y2="23"></line>
      <line x1="8" y1="23" x2="16" y2="23"></line>
    </svg>
  </button>
  <div class="ais-VoiceSearch-status">
    <p>Amazon Fire tablet</p>
  </div>
</div>

CSS classes

Hint: hover classes below to see their position.

name description
.ais-VoiceSearch the root div of the widget
.ais-VoiceSearch-button the button to trigger the voice search
.ais-VoiceSearch-status the status of the voice search

Options

Note: this is a guideline for new InstantSearch flavours, not a rule.

name default value description
searchAsYouSpeak If you enable this option, new searches will be triggered every time speech recognition generates interim transcript while speaking.

Translations

Note: there are no translations for this widget