Floating Label
An input element with a placeholder that morphs into a label.
An input element with a placeholder that morphs into a label.
All components are based on CodyFrame.
The Floating Label component is used to replace the label of a form element with a placeholder, then trigger the label visibility when content is added to the input.
The floating animation is active only if Javascript is enabled (we use JS to check if the .form-control
element has content). If Javascript is disabled, the label remains visible.
To use this component, add the .floating-label
class to a parent containing the .form-label
and .form-control
elements.
⚠️ Make sure the value of the label element and of the placeholder are the same.
Report a bug + changelog on Github ↗ | Suggest new components ↗
📢 We use cookies to give you the best possible website experience. By using CodyHouse, you agree to our Privacy Policy.