diff --git a/playgrounds/nuxt/app/pages/components/select-menu.vue b/playgrounds/nuxt/app/pages/components/select-menu.vue
index 237daa1d94..334e7c9c18 100644
--- a/playgrounds/nuxt/app/pages/components/select-menu.vue
+++ b/playgrounds/nuxt/app/pages/components/select-menu.vue
@@ -82,6 +82,7 @@ const valueMultiple = ref([fruits[0]!, vegetables[0]!])
/>
+
diff --git a/playgrounds/nuxt/app/pages/components/select.vue b/playgrounds/nuxt/app/pages/components/select.vue
index fd59891f2c..2bbfa03f3a 100644
--- a/playgrounds/nuxt/app/pages/components/select.vue
+++ b/playgrounds/nuxt/app/pages/components/select.vue
@@ -78,6 +78,7 @@ const valueMultiple = ref([fruits[0]!, vegetables[0]!])
+
diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue
index 68a615e5b2..186cd4deb8 100644
--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -171,7 +171,8 @@ const props = withDefaults(defineProps>(), {
labelKey: 'label',
descriptionKey: 'description',
portal: true,
- autofocusDelay: 0
+ autofocusDelay: 0,
+ trailing: undefined
})
const emits = defineEmits>()
const slots = defineSlots>()
@@ -186,7 +187,8 @@ const arrowProps = toRef(() => defu(props.arrow, { rounded: true }) as SelectArr
const { emitFormChange, emitFormInput, emitFormBlur, emitFormFocus, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props)
const { orientation, size: fieldGroupSize } = useFieldGroup(props)
-const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
+const { isLeading, isTrailing: isTrailingFromComponentIcons, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
+const isTrailing = computed(() => props.trailing === false ? false : isTrailingFromComponentIcons.value)
const selectSize = computed(() => fieldGroupSize.value || formGroupSize.value)
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index f1995ae087..d81caef929 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -257,7 +257,8 @@ const props = withDefaults(defineProps>(), {
resetSearchTermOnSelect: true,
resetModelValueOnClear: true,
autofocusDelay: 0,
- virtualize: false
+ virtualize: false,
+ trailing: undefined
})
const emits = defineEmits>()
const slots = defineSlots>()
@@ -285,7 +286,8 @@ const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: t('s
const { emitFormBlur, emitFormFocus, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props)
const { orientation, size: fieldGroupSize } = useFieldGroup(props)
-const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
+const { isLeading, isTrailing: isTrailingFromComponentIcons, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
+const isTrailing = computed(() => props.trailing === false ? false : isTrailingFromComponentIcons.value)
const selectSize = computed(() => fieldGroupSize.value || formGroupSize.value)
diff --git a/test/components/Select.spec.ts b/test/components/Select.spec.ts
index 77b0399ba4..0cfabe0aa7 100644
--- a/test/components/Select.spec.ts
+++ b/test/components/Select.spec.ts
@@ -300,4 +300,33 @@ describe('Select', () => {
})).toEqualTypeOf<[string | number]>()
})
})
+
+ describe('trailing prop', () => {
+ test('hides trailing chevron when trailing is false (e.g. disabled select without arrow)', () => {
+ const wrapper = mount(Select, {
+ props: {
+ ...props,
+ disabled: true,
+ trailing: false
+ }
+ })
+
+ expect(wrapper.find('[data-slot="trailingIcon"]').exists()).toBe(false)
+ })
+
+ test.each([
+ ['trailing prop is omitted', {}],
+ ['trailing is true', { trailing: true }]
+ ])('shows trailing chevron when %s', (_, trailingProps) => {
+ const wrapper = mount(Select, {
+ props: {
+ ...props,
+ disabled: true,
+ ...trailingProps
+ }
+ })
+
+ expect(wrapper.find('[data-slot="trailingIcon"]').exists()).toBe(true)
+ })
+ })
})
diff --git a/test/components/SelectMenu.spec.ts b/test/components/SelectMenu.spec.ts
index f66272b680..921a5ecb1e 100644
--- a/test/components/SelectMenu.spec.ts
+++ b/test/components/SelectMenu.spec.ts
@@ -337,4 +337,33 @@ describe('SelectMenu', () => {
})).toEqualTypeOf<[(string | number)[]]>()
})
})
+
+ describe('trailing prop', () => {
+ test('hides trailing chevron when trailing is false (e.g. disabled select without arrow)', () => {
+ const wrapper = mount(SelectMenu, {
+ props: {
+ ...props,
+ disabled: true,
+ trailing: false
+ }
+ })
+
+ expect(wrapper.find('[data-slot="trailingIcon"]').exists()).toBe(false)
+ })
+
+ test.each([
+ ['trailing prop is omitted', {}],
+ ['trailing is true', { trailing: true }]
+ ])('shows trailing chevron when %s', (_, trailingProps) => {
+ const wrapper = mount(SelectMenu, {
+ props: {
+ ...props,
+ disabled: true,
+ ...trailingProps
+ }
+ })
+
+ expect(wrapper.find('[data-slot="trailingIcon"]').exists()).toBe(true)
+ })
+ })
})