How do I use conditional visibility in Webflow?

Create a conditional on the element

Conditionals show, hide, or change an element from a rule. They work in components, in Collection lists, on Collection pages, and on static pages when Localization is on. The sources they can read are component props, CMS fields, and the current locale.

Select the element. Open Element settings and click the purple dot, then Create conditional. On a component prop, the same purple dot is in the Properties panel.

A condition has a source, a rule, and sometimes a value. Text can use rules such as Contains, Starts with, and Ends with. A switch can be On or Off. A reference can look through fields on the referenced item. A multi-reference can use Contains any, Does not contain any, Is set, or Is not set. The dropdowns follow the field you picked, so you do not invent a rule the field cannot support.

Then set the output and the fallback. Output is what happens when the rule matches. Fallback is what happens when it does not. For a label, that is usually Visible in one case and Hidden in the other.

You can add another condition, or a group of conditions. Each group can require any condition or all of them. Group order matters: the first group whose conditions pass sets the result. Drag a group by its handle to reorder it. Delete a conditional from the same purple-dot control, then confirm Delete.

Hide an empty field on a Collection page

The useful case is an optional block. A post might have an author bio in a rich text field, and some posts leave it empty. Showing an empty heading looks unfinished.

On the Collection template, select the bio wrapper. Create a conditional, choose that rich text field, and use the rule for a field that is set. Set the output to Visible and the fallback to Hidden. Posts with a bio show the block. Posts without one skip it.

A Featured label works the same way with a switch. Select the label inside the Collection list. Create a conditional on the Featured switch, rule Is On, output Visible, fallback Hidden. The card stays in the list either way. Only the label comes and goes.

Another documented pattern: show a section only when an option field equals a value, such as an Ingredients block when Category is Recipe. Set the option rule to that value, show the section when it matches, and hide it otherwise.

For example: a team Collection uses one card component. When Category is Team, the conditional sets the card variant to Team member. When it is not, the fallback variant stays in place. You design one component, not two pages.

Use a filter when the whole item should disappear

Conditionals and filters look similar and do different jobs. A conditional changes an element on items that are still in the list. A Collection list filter decides which items are in the list at all.

If the homepage should omit posts that are not featured, filter the list on the switch. A visibility rule on the card would hide the card and still leave that item in the list logic. Webflow's guidance is to use the filter for include and exclude.

If every post should remain on the index, and only some should wear a badge, use the conditional. Do not filter those posts out and then wonder where the badge went.

On a site with a secondary locale, a conditional can also read the current locale, for example to show a block only when the language is French.

Set a fallback you have actually checked

The Designer shows one item at a time, so a rule can look correct on the sample you have open and fail on the next item. Use the Collection items dropdown and open a post that should show the block, then one that should not.

Groups fail the same way. If the first group is too broad, later groups never run. Put the specific case first. A 'Category is Recipe' group should sit above a catch-all if both could match.

Component props use the same modal. Show a badge when its text prop is set, and hide it when the prop is empty, instead of adding a separate visibility prop.

Ecommerce checkout still uses the older control: Element settings, Conditional visibility, then the plus icon, and a cart or shipping field. Enter prices with a period as the decimal, such as 100.50. Enter a country as a two-letter code, such as US.

What hidden means on the published page

Webflow does not include an element set to hidden in the published HTML. It does not add page weight, and search engines, answer engines, and assistive technology do not receive that text.

If custom code needs to find the element and reveal it later, turn on Keep in HTML when hidden under Element settings, Advanced. Leave that off for ordinary CMS sections. You want the empty bio to be gone, not waiting in the source.

Publish, then view a filled item and an empty one on the live URL. Canvas previews are not the published HTML. If the bio still shows on a post with an empty field, the rule is matching a different field, or the fallback is still Visible.

If those empty states keep coming back on new posts, write the rule down next to the Collection. For example: 'Hide the author bio when the bio field is empty. Show the Featured label only when the switch is on.' I can apply that kind of list rule from a written request. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Communication is asynchronous and written only. There are no calls or meetings.