Select セレクト

ドロップダウン選択です。デフォルトではドロップダウンは body にマウントされ（fixed 配置でトリガーに追従）、popperContainer でコンテナを指定するか空を渡してその場にレンダリングできます。完全なキーボードナビゲーション（方向キー / Enter / ESC）を備えています。

セレクト

<template>
  <div class="demo-col" style="gap: 18px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhSelect v-model="value" :options="options" placeholder="題材を選択してください" clearable name="theme" />
      <LhSelect v-model="value" :options="options" size="small" />
      <LhSelect v-model="value" :options="options" size="large" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhSelect v-model="value" :options="options" disabled />
      <LhSelect v-model="empty" :options="[]" aria-label="データなし">
        <template #empty>
          <span class="demo-note">empty スロット：一致する題材はありません</span>
        </template>
      </LhSelect>
    </div>
    <p class="demo-note">現在の値：{{ value || '（未選択）' }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    value: 'ink',
    empty: undefined,
    options: [
      { value: 'ink', label: '水墨' },
      { value: 'paper', label: '宣紙' },
      { value: 'seal', label: '印章' },
      { value: 'blank', label: '留白' },
    ],
  }),
}
</script>

Props

プロパティ	説明	型	デフォルト値
v-model	選択値（option.value とマッチ。制御される modelValue prop）	unknown	—
options	オプションリスト { value, label, disabled? }	LhSelectOption[]	[]
placeholder	プレースホルダーテキスト。省略時は言語パッケージを使用	string	t('select.placeholder')
clearable	クリアボタンを表示	boolean	false
size	サイズ	'small' \| 'medium' \| 'large'	'medium'
disabled	無効	boolean	false
popperContainer	ドロップダウンのマウント先	'body' \| HTMLElement \| string	'body'
name / ariaLabel	アクセシビリティのラベリング	string	—
sx	sx によるレイアウト省略記法	—	—

Events

イベント	説明	コールバックパラメータ
input	v-model のイベント	—
change	選択値が変化したときに発火	(value, option)
clear	クリアしたときに発火	—

Slots

スロット	説明
empty	データがない場合の内容（デフォルトは「データなし」）

アクセシビリティ

トリガーは role="combobox" + aria-expanded/haspopup、ドロップダウンは role="listbox"、オプションは role="option" です。 LhFormItem 内でバリデーションに失敗した場合、自動的に aria-invalid が付与されます。