feat(Select): add nullableValue prop (#2641)

yan-ad · web-flow · commit 4549d71aa9b1 · 2026-06-10T21:24:35.000+08:00
diff --git a/docs/content/meta/SelectRoot.md b/docs/content/meta/SelectRoot.md
@@ -44,6 +44,13 @@
     'type': 'AcceptableValue | AcceptableValue[]',
     'required': false
   },
+  {
+    'name': 'nullableValue',
+    'description': '<p>The value of the hidden native select option when the model value is nullish.</p>\n',
+    'type': 'string',
+    'required': false,
+    'default': '\'\''
+  },
   {
     'name': 'multiple',
     'description': '<p>Whether multiple options can be selected or not.</p>\n',
@@ -110,6 +117,7 @@
 | `dir` | The reading direction of the combobox when applicable. <br> If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode. | `"ltr" \| "rtl"` | No | - |
 | `disabled` | When true, prevents the user from interacting with Select | `boolean` | No | - |
 | `modelValue` | The controlled value of the Select. Can be bind as v-model. | `AcceptableValue \| AcceptableValue[]` | No | - |
+| `nullableValue` | The value of the hidden native select option when the model value is nullish. | `string` | No | `""` |
 | `multiple` | Whether multiple options can be selected or not. | `boolean` | No | - |
 | `name` | The name of the field. Submitted with its owning form as part of a name/value pair. | `string` | No | - |
 | `open` | The controlled open state of the Select. Can be bind as v-model:open. | `boolean` | No | - |
diff --git a/packages/core/src/Select/Select.test.ts b/packages/core/src/Select/Select.test.ts
@@ -295,6 +295,18 @@ describe('given Select in a form', async () => {
     expect(wrapper.find('select').exists()).toBe(true)
   })
 
+  it('should use the nullableValue for the hidden select when the value is nullish', async () => {
+    const wrapper = mount({
+      components: { Select },
+      template: '<form><Select name="test" nullable-value="null" /></form>',
+    }, {
+      attachTo: document.body,
+    })
+
+    const options = wrapper.findAll('select option')
+    expect((options[0].element as HTMLOptionElement).value).toBe('null')
+  })
+
   describe('after selecting option and clicking submit button', () => {
     beforeEach(async () => {
       await wrapper.find('button').trigger('pointerdown', {
diff --git a/packages/core/src/Select/SelectRoot.vue b/packages/core/src/Select/SelectRoot.vue
@@ -14,6 +14,8 @@ export interface SelectRootProps<T = AcceptableValue> extends FormFieldProps {
   defaultValue?: T | Array<T>
   /** The controlled value of the Select. Can be bind as `v-model`. */
   modelValue?: T | Array<T>
+  /** The value of the hidden native select option when the model value is nullish. */
+  nullableValue?: string
   /** Use this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared. */
   by?: string | ((a: T, b: T) => boolean)
   /** The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */
@@ -75,6 +77,7 @@ defineOptions({
 const props = withDefaults(defineProps<SelectRootProps<T>>(), {
   modelValue: undefined,
   open: undefined,
+  nullableValue: '',
 })
 const emits = defineEmits<SelectRootEmits<T>>()
 
@@ -214,7 +217,7 @@ provideSelectRootContext({
     >
       <option
         v-if="isNullish(modelValue)"
-        value=""
+        :value="nullableValue"
       />
       <option
         v-for="option in Array.from(optionsSet)"
