What Is Dynamic Field Visibility?

Dynamic Field Visibility in Joomla Component Builder (JCB) allows you to control when and how specific fields appear on a form based on conditions you define. This can include showing a field only when another field has a specific value, hiding fields for certain user groups, or toggling visibility based on checkbox, dropdown, or radio input.

Using the intuitive GUI in JCB, you can define complex logic rules that drive user experience — helping you simplify forms, reduce clutter, and guide users contextually.

Key Features

• 🎯 Condition-Based Visibility Rules: Display or hide fields when specific values are selected, roles are detected, or logic matches.
• 🧩 Works with All Field Types: Supports checkboxes, dropdowns, radio buttons, text fields, subforms, and more.
• ⚙️ No Coding Required: Set logic directly from the field configuration interface using drop-down selectors and condition rules.
• 🔀 Multi-Condition Rules: Combine multiple criteria using AND/OR logic (e.g. show Field C only if A = "yes" and B > 10).
• 🧠 Dynamic Updates Without Reload: Uses JavaScript binding to apply visibility changes instantly on the form — no page reload needed.
• 👤 User Role & ACL Awareness: Show/hide fields based on Joomla user groups or access levels.
• 🧬 Nesting & Dependencies: Fields can react to each other in chained logic (e.g. select a category → show related sub-options).
• 📦 Used in Admin and Site Views: Visibility rules apply consistently across both backend and frontend views.

Use Cases

• Show additional options only if a checkbox is enabled
• Hide advanced configuration for non-super users
• Display help text or extra fields when a specific type is selected
• Build wizard-style forms that reveal one step at a time
• Show/hide fields based on data from a linked view

How to Configure in JCB

1. Create or edit a field from the Fields Manager.
2. Scroll to the “Display Conditions” section.
3. Add one or more conditions:
   • Select the target field to observe
   • Choose comparison operator (equals, contains, greater than, etc.)
   • Define the value to match
   • Choose the effect: show or hide this field
4. (Optional) Add more conditions using AND/OR chaining
5. Save and assign this field to a view.
6. On compile, the JavaScript logic is automatically injected into your form.

🧠 Pro Tip: Combine visibility with Custom Code snippets or JS callbacks for even more advanced interaction.

Conclusion

Dynamic Field Visibility allows you to create smarter, more responsive user interfaces that adapt in real-time. Whether simplifying data entry or guiding users through complex forms, this powerful visual feature helps you design interfaces that feel polished, efficient, and intelligent — without a single line of code.