Select セレクト

LhSelect は選択肢リストから 1 つの値を選択するために使います。無効化された選択肢、クリア、キーボード操作に対応しています。

基本的な使い方

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhSelect } from '@lh-ui/vue3'

const selectedCity = ref('beijing')
const cityOptions = [
  { label: '北京', value: 'beijing' },
  { label: '上海', value: 'shanghai' },
  { label: '深圳', value: 'shenzhen' },
]
</script>

<template>
  <!-- 基本的な使い方 -->
  <LhSelect v-model="selectedCity" :options="cityOptions" placeholder="都市を選択してください" />
</template>

vue

<script>
import { LhSelect } from '@lh-ui/vue3'

export default {
  components: { LhSelect },
  data() {
    return {
      selectedCity: 'beijing',
      cityOptions: [
        { label: '北京', value: 'beijing' },
        { label: '上海', value: 'shanghai' },
        { label: '深圳', value: 'shenzhen' },
      ],
    }
  },
}
</script>

<template>
  <!-- 基本的な使い方 -->
  <LhSelect v-model="selectedCity" :options="cityOptions" placeholder="都市を選択してください" />
</template>

クリア可能と無効

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhSelect } from '@lh-ui/vue3'

const selectedRegion = ref('')
const selectedDisabled = ref('north')
const regionOptions = [
  { label: '華北', value: 'north' },
  { label: '華東', value: 'east' },
  { label: '華南', value: 'south' },
]
const disabledOptions = [
  { label: '華北', value: 'north', disabled: true },
  { label: '華東', value: 'east' },
  { label: '華南', value: 'south' },
]
</script>

<template>
  <!-- クリア可能 -->
  <LhSelect v-model="selectedRegion" :options="regionOptions" clearable placeholder="地域を選択してください" />
  <!-- 無効化済み -->
  <LhSelect v-model="selectedDisabled" :options="disabledOptions" disabled placeholder="無効化済み" />
</template>

vue

<script>
import { LhSelect } from '@lh-ui/vue3'

export default {
  components: { LhSelect },
  data() {
    return {
      selectedRegion: '',
      selectedDisabled: 'north',
      regionOptions: [
        { label: '華北', value: 'north' },
        { label: '華東', value: 'east' },
        { label: '華南', value: 'south' },
      ],
      disabledOptions: [
        { label: '華北', value: 'north', disabled: true },
        { label: '華東', value: 'east' },
        { label: '華南', value: 'south' },
      ],
    }
  },
}
</script>

<template>
  <!-- クリア可能 -->
  <LhSelect v-model="selectedRegion" :options="regionOptions" clearable placeholder="地域を選択してください" />
  <!-- 無効化済み -->
  <LhSelect v-model="selectedDisabled" :options="disabledOptions" disabled placeholder="無効化済み" />
</template>

カスタムテーマ

セレクトにカスタムテーマカラーを適用します。

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhSelect } from '@lh-ui/vue3'

const selectedTheme = ref('beijing')
const cityOptions = [
  { label: '北京', value: 'beijing' },
  { label: '上海', value: 'shanghai' },
]
const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <!-- 青花瓷テーマ -->
    <LhSelect v-model="selectedTheme" :options="cityOptions" placeholder="選択してください" />
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhSelect } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhSelect },
  data() {
    return {
      selectedTheme: 'beijing',
      cityOptions: [
        { label: '北京', value: 'beijing' },
        { label: '上海', value: 'shanghai' },
      ],
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
      },
    }
  },
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <!-- 青花瓷テーマ -->
    <LhSelect v-model="selectedTheme" :options="cityOptions" placeholder="選択してください" />
  </LhConfigProvider>
</template>

テーマの詳細はテーマカスタマイズを参照してください。

国際化

セレクトは LhConfigProvider と t 関数で国際化できます。

vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { LhConfigProvider, LhSelect, LhButton, zhCN, enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
const selected = ref('beijing')
const cityOptions = [
  { label: '北京', value: 'beijing' },
  { label: '上海', value: 'shanghai' },
  { label: '深圳', value: 'shenzhen' },
]
const messages = computed(() => (locale.value === 'zh-CN' ? zhCN : enUS))
</script>

<template>
  <LhConfigProvider :locale="messages">
    <!-- 都市選択 -->
    <LhSelect
      v-model="selected"
      :options="cityOptions"
      :placeholder="locale === 'zh-CN' ? '请选择城市' : 'Please select city'"
    />
    <!-- 言語切り替え -->
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换至英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhSelect, LhButton, zhCN, enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhSelect, LhButton },
  data() {
    return {
      locale: 'zh-CN',
      selected: 'beijing',
      cityOptions: [
        { label: '北京', value: 'beijing' },
        { label: '上海', value: 'shanghai' },
        { label: '深圳', value: 'shenzhen' },
      ],
    }
  },
  computed: {
    messages() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
}
</script>

<template>
  <LhConfigProvider :locale="messages">
    <!-- 都市選択 -->
    <LhSelect
      v-model="selected"
      :options="cityOptions"
      :placeholder="locale === 'zh-CN' ? '请选择城市' : 'Please select city'"
    />
    <!-- 言語切り替え -->
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换至英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

サイズ

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhSelect } from '@lh-ui/vue3'

const demoSizeSmall = ref('a')
const demoSizeMedium = ref('a')
const demoSizeLarge = ref('a')
const sizeOptions = [
  { label: '選択肢 1', value: 'a' },
  { label: '選択肢 2', value: 'b' },
  { label: '選択肢 3', value: 'c' },
]
</script>

<template>
  <!-- small -->
  <LhSelect v-model="demoSizeSmall" :options="sizeOptions" size="small" placeholder="small" />
  <!-- medium -->
  <LhSelect v-model="demoSizeMedium" :options="sizeOptions" size="medium" placeholder="medium" />
  <!-- large -->
  <LhSelect v-model="demoSizeLarge" :options="sizeOptions" size="large" placeholder="large" />
</template>

vue

<script>
import { LhSelect } from '@lh-ui/vue3'

export default {
  components: { LhSelect },
  data() {
    return {
      demoSizeSmall: 'a',
      demoSizeMedium: 'a',
      demoSizeLarge: 'a',
      sizeOptions: [
        { label: '選択肢 1', value: 'a' },
        { label: '選択肢 2', value: 'b' },
        { label: '選択肢 3', value: 'c' },
      ],
    }
  },
}
</script>

<template>
  <!-- small -->
  <LhSelect v-model="demoSizeSmall" :options="sizeOptions" size="small" placeholder="small" />
  <!-- medium -->
  <LhSelect v-model="demoSizeMedium" :options="sizeOptions" size="medium" placeholder="medium" />
  <!-- large -->
  <LhSelect v-model="demoSizeLarge" :options="sizeOptions" size="large" placeholder="large" />
</template>

アクセシビリティとマウントコンテナ

aria-label はアクセシビリティの説明に使い、name はネイティブフォーム名、popper-container はドロップダウンパネルのマウントコンテナを指定します。

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhSelect } from '@lh-ui/vue3'

const demoA11y = ref('')
const demoContainer = ref('')
const sizeOptions = [
  { label: '選択肢 1', value: 'a' },
  { label: '選択肢 2', value: 'b' },
  { label: '選択肢 3', value: 'c' },
]
</script>

<template>
  <!-- aria-label と name -->
  <LhSelect v-model="demoA11y" :options="sizeOptions" aria-label="都市を選択してください" name="city" placeholder="aria-label と name" />
  <!-- body にマウント -->
  <LhSelect v-model="demoContainer" :options="sizeOptions" popper-container="body" placeholder="body にマウント" />
</template>

vue

<script>
import { LhSelect } from '@lh-ui/vue3'

export default {
  components: { LhSelect },
  data() {
    return {
      demoA11y: '',
      demoContainer: '',
      sizeOptions: [
        { label: '選択肢 1', value: 'a' },
        { label: '選択肢 2', value: 'b' },
        { label: '選択肢 3', value: 'c' },
      ],
    }
  },
}
</script>

<template>
  <!-- aria-label と name -->
  <LhSelect v-model="demoA11y" :options="sizeOptions" aria-label="都市を選択してください" name="city" placeholder="aria-label と name" />
  <!-- body にマウント -->
  <LhSelect v-model="demoContainer" :options="sizeOptions" popper-container="body" placeholder="body にマウント" />
</template>

Select API

Props

プロパティ	説明	型	デフォルト値
modelValue	現在の値	`unknown`	—
options	選択肢リスト	`[LhSelectOption](#type-LhSelectOption)`[]	`() => []`
placeholder	プレースホルダーテキスト（未指定時は言語パック `select.placeholder`、日本語では「選択してください」）	`string`	`''`
disabled	無効にするか	`boolean`	`false`
clearable	クリアボタンを表示するか	`boolean`	`false`
size	セレクトのサイズ	`"small" \| "medium" \| "large"`	`'medium'`
name	—	`string`	—
ariaLabel	可視ラベルがないときの補助テキスト	`string`	—
popperContainer	—	`string \| HTMLElement`	`'body'`
sx	sx クイックレイアウトプロパティ	`LhSxProps`	—

Events

イベント	説明	パラメータ
update:modelValue	値が変化した	`value: unknown`
change	選択が変化した	`value, option`
clear	クリアをクリック	—

Option

type LhSelectOption = {
  label: string
  value: unknown
  disabled?: boolean
}

ArrowUp、ArrowDown でハイライト項目を移動し、Enter で選択を確定、Escape でドロップダウンメニューを閉じます。

型定義

本コンポーネントが外部にエクスポートする TypeScript 型構造は以下のとおりです（packages/components/select/src/types.ts および @lh-ui/share/core/* ソースから自動抽出。各エントリをクリックすると完全な定義を確認できます。プロパティの説明は上記の Props 表を参照してください）：

LhSelectSize

export type LhSelectSize = 'small' | 'medium' | 'large'

LhSelectProps

export interface LhSelectProps {
  modelValue?: unknown
  options?: LhSelectOption[]
  placeholder?: string
  disabled?: boolean
  clearable?: boolean
  size?: LhSelectSize
  name?: string
  ariaLabel?: string
  popperContainer?: 'body' | HTMLElement | string
  /** sx クイックレイアウトプロパティ */
  sx?: LhSxProps
}

LhSelectOption _{（@lh-ui/share/core/select から）}

export interface LhSelectOption {
  label: string
  value: unknown
  disabled?: boolean
}

Slots

スロット	説明	デフォルト内容
empty	選択肢が空のときにドロップダウンパネルに表示するカスタムの空状態内容	言語パック `select.noData`（日本語では「データがありません」）

Select セレクト ​

基本的な使い方 ​

クリア可能と無効 ​

カスタムテーマ ​

国際化 ​

サイズ ​

アクセシビリティとマウントコンテナ ​

Select API ​

Props ​

Events ​

Option ​

型定義 ​

Slots ​