Select: Is it possible to set the value of a Select to "" by only interacting with the Select?

[aryzing]

It would be great if the value of the Select could be set to value="" solely by interacting with the Select itself. For example,

• Selecting an already selected option would "deselect" it and set the value to "".
• Allowing a select item to have value="".

However, seems the above don't work.

While it is possible to have a separate UI element, like a "Clear" button, to allow users to set the value back to "", having a second UI element to provide a reset-like functionality to Select's state means Select isn't self contained.

Is there a way to reset the value of a Select back to "" solely by interacting with the Select itself?

[joaom00]

You can use a SelectItem with value="empty" to "deselect" and handle that value somewhere in your code

[aryzing]

That could work, is that an approach that works for you? Would that require something like a useEffect to listen for when the value is "empty" and then set it to ""?

[michaelschufi]

This is a solution, but if the data is user-defined, there could potentially be a conflict for a case where the value empty should be a normal value.

I propose to allow setting the value of the select to empty string. Since an empty string is more null than a word empty.

@aryzing You can use the Select.Root's onValueChange prop.