Floating Label
An input element with a placeholder that morphs into a label.
Projects /
Projects /
An input element with a placeholder that morphs into a label.
The Floating Label component transforms the input placeholder into a label when the user starts typing into the input element. It's used to display a minimal layout when the form is presented, but it keeps all the essential information (i.e., the labels) visible all the time.
To detect if the input contains text, the component uses the :placeholder-shown CSS selector.
Note
Make sure the value of the label element and the placeholder are identical.
