Select

LhSelect is used to select one value from a predefined list. Supports clearable, disabled options, and keyboard navigation.

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/select/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

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?: LhSxProps
}

LhSelectOption _{(from @lh-ui/share/core/select)}

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

Basic Usage

Basic Usage

Please select⌄

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

const selected = ref('beijing')
const options = [
  { label: 'Beijing', value: 'beijing' },
  { label: 'Shanghai', value: 'shanghai' },
  { label: 'Shenzhen', value: 'shenzhen' },
]
</script>

<template>
  <!-- Basic usage -->
  <LhSelect v-model="selected" :options="options" placeholder="Please select" />
</template>

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

export default {
  components: { LhSelect },
  data() {
    return {
      selected: 'beijing',
      options: [
        { label: 'Beijing', value: 'beijing' },
        { label: 'Shanghai', value: 'shanghai' },
        { label: 'Shenzhen', value: 'shenzhen' },
      ],
    }
  },
}
</script>

<template>
  <!-- Basic usage -->
  <LhSelect v-model="selected" :options="options" placeholder="Please select" />
</template>

Clearable & Disabled

Clearable & Disabled

Clearable⌄

North⌄

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

const clearable = ref('')
const disabled = ref('north')
const options2 = [
  { label: 'North', value: 'north' },
  { label: 'East', value: 'east' },
  { label: 'South', value: 'south' },
]
</script>

<template>
  <!-- Clearable -->
  <LhSelect v-model="clearable" :options="options2" clearable placeholder="Clearable" />
  <!-- Disabled -->
  <LhSelect v-model="disabled" :options="options2" disabled placeholder="Disabled" />
</template>

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

export default {
  components: { LhSelect },
  data() {
    return {
      clearable: '',
      disabled: 'north',
      options2: [
        { label: 'North', value: 'north' },
        { label: 'East', value: 'east' },
        { label: 'South', value: 'south' },
      ],
    }
  },
}
</script>

<template>
  <!-- Clearable -->
  <LhSelect v-model="clearable" :options="options2" clearable placeholder="Clearable" />
  <!-- Disabled -->
  <LhSelect v-model="disabled" :options="options2" disabled placeholder="Disabled" />
</template>

Keyboard Support

• ArrowUp / ArrowDown — Move highlight
• Enter — Confirm selection
• Escape — Close dropdown

Sizes

Sizes

Option One⌄

Option One⌄

Option One⌄

<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: 'Option One', value: 'a' },
  { label: 'Option Two', value: 'b' },
  { label: 'Option Three', 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>

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

export default {
  components: { LhSelect },
  data() {
    return {
      demoSizeSmall: 'a',
      demoSizeMedium: 'a',
      demoSizeLarge: 'a',
      sizeOptions: [
        { label: 'Option One', value: 'a' },
        { label: 'Option Two', value: 'b' },
        { label: 'Option Three', 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>

Accessibility & Popper Container

aria-label provides an accessible description, name is the native form name, and popper-container sets the mount container of the dropdown panel.

Accessibility & Popper Container

aria-label & name⌄

Mounted to body⌄

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

const demoA11y = ref('')
const demoContainer = ref('')
const sizeOptions = [
  { label: 'Option One', value: 'a' },
  { label: 'Option Two', value: 'b' },
  { label: 'Option Three', value: 'c' },
]
</script>

<template>
  <!-- aria-label & name -->
  <LhSelect v-model="demoA11y" :options="sizeOptions" aria-label="Please select a city" name="city" placeholder="aria-label & name" />
  <!-- Mounted to body -->
  <LhSelect v-model="demoContainer" :options="sizeOptions" popper-container="body" placeholder="Mounted to body" />
</template>

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

export default {
  components: { LhSelect },
  data() {
    return {
      demoA11y: '',
      demoContainer: '',
      sizeOptions: [
        { label: 'Option One', value: 'a' },
        { label: 'Option Two', value: 'b' },
        { label: 'Option Three', value: 'c' },
      ],
    }
  },
}
</script>

<template>
  <!-- aria-label & name -->
  <LhSelect v-model="demoA11y" :options="sizeOptions" aria-label="Please select a city" name="city" placeholder="aria-label & name" />
  <!-- Mounted to body -->
  <LhSelect v-model="demoContainer" :options="sizeOptions" popper-container="body" placeholder="Mounted to body" />
</template>

Props

Prop	Description	Type	Default
modelValue	Bound value	unknown	—
options	Option list	[LhSelectOption](#type-LhSelectOption)[]	() => []
placeholder	Placeholder text (falls back to the select.placeholder locale message when unset)	string	''
disabled	Disabled state	boolean	false
clearable	Show clear button	boolean	false
size	Size	"small" | "medium" | "large"	'medium'
name	—	string	—
ariaLabel	—	string	—
popperContainer	—	string | HTMLElement	'body'
sx	sx quick-layout props	LhSxProps	—

Events

Event	Description	Callback
update:modelValue	Value change	(value: unknown) => void
change	Selection changed	(value, option) => void
clear	Clear clicked	() => void

Option Type

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

Slots

Slot	Description	Default
empty	Custom empty-state content in the dropdown when no options exist	Locale message select.noData ("No data")