Search field 検索ボックス

デモ

別名

• Search — Carbon Design System
• SearchField — React Aria
• 検索ボックス — デジタル庁デザインシステム

見分けるポイント

虫眼鏡のアイコンが付くことの多い入力欄の横に「検索」ボタンがある。ブラウザによっては入力を消す × ボタンが出る。

バリエーション

検索範囲の指定付き

入力欄の横のメニューで、お知らせだけ・資料だけのように検索する範囲を絞る。

挙動

• Enter またはボタンで検索を実行する。
• このデモはフォームを <search> 要素で囲んでいる。検索のランドマークになり、スクリーンリーダーの利用者が直接移動できる。
• <input type="search"> を使っているので、Chrome では Esc で入力を消せる。

キーボード操作

使い分け・注意点

• サイト全体を横断する検索に使う。表の行を絞り込むのには使わず、表の操作部品を使う。
• ラベルを付ける。「検索」などのプレースホルダーはラベルの代わりにならない。

似た部品との違い

• テキストフィールド（インプットテキスト）: 検索ボックスは検索語を入れるためのテキストフィールドで、検索ボタンや検索のランドマークが付くことが多い。
• コンボボックス: 検索ボックスは入力した語をそのまま送り、コンボボックスは入力中に選べる候補を出す。

出典

• MDN: <search> (最終確認日: 2026-10-20)
• MDN: <input type="search"> (最終確認日: 2026-10-20)
• デジタル庁デザインシステムウェブサイト「検索ボックス」をもとに作成 (最終確認日: 2026-10-20)