Select Option

jui-select-option は、jui-select のスロット内で使用し、オプションの項目を宣言的に定義するためのコンポーネントです。

Basic

jui-select コンポーネントの子要素として配置して使用します。

🍎 りんご

🍌 バナナ

🍒 さくらんぼ (品切れ)

🍇 ぶどう

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

機能	用途	Chrome	Firefox	Safari	ステータス
`:host`	Shadow DOM ルート要素のスタイル制御	53+	63+	10+	Baseline 2020
`::slotted()`	スロットされたオプション名・アイコン等のスタイル制御	53+	63+	10+	Baseline 2020
CSS 変数 (`var()`)	デザイントークン（ハイライト背景、文字サイズ、色等）適用	49+	31+	9.1+	Baseline 2017

💡 いずれの機能も主要ブラウザで広く対応済みです。

WAI-ARIA:
- 親の jui-select 内のリストボックスと連動し、自身は role="option" としてマークアップされます。
- 自身が選択されている状態である場合、親から aria-selected="true" が付加されます。
- disabled が有効な場合は、aria-disabled="true" が自動的に設定されます。
キーボードナビゲーション:
- 親 jui-select が開いている際、ArrowDown / ArrowUp キーによる選択肢の移動でハイライト状態（highlighted）が変わり、Enter キーでその項目を決定することができます。

このコンポーネント固有のカスタムプロパティはありません。グローバルのデザイントークンを参照してスタイルが適用されます。

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

Property	Attribute	Description	Type	Default
`disabled`	`disabled`	無効状態	`boolean`	`false`
`highlighted`	`highlighted`	ハイライト状態（親の jui-select から制御されます）	`boolean`	`false`
`index`	`index`	インデックス（親の jui-select から注入されます）	`number \| undefined`	`undefined`
`label`	`label`	ラベルテキスト。指定がなければスロットのテキストを使用します。 (JuiSelect が選択値を表示する際に使われます)	`string \| undefined`	`undefined`
`selected`	`selected`	選択状態（親の jui-select から制御されます）	`boolean`	`false`
`value` (required)	`value`	オプションの値	`string`	`undefined`

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

Event	Description	Type
`juiSelectOptionClick`	クリックされたときに親に通知するイベント	`CustomEvent<{ value: string; label: string; index?: number \| undefined; }>`
`juiSelectOptionHover`	マウスホバーされたときに親に通知するイベント	`CustomEvent<{ value: string; index?: number \| undefined; }>`

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

Slot	Description
	表示ラベル（label / value Prop より優先）

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

Part	Description
`"check"`	選択時のチェックマーク
`"option"`	オプションの外枠

Built with StencilJS