Baim Kamil

Floating Label in Tight Spaces

  • Save
Floating Label in Tight Spaces design typography material ui input field ux  ui ui illustration minimal simple flat

Love the simplicity of floating labels from Google Material, the only problem is that it will make the input field disproportionately tall and awkward. Animating to center everything would feel sluggish.

This is my workaround to that problem, the type cursor actually falls a bit lower when active. Only the label is animated.

keyboard shortcuts: L or F like