Show or hide
Useful when the element should remain part of the page flow and simply change visibility.
Show or Hide Elements
Use conditional display in App Connect deliberately so the UI reacts to state without turning visibility logic into a maintenance problem.
Introduction
Section titled “Introduction”Conditional display is where a reactive page starts to feel intentional. In Wappler, the question is not only whether an element should disappear. The real question is whether the element should stay in the DOM and change visibility, or be conditionally rendered only when the state truly needs it. That distinction shapes clarity, performance, and maintainability.
Render conditionally
Useful when the element and its nested work should only exist when the condition is true.
Choose the condition based on clear page state.
Decide whether visibility or conditional rendering is the better fit.
Keep the condition readable so later edits stay safe.
Use conditional UI to clarify the page, not to hide messy architecture.
Choose the right conditional pattern
Section titled “Choose the right conditional pattern”Different conditional tools solve different problems.
Visibility is not the same as rendering
Section titled “Visibility is not the same as rendering”A hidden element may still exist in the page structure, while a conditionally rendered element may not exist at all until needed. Choose deliberately rather than treating them as interchangeable.
Mental model
Ask whether the element should still exist when the condition is false.
Drive it from real state
Section titled “Drive it from real state”Good conditions come from meaningful page state: a toggle, result count, selected tab, user role, or form step. Vague or duplicated conditions make reactive pages harder to reason about.
State first
If the condition is hard to explain, the page state model usually needs improvement.
Keep empty states and alternate states honest
Section titled “Keep empty states and alternate states honest”Conditional display is especially useful for no-results panels, helper hints, success messages, and progressive disclosure. Each state should help the user understand the page, not merely reduce clutter.
Good UI use
Use conditions to explain what the user sees, not just to remove elements.
Next steps
Section titled “Next steps”Conditional display naturally connects to Dynamic Attributes, data-driven forms, and the broader Interaction branch.