Select

ドロップダウンリストから選択肢を選ぶフォームコンポーネントです。カテゴリ選択や地域選択など、定義済みの選択肢から選ぶ際に使用します。

Basic

jui-select の最も基本的な使用例です。

Slot Driven (宣言的記述)

オプションを配列データとして渡す代わりに、<jui-select-option> を子要素（スロット）として配置することで宣言的に記述することができます。HTMLファーストなプロジェクトや、オプション内にアイコンなどを含めたい場合に便利です。

States

disabled などのプロパティを使用してコンポーネントの状態（非活性など）を制御します。

関連コンポーネント

• Dropdown — メニュー形式のドロップダウンリスト~~
• Form Field — ラベルやバリデーションを付加するラッパー
• Input — 自由記述のテキスト入力コンポーネント

ブラウザ対応

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
Popover API	ドロップダウン開閉	114+	125+	17.0+	Baseline Widely Available
CSS Anchor Positioning	ドロップダウン配置	125+	147+	26+	Baseline Newly Available
:has()	トリガー状態の反映	105+	121+	15.4+	Baseline 2023
@starting-style	フェードインアニメーション	117+	129+	17.5+	Baseline 2024

💡 CSS Anchor Positioning は Baseline Newly Available のため、古いブラウザではドロップダウンの位置が正確に表示されない可能性があります。

Baseline 情報

機能	Baseline 達成	Widely Available 予定
Popover API	2024年4月	2026年後半
CSS Anchor Positioning	2025年	2027年後半
:has()	2023年12月	2026年半ば
@starting-style	2024年	2026年後半

🧪 Canary 版での変更

機能	変更内容	対応ブラウザ
Customizable Select	<select> を appearance: base-select で完全カスタマイズ、JS ゼロ	Chrome 135+ のみ

アクセシビリティ

• WAI-ARIA:
  • ネイティブの <select> ではなく、トリガーに <button type="button"> を用いたカスタムコンボボックスとして実装されています。トリガーには role="combobox"、aria-haspopup="listbox"、開閉状態を示す aria-expanded（開いている時 true）、ドロップダウンを指す aria-controls が付与されます。
  • ドロップダウン（Popover）には role="listbox"、各オプションには role="option" が付与されます。選択中のオプションは aria-selected="true"、無効なオプションは aria-disabled="true" を持ちます。
  • キーボード操作中にハイライトされているオプションは、トリガーの aria-activedescendant がその要素 ID を指すことで支援技術に伝わります（ドロップダウンが開いている間のみ）。
  • label Prop を指定すると <label> が描画され、aria-labelledby でトリガーおよびリストボックスと関連付けられます。required 指定時のラベル横の * は装飾のため aria-hidden="true" です。
  • errorMessage 指定時はトリガーに aria-describedby が付与され、エラーメッセージ要素（role="alert"）と関連付けられます。
  • disabled の時はトリガーに disabled 属性と aria-disabled="true" が付与されます。選択中の value はフォーム送信に用いられます（formAssociated によりネイティブフォームへ参加します）。
• キーボードナビゲーション:
  • Tab でトリガーにフォーカスできます。閉じている状態で ArrowDown / Enter / Space を押すとドロップダウンが開きます。
  • 開いている状態では ArrowDown / ArrowUp でオプション間を移動し（無効なオプションは自動的にスキップ）、Enter / Space でハイライト中のオプションを選択して閉じます。
  • Escape でドロップダウンを閉じ、Tab でも閉じてフォーカス移動を許可します。
  • 装飾用の矢印アイコンやチェックマークの <span> には aria-hidden="true" が付与されます。

プロパティ

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
disabled	disabled	無効状態か	boolean	false
errorMessage	error-message	エラーメッセージ	string | undefined	undefined
label	label	ラベルテキスト	string | undefined	undefined
name	name	フォームフィールド名	string | undefined	undefined
options	options	オプション一覧（JSON文字列またはオブジェクト配列）	JuiSelectOption[] | string	'[]'
placeholder	placeholder	プレースホルダーテキスト	string	''
required	required	必須フィールドか	boolean	false
value	value	選択中の値	string	''

イベント

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
juiChange	値が変更された時に発火	CustomEvent<{ value: string; }>

スロット

コンポーネント内に子要素を挿入するためのスロット一覧です。

Slot	Description
	jui-select-option 子要素（options Prop 未指定時のフォールバック）

シャドウパーツ

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Part	Description
"dropdown"	ドロップダウンリスト
"error"	エラーメッセージ要素
"label"	ラベル要素
"option"	各オプション要素
"trigger"	トリガーボタン

---

Built with StencilJS