ユーザーが選択できるオプションのリストを表示します。ボタンによってトリガーされます。
制御することも、制御しないこともできます。
2つの配置モードを提供します。
アイテム、ラベル、アイテムのグループをサポートします。
フォーカスは完全に管理されます。
完全なキーボードナビゲーション。
カスタムプレースホルダーをサポートします。
先行入力のサポート。
右から左への方向をサポートします。
コマンドラインからコンポーネントをインストールします。
すべてのパーツをインポートして、それらをまとめて組み立てます。
選択のすべてのパーツが含まれています。
選択を切り替えるボタン。Select.Content は、トリガーに揃えて配置されます。
選択された値を反映する部分です。デフォルトでは、選択された項目のテキストが表示されます。より詳細な制御が必要な場合は、代わりにselectを制御し、独自の children を渡すことができます。正しい位置を確保するために、スタイルを設定しないでください。 selectに値がない場合は、オプションの placeholder propも使用できます。
値の横に表示される小さなアイコンで、開くことができることを視覚的に示します。デフォルトでは▼が表示されますが、 asChild を使用して独自のアイコンを使用するか、 children を使用できます。
使用すると、コンテンツ部分を body にポータルします。
選択が開いたときにポップアウトするコンポーネントです。
すべてのアイテムを含むスクロール可能なビューポートです。
選択項目を含むコンポーネントです。
アイテムのテキスト部分です。そのアイテムが選択されたときにトリガーに表示したいテキストのみを含める必要があります。正しい位置を確保するために、スタイルを設定しないでください。
アイテムが選択されているときにレンダリングされます。この要素を直接スタイル設定するか、アイコンを入れるためのラッパーとして使用するか、または両方を行うことができます。
ビューポートのオーバーフローを表示するためのアフォーダンスとして使用されるオプションのボタンで、機能的に上方向へのスクロールを有効にします。
ビューポートのオーバーフローを表示するためのアフォーダンスとして使用されるオプションのボタンで、機能的に下方向へのスクロールを有効にします。
複数のアイテムをグループ化するために使用します。 Select.Label と組み合わせて使用すると、自動ラベル付けによりアクセシビリティが向上します。
グループのラベルをレンダリングするために使用します。矢印キーを使用してフォーカスすることはできません。
選択項目を視覚的に区切るために使用します。
コンテンツと一緒にレンダリングするオプションの矢印要素です。これは、トリガーと Select.Content を視覚的にリンクするのに役立ちます。 Select.Content 内にレンダリングする必要があります。 position が popper に設定されている場合にのみ使用できます。
デフォルトでは、 Select は、アクティブなアイテムを基準にして Select.Content を配置することにより、ネイティブのMacOSメニューと同様に動作します。 Popover や DropdownMenu に似た代替の配置方法が必要な場合は、 position を popper に設定し、 side 、 sideOffset などの追加の配置オプションを使用できます。
Select.Content で position="popper" を使用する場合、コンテンツの幅がトリガーの幅と一致するように制約することができます。また、高さがビューポートを超えないように制約することもできます。
これをサポートするために、 --radix-select-trigger-width や --radix-select-content-available-height などのいくつかのCSSカスタムプロパティを公開しています。これらを使用して、コンテンツの寸法を制約します。
data-disabled 属性を使用して、無効化されたアイテムに特別なスタイルを追加できます。
選択に値がない場合は、 Value で placeholder propを使用できます。スタイル設定に役立つ Trigger に data-placeholder 属性もあります。
Separator パートを使用して、アイテムの間にセパレータを追加します。
Group と Label パートを使用して、アイテムをセクションにグループ化します。
アイテムにカスタムコンテンツを使用できます。
デフォルトでは、トリガーは選択されたアイテムの ItemText のコンテンツを自動的に表示します。 ItemText パートの内側/外側に配置することで、表示内容を制御できます。
より柔軟性が必要な場合は、 value / onValueChange propを使用してコンポーネントを制御し、 children を SelectValue に渡すことができます。そこに配置するものがアクセス可能であることを確認してください。
最高のUXを実現するために、 ScrollUpButton と ScrollDownButton パートを使用することをお勧めしているため、ネイティブのスクロールバーはデフォルトで非表示になっています。これらのパートを使用したくない場合は、 スクロールエリア プリミティブを使用して選択を作成します。
ListBox WAI-ARIA設計パターンに準拠しています。
W3Cの 選択専用コンボボックス の例を参照して、詳細を確認してください。
視覚的にもアクセシブルにも優れたラベルを select に提供するために、Label コンポーネントを使用してください。
プリミティブな部分を独自のコンポーネントに抽象化することで、独自のAPIを作成できます。
Select と SelectItem に抽象化します。この例では、ほとんどの部分を抽象化しています。