[select] add "value" and other state to SelectValue.State

[literalpie]

Feature request

Summary

In the Select.Value component, I would like a way to change my className or render values based on the current value of the component. Now, the only way to do that would be to make it a controlled component because SelectValue.State has nothing in it.

Examples in other libraries

The concept of passing state to class/render callbacks is unique to Base UI as far as I know. SliderRoot.State and NumberFieldRoot.State are examples of components that have value in the state that's provided to callbacks.

Motivation

We would like to have the text of our Value component be a "dim" color if it is displaying placeholder text, but a normal color when a value is selected.

I also expect there will be a need for the Value to display more than just the text content of the selected Item (for example, showing an icon)

[atomiks]

We would like to have the text of our Value component be a "dim" color if it is displaying placeholder text, but a normal color when a value is selected.

Callback children should work for this case:

<Select.Value placeholder="Select value">
  {(label, value) => value == null ? <span className="dimmed">{label}</span> : label}
</Select.Value>

[literalpie]

Oh, wow! I've gotten so used to render functions that I didn't think to look closer at children. Yes, that gives me what I need, thanks!

[literalpie]

I'll reopen this because I think it would still be helpful to change the class based on state

[mj12albert]

Another alternative is if you use it with Field, it will apply [data-filled] to the select's subcomponents based on whether there's a value or not