Sparkle Design

Input Search

インプットサーチは検索条件を入力するために使用するコンポーネントです。

Figma
Input Search の概要図

Anatomy: 解剖図

Input Searchの構成要素を示す解剖図。1はHTML Inputエレメントを表すContainerを、2はアイコン要素を表すiconを、3はユーザーからの入力を受けるエディタブルな要素を表すValueを、4は入力した項目を削除するためのトリガーを表すClear Triggerを、5は絞り込みを実行するためのトリガー要素を表すCondition Triggerを示します。
ItemNameDescriptionComponentOptional
1ContainerHTML Input エレメント—
2iconアイコン要素Icon—
3Valueユーザーからの入力を受けるエディタブルな要素—
4Clear Trigger入力した項目を削除するためのトリガーIcon Button任意
5Condition Trigger絞り込みを実行するためのトリガー要素Icon Button任意

Options: 選択肢

Size

sm

通常よりも小さなサイズです。限られたスペースにフィールドを配置する場合かつ入力の重要性が低い場合に使用します。

Size smのInput Search。

md (default)

インプットサーチのデフォルトのサイズです。ノーマルが最も使用されるサイズです。他のサイズのフィールドはノーマルを基準に重要度に応じて使用します。

Size mdのInput Search。

lg

大きなインプットサーチは入力の重要性を高めるため、使用は極力控えてください。

Size lgのInput Search。

isConditionTrigger

False

絞り込みを実行するためのトリガーを無効化するオプションです。

isConditionTrigger Falseの状態。検索アイコンと「日本」というテキストのみが表示された検索入力フィールドです。

True

絞り込みを実行するためのトリガーを有効化するオプションです。

isConditionTrigger Trueの状態。検索アイコンと「日本」というテキスト、絞り込みアイコンが表示された検索入力フィールドです。

isClearTrigger

False

フィールドに値が存在しない状態ないし、クリアトリガーが無効化された状態のオプションです。

isClearTrigger Falseの状態。検索アイコンと「日本」というテキストが表示された検索入力フィールドです。

True

クリアトリガーが有効化された状態かつ、フィールドに値が存在する場合のオプションです。

isClearTrigger Trueの状態。検索アイコンと「日本」というテキスト、クリアアイコンが表示された検索入力フィールドです。

States: 状態

Enable状態のInput Search。グレーの枠線で囲まれた入力フィールド内に検索アイコンと「入力内容」というプレースホルダー、絞り込みアイコンが表示されています。

Enable

ユーザーが操作する前のデフォルトの状態。

Hover状態のInput Search。Enable状態より濃いグレーの枠線で囲まれた入力フィールド内に検索アイコンと「入力内容」というプレースホルダー、絞り込みアイコンが表示されています。

Hover

ユーザーがフィールドにマウスオーバーしている状態。

Focus状態のInput Search。青い枠線で囲まれた入力フィールド内に検索アイコンと「入力内容」というプレースホルダー、絞り込みアイコンが表示されています。

Focus

フィールドが操作可能な状態。キャレットが表示され、編集が可能であることがユーザーに伝達されます。

Disabled状態のInput Search。半透明のグレーの枠線で囲まれた入力フィールド内に半透明の検索アイコンと「入力内容」というプレースホルダー、絞り込みアイコンが表示されています。

Disabled

システムによってフィールドが非活性化されている状態。ユーザーによる操作は不能です。

Invalid

Invalid Enable状態のInput Search。赤い枠線で囲まれた入力フィールド内に検索アイコンと「入力内容」というプレースホルダー、絞り込みアイコンが表示されています。

Enable

入力内容が特定のフォーマット (検索条件など) に準拠していない場合の状態です。

ユーザーが適切な入力を行うことで無効状態は解除されます。

Invalid Hover状態のInput Search。Enable状態より濃い赤い枠線で囲まれた入力フィールド内に検索アイコンと「入力内容」というプレースホルダー、絞り込みアイコンが表示されています。

Hover

ユーザーがフィールドにマウスオーバーしている場合かつ、入力内容が特定の条件やフォーマットに準拠していない場合の状態です。

Invalid Focus状態のInput Search。青い枠線で囲まれた入力フィールド内に検索アイコンと「入力内容」というプレースホルダー、絞り込みアイコンが表示されています。

Focus

フォーカスされている場合かつ、入力内容が特定の条件やフォーマットに準拠していない場合の状態です。

Invalid Disabled状態のInput Search。半透明のグレーの枠線で囲まれた入力フィールド内に半透明の検索アイコンと「入力内容」というプレースホルダー、絞り込みアイコンが表示されています。

Disabled

システムによってフィールドが非活性化されている場合かつ、入力内容が特定の条件やフォーマットに準拠していない場合の状態です。

Behaviors: 振る舞い

最小幅

テキストフィールドの最小幅は、テキスト入力エリアが、フィールドの高さの2倍を担保するように設定します。このとき、テキスト入力エリアには、トリガーのエリアを含みません。

この最小幅によって、小さなテキストフィールドが読みやすくなるほか、タッチデバイスでも選択しやすくなります。

最小幅の仕様を示す図。検索アイコンと「日本」というテキスト、クリアアイコン、絞り込みアイコンが表示された入力フィールドです。矢印と「a」「2a」のラベルは、テキスト入力エリアがフィールドの高さの2倍を担保することを示します。

テキストオーバーフロー

フィールド内のテキストが指定された横幅に対して長すぎて収まらない場合、テキストはオーバーフローで表示されて横スクロールで確認できます。

テキストオーバーフローを示す図。検索アイコンと「港区芝公園4丁目2-」というテキスト、クリアアイコン、絞り込みアイコンが表示された入力フィールドです。

クリアトリガー

クリアトリガーが有効化されている場合かつ、フィールドに値が入力されている場合にはクリアトリガーが表示されます。

フィールドに値が存在しない場合にはクリアトリガーは非表示になります。

クリアトリガーの振る舞いを示す図。検索アイコンと「日本」というテキスト、クリアアイコン、絞り込みアイコンが表示された入力フィールドです。

Metrics: 寸法

sm

  • Vertical Resizing: Hug
  • Horizontal Resizing: Fixed
  • Container Height: 32px
  • padding Vertical: 4px
  • padding Horizontal: 4px
Size smの寸法仕様を示す図。

md

  • Vertical Resizing: Hug
  • Horizontal Resizing: Fixed
  • Container Height: 40px
  • padding Vertical: 4px
  • padding Horizontal: 4px
Size mdの寸法仕様を示す図。

lg

  • Vertical Resizing: Hug
  • Horizontal Resizing: Fixed
  • Container Height: 48px
  • padding Vertical: 4px
  • padding Horizontal: 4px
Size lgの寸法仕様を示す図。

Field

  • Vertical Resizing: Hug
  • Horizontal Resizing: Fill
  • Item spacing:px
  • padding Horizontal: 6,8px
Fieldの寸法仕様を示す図。

Controller

  • Vertical Resizing: Hug
  • Horizontal Resizing: Fill
  • Item spacing: 2px
Controllerの寸法仕様を示す図。

Usage: 使い方

Input Searchを使用する際はFormコンポーネントの用法に従ってください。

Related Components: 関連コンポーネント

Form
Input

Change log: 変更履歴

DateChanges
2025/07/18ドキュメント更新
2025/1/10初版を公開
小さな気づきや違和感があれば、お気軽に教えてください。
フィードバック
Chat illustration
前へ次へ