Select (選択)

Select コンポーネントを使用して、ユーザーがドロップダウンに配置された項目のスクロール可能なリストから 1 つのオプションを選択できるようにします。Select は、ユーザーがデータを送信するための入力の一種です。シナリオで複数の項目を選択する必要がある場合は、代わりに Combo を使用する必要があります。Select は、Ignite UI for Angular Select コンポーネントと視覚的に同じものです。

Select のデモ

Select は、現在の選択を含む入力と、項目を選択できるように表示されるドロップダウンを組み合わせて作成されます。

Input タイプ

Input コンポーネントのように Select は border タイプ (単色背景でよりはっきりと表示)、より読みやすくするために鮮明な画像の上に配置する際に最適な box タイプから選択が可能です。

Border	Box

操作状態

Figma では、プロパティパネルを使用して、border と box タイプの Select Input の両方を Disabled (無効) 状態に設定できます。

Enabled 状態	Disabled 状態

状態

ユーザーが Select を操作すると、その入力はさまざまな選択状態を経ます。Idle (アイドル) ーコンテンツの代わりにプレースホルダーがあります; ドロップダウンが開いているときの Focused (フォーカス済み); ユーザーが選択を終了して次に進むときの Filled (塗りつぶし済み) です。柔軟性が向上したことにより、Hi-Fi プロトタイプへシームレスにフローする動的なインタラクションデザインの作成が可能です。

Idle 状態	Focused 状態	Filled 状態

経験豊富なデザイナーは、ユーザー入力を制限して無効な状態を防止するために、検証スタイルを使用します。Select の検証スタイルには統一感のある標準 Input があり、success (成功)、warning (警告)、error (エラー) を表示する洗練されたデザインを提供します。

Success	Warn	Error

Figma では、プロパティパネルの State プロパティを使用して、すべての状態を切り替えることができます。

Figma では、Select コンポーネントで明示的に使用される .Select Input と呼ばれる別の基本コンポーネントがあります。

Layout (レイアウト)

Select では、テキストとアイコンの組み合わせによるプレフィックスとサフィックスが豊富にサポートされています。Figma では、Prefix または Suffix を削除するには、プロパティパネルでオンまたはオフに切り替えます。

Prefix	Suffix	Prefix and Suffix

Select は、利用可能なオプションを表示するために、その構造内で Dropdown コンポーネントを利用します。利用可能な構成の詳細については、Dropdown ページをご覧ください。

スタイル設定

Select は入力とドロップダウン項目でスタイルの組み合わせに柔軟性があります。入力テキスト要素の色と最終的な行のスタイルと色にはオプションがあります。ドロップダウン項目の場合、背景とテキストの色を変更できます。

使用方法

Select を使用する際に入力とドロップダウンは同じ幅で左右の境界線が一致する必要があります。Select がフォーカスされている場合、ユーザーには現在の選択内容が常に通知される必要があるため、ドロップダウンは入力の上または下に表示されますが、入力の上には決して表示されません。リストから項目を選択すると、ドロップダウンが非表示になります。一方、ドロップダウンは、Select 入力と同じ面にある他のコンテンツの上に配置する必要があります。Select は、展開パネルのようにコンテンツをプッシュしません。

良い例	悪い例