CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →


Progress value is 30%

Floating Label

An input element with a placeholder that morphs into a label.

Copy: View demo


All components are built upon the CodyHouse Framework.

How to

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.


  • ✅ Component created
    🗓 April 30, 2019

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us