検索ツール／Search tool

サイト内での検索に利用するコンポーネントです。

<div class="c-search">
  <div class="c-search__input">
    <input class="c-input" type="search" id="search" placeholder="検索キーワードを入力">
    <button class="c-search__submitBtn" type="submit" aria-label="送信"><svg class="icon" aria-hidden="true" role="img"><use xlink:href="/assets/img/sprite.svg#search"></use></svg></button>
  </div>
</div>

原則

実装にあたり、目的や用法に適した開発方法と組み合わせて利用を検討してください。

パターン

絞り込みタググループ

検索結果を絞り込むためのタググループを表示するパターンです。

<div class="c-searchTool">
  <fieldset class="c-searchTool__tagControls" data-js-taglist="">
  <legend>絞り込むキーワードを選択</legend>
  <label class="c-searchTool__tagButton"><input type="checkbox" name="">タグA</label>
  <label class="c-searchTool__tagButton"><input type="checkbox" name="">タグB</label>
  <label class="c-searchTool__tagButton"><input type="checkbox" name="">タグC</label>
  <label class="c-searchTool__tagButton"><input type="checkbox" name="">タグE</label>
  <label class="c-searchTool__tagButton"><input type="checkbox" name="">タグD</label>
  <label class="c-searchTool__tagButton"><input type="checkbox" name="">タグF</label>
  <label class="c-searchTool__tagButton"><input type="checkbox" name="">タグAA</label>
  <label class="c-searchTool__tagButton"><input type="checkbox" name="">タグAB</label>
  <label class="c-searchTool__tagButton"><input type="checkbox" name="">タグAC</label>
  <label class="c-searchTool__tagButton"><input type="checkbox" name="">タグAD</label>
  <label class="c-searchTool__tagButton"><input type="checkbox" name="">タグADA</label>
  <label class="c-searchTool__tagButton"><input type="checkbox" name="">タグADAA</label>
  </fieldset>
</div>