[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.

[ZeeshanTamboli]

Why transition in this manner in the first place? The Select doesn't have an input; it uses a button. Plus, there's no placeholder or cursor when focused, so this transition doesn't seem valid to me.

[atillaaliyev]

Why transition in bu şekilde in the first place? The Select doesn't have an input; it uses a button. Plus, there's no placeholder or cursor when focused, so this transition doesn't seem valid to me.

I shared my motivation in first post : https://mui.com/joy-ui/react-input/#floating-label. I know all of your says. But I'm preparing component series with mui joy infrasturcuture for my company and we will use these components with floating label some projects, These components are TextField, DatePicker, DateTimePicker, TimePicker, AutoComplete, Select etc. If you say Joy select does not do it, maybe you can edit your code to enable it, like this : https://codepen.io/arjdev/pen/NWqNoaw?editors=1100

[ZeeshanTamboli]

If you say Joy select does not do it, maybe you can edit your code to enable it, like this : https://codepen.io/arjdev/pen/NWqNoaw?editors=1100

But what we render is a button and not a select with options.