Conditional Visibility within Components

Components are great, and as designers use them more often, one common need is the ability to make sub elements of the component conditionally visible, depending on the data the component is bound to.

As of May 2024, Webflow's support for this is limited to boolean "switch" fields, which can be directly bound to the visibility setting of an element within the component.

However there is no native way to do this with other field types, like a phone number, url, or a plain text field, which limits design. For short-text field types like these, we use an attribute+CSS hack to create our own conditional visbility mechanism.

Here's how it works.

‍