Learning Webflow

Conditional Visibility within Components

Overview
Getting Started
Getting Started in Webflow
050
The Webflow Designer
Getting Around the Designer
100
The Site Starter Plan
101
Basic Site Building
Classes, Layouts & Styling
201
Learning Forms
202
Hidden v. Visibility
202
Basic Site Building
How Classes Work
202
Using Components ( aka. Symbols )
208
Backup & Restore
209
Conditional Visibility within Components
209
Webflow Subsystems
CMS, Ecommerce, Logic, & Memberships
500
Learning the CMS, Collection Lists & Collection Pages
14:00
501
Learning Webflow Ecommerce
502
Learning Webflow Memberships
503
Learning Webflow Logic
504
More
Online Resources
600
Extending Webflow
Multilingual Support
700
Going Beyond Webflow
Going Beyond Webflow
800
Tips for Advanced Webflow Projects
801
Webflow Naming & Design Frameworks
802
No items found.
Published
May 5, 2024
Updated
May 5, 2024
in lightbox

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.

Videos
No items found.
Table of Contents
Comments
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.