Though @ManamiWasThere could obviously share more details, since there seems to be interest, I can quickly explain how I’d expect such a system can be done:
The entire thing is contained in an ImageLabel which is the white, rounded corner box you see as the backdrop with a light shadow. Inside that is another two ImageLabels that are the grey and blue bars at the bottom, with the grey bar always full width and the blue bar being tweened in size and position as necessary for the animations. Also you’ll need an ImageLabel for that darker grey circle that takes over when focusing on the input, and again you’ll need to tween its size and position as necessary when changing states. Then there’s the Placeholder TextLabel, which gets tweened in size, position, textsize, and textcolor3 as necessary to reflect the appropriate state. And finally there’s the actual TextBox which is what you actually end up focusing on when you click the entire box. And there’d have to be some sort of input event listeners set up on the first imagelabel to listen for focusing on the widget itself and a focus lost event listener on the TextBox as well. Then, on each event, just tween the elements as necessary and set the focus to the TextBox when it should be.
