[joy-ui][Select] Floating label Select

[atillaaliyev]

Summary

I want to design floating label select but i dont know what is the right solution (access to button or root slot of Select) .If you check below example , the label floats but animation effect doesn't work. Do you have any example or documentation plan?

Examples

https://codesandbox.io/p/sandbox/select-floating-label-8lqxly

Motivation

https://mui.com/joy-ui/react-input/#floating-label

Search keywords: select input slot

[yamahmed]

I just checked the code provided here https://mui.com/joy-ui/react-input/#floating-label and i suggest modifying 3 things :
1)Add a transition for the opacity of the placeholder text in the StyledInput component.
2) Adjust the label color on focus to match the focused highlight color.
3)Use theme palette for the label color and theme typography for the font weight in the StyledLabel component.

i'll provide a screenshot of where to modify:

[atillaaliyev]

I just checked the code provided here https://mui.com/joy-ui/react-input/#floating-label and i suggest modifying 3 things : 1)Add a transition for the opacity of the placeholder text in the StyledInput component. 2) Adjust the label color on focus to match the focused highlight color. 3)Use theme palette for the label color and theme typography for the font weight in the StyledLabel component.

i'll provide a screenshot of where to modify:

I haven't StyledInput component, because mui joy uses button instead of input or select. But I tried anyway , it didn't work.

[yamahmed]

What if we need to adjust the styling component accordingly to a button instead of a Select or input component?
i think this will work

[atillaaliyev]

Could you send me codesandbox link after do it? Because, it didn't work.