Sparkle Design

Filter Chip

フィルターチップはタグや単語を用いてコンテンツをフィルタリングするために使用するコンポーネントです。

Figma
Filter Chip の概要図

Anatomy: 解剖図

Filter Chipの構成要素を示す解剖図。1は全体を囲むContainerを、2はフィルターチップにコンテキストを付与するValueテキストを、3はオプションで配置可能なラベルの後（tailing）に配置するIconを示します。
ItemNameDescriptionComponentOptional
1Containerコンテナ要素—
2Valueフィルターチップにコンテキストを付与するためのテキスト要素—
3Iconラベルの後 (tailing) に配置するアイコン要素Icon任意

Options: 選択肢

Size

sm

通常よりも小さなサイズです。限られたスペースにフィルターチップを配置する場合かつアクションの重要性が低い場合に使用します。

smサイズのFilter Chip。

md (default)

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

mdサイズのFilter Chip。

lg

大きなフィルターチップはアクションの重要性を高めるため、使用は極力控えてください。

lgサイズのFilter Chip。

isSelected

false (default)

フィルターチップが未選択のデフォルト状態です。

isSelected false のFilter Chip。

true

選択された条件が現在の結果に反映されている状態です。未選択のチップと区別するためアイコンが表示されます。

isSelected true のFilter Chip。「ラベル」というテキストの左側にチェックマークアイコンが表示されています。

isDropdown

false (default)

複数のオプションが横に並ぶフィルターチップです。

isDropdown false のFilter Chip。「ラベル」という3つのフィルターチップが横に並んで、表示されています。

true

オプションがドロップダウンで表示するフィルターチップです。

isDropdown true のFilter Chip。「ラベル」というテキストの右側に下向き矢印アイコンが表示されています。

States: 状態

Enable状態のFilter Chip。操作可能な初期状態のFilter Chipです。

Enable

ユーザーがフィルターチップを操作する前のデフォルトの状態。

Hover状態のFilter Chip。背景色がグレーを基調としたFilter Chipです。

Hover

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

Focus状態のFilter Chip。青い枠線が表示され、グレーを基調としたFilter Chipです。

Focus

ユーザーがタッチ操作や、キーボードや音声による操作を用いてフィルターチップに注視している状態。

Disabled状態のFilter Chip。半透明状態のFilter Chipです。

Disabled

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

Behaviors: 振る舞い

固定幅と全幅

フィルターチップの幅は初期状態ではテキスト量に合わせて自動的に可変します。

オプションとして、固定幅と全幅のいずれかにすることができます。全幅はコンテナサイズに合わせてフィルターチップのサイズが可変します。

固定幅と全幅の振る舞いを示す図。「日本」「アルゼンチン」「パプア・ニューギニア」という3つのフィルターチップが縦に並んで、表示されています。

最小幅

フィルターチップの最小幅はフィルターチップの高さの2倍の値です。最小幅が存在することで、小さなフィルターチップや文字量が少ないフィルターチップでもユーザーが適切に視認することをサポートします。

最小幅の振る舞いを示す図。「日本」というテキストのフィルターチップが表示されています。

ドロップダウン

ドロップダウンのフィルターチップはMenuが表示されます。メニューから選択してもフィルターのタイトルは変わりません。

フィルターチップはあらゆるメニューのバリエーションにも対応できます。

複数選択したメニューをフィールドに表示したい場合はInput Chip の使用を検討してください。

ドロップダウンの振る舞いを示す図。「価格」というフィルターチップの下にチェックボックス付きのメニューが表示され、「¥」「¥¥」「¥¥¥」「¥¥¥¥」という選択肢が並んでいます。

Metrics: 寸法

sm

  • Vertical Resizing: Hug
  • Horizontal Resizing: Hug
  • Container Height: 32px
  • Item Spacing: 4px
  • padding Vertical: 4px
  • padding Horizontal: 8px
smサイズの寸法仕様を示す図。

md

  • Vertical Resizing: Hug
  • Horizontal Resizing: Hug
  • Container Height: 40px
  • Item Spacing: 4px
  • padding Vertical: 8px
  • padding Horizontal: 8px
mdサイズの寸法仕様を示す図。

lg

  • Vertical Resizing: Hug
  • Horizontal Resizing: Hug
  • Container height: 48
  • Item Spacing: 4px
  • Horizontal Padding: 12px
  • Vertical Padding: 8px
lgサイズの寸法仕様を示す図。

Usage: 使い方

適切な使用例。「日本」「アメリカ」「イギリス」という3つのフィルターチップが横に並んでいます。「日本」と「アメリカ」が選択された状態です。
Do

フィルターチップは複数のオプションを提示してください。

不適切な使用例。選択された「日本」というフィルターチップが表示されています。
Don’t

フィルターチップは単一のオプションだけにしないでください。

適切な使用例。「日本」「アメリカ」「イギリス」という3つのフィルターチップが横に並んでいます。
Do

画面上にすべての選択肢を表示し、ユーザーが直感的に複数のフィルターを選択・解除できるようにしてください。検索結果や商品一覧の絞り込みなど、即時性が求められる場面で使用しましょう。

不適切な使用例。「日本」「アメリカ」「イギリス」「フランス」「イタリア」「カナダ」「スペイン」「中国」「タイ」「ニュージーランド」「オーストラリア」「メキシコ」という多数のフィルターチップが複数行に配置されています。
Don’t

選択肢が非常に多い場合や、画面スペースを圧迫する場合に使用しないでください。その場合はセレクトを検討します。

単一選択の例。「日本」「アメリカ」「イギリス」という3つのフィルターチップが横に並び、「日本」が選択された状態です。

単一選択

単一のチップを選択、または解除できます。これは、ラジオボタン、単一選択メニューの代替として使用できます。Radio Buttonと異なり、未選択状態を許容するため、いずれの選択肢も選ばないことが可能です。

複数選択の例。「日本」「アメリカ」「イギリス」という3つのフィルターチップが横に並び、「日本」と「アメリカ」が選択された状態です。

複数選択

複数のチップを選択、または解除できます。ただし、同一ページ内で単一選択と複数選択のチップを混在させることは避けてください。ページ上のすべてのフィルターチップは、単一選択または複数選択のいずれかに統一する必要があります。

Contents: 内容

適切な使用例。「バチカン市国」というラベルが表示されたフィルターチップです。
Do

フィルターチップのラベルは改行せずに簡潔に記述してください。

不適切な使用例。「バチカン」「市国」という2行に改行されたラベルのフィルターチップです。
Don’t

フィルターチップのラベルは改行せずに記述してください。複数行になった場合はラベルを再検討してください。

適切な使用例。「イギリス」というラベルのフィルターチップです。
Do

フィルターチップのラベルは簡潔にしてください。

不適切な使用例。「アメリカ」というフィルターチップの下にドロップダウンメニューが表示され、「日本」「アメリカ」（選択済み）「イギリス」「オーストラリア」という選択肢が並んでいます。
Don’t

選択した値をラベルに反映しないでください。

注意事項。「グレートブリテン及び北アイルランド連合王国」というラベルのフィルターチップです。
Caution

フィルターチップのラベルは 20 文字以上にしないでください。

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

Select
Input Chip
Radio

Change log: 変更履歴

DateChanges
2024/11/22初版を公開
小さな気づきや違和感があれば、お気軽に教えてください。
フィードバック
Chat illustration
前へ次へ