4 minutes reading time (803 words)

Understand and create forms with conditional custom fields


For quite some time now, the utilization of conditional fields in Joomla was primarily a task for developers involved in form creation. However, with the advent of Joomla 4.3, there is now the capability to display custom fields conditionally, enhancing the user experience. We’ll explain how it works first, and after that, we’ll show you how you can use conditional fields in your Joomla content.

But what exactly are these conditional fields?

Within the core framework of Joomla, conditional fields are those that rely on the state or values of other fields.

When a field is “dependent”, it will only be available for editing and displayed if the state of the field it depends from matches the right condition.

A practical example to see how this works would be navigating to the global configuration of a Joomla instance and activating the cache settings.

When cache settings are turned off:

Cache settings are disabled

When cache settings are turned on, additional options are available to the user.

Cache settings are turned on

How does this function technically?

A field attribute called ‘showon’ is used to provide ‘visibility’ information.

In our example, the form is built as follows:

        <option value="0">COM_CONFIG_FIELD_VALUE_CACHE_OFF</option>
        <option value="1">COM_CONFIG_FIELD_VALUE_CACHE_CONSERVATIVE</option>
        <option value="2">COM_CONFIG_FIELD_VALUE_CACHE_PROGRESSIVE</option>


With ‘showon’, we are telling Joomla to show the cache_handler field IF AND ONLY IF the caching field has a value of 1 or 2.

There are quite a few possible configurations:


The field will show if foo has value 1 AND bar has value 3 or 4.


The field will show if foo has value 1 OR bar has value 3 or 4.


The field will show if foo has any value but 1.


The field will show if foo has any value but an empty one.

You can find more information about the syntax of the ‘showon’ attribute at https://docs.joomla.org/Form_field#Showon.

While this functionality works effectively, it’s crucial to understand that this enhancement has been implemented at the user interface level. Despite some fields being hidden, previously set values or default field values are still recorded upon saving the form.

Usually, this is not a big deal. Developers can process the values and properly evaluate them. In our previous example, for instance, when the Joomla cache is set to off, the code won't take into account the hidden values of the cache settings, even though they have been set.

If you are wondering why you should care about this attribute, it's because it gives you more control and flexibility over custom fields. Since Joomla 4.3, you can use this attribute to specify how your custom fields are displayed. This is useful for creating more user-friendly and consistent forms.

When creating a custom field, navigate to the ‘Options’ tab to discover the ‘showon attribute’ parameter.

The showon attribute for a custom field

Let’s see how we can take advantage of this parameter in a practical example.

Create a custom field of type ‘List’ for articles. This field lists different types of vehicle (car, truck or bicycle).

A list custom field with 4 options: none, car, truck and bicycle

Now, create a new field of type ‘Text’, that will record a registration number, only necessary for cars or trucks.

A text custom field

The 'Options' tab:

The text custom field, with showon attribute set to type:car,truck

In the ‘showon attribute’ field, enter the name ‘type’, then enumerate the values car and truck, which are the values ‘Type’ must have to render the field ‘Registration number’ visible.

As a result, during article edition, the fields will follow the conditions that have been set.

An example when the conditional field is hidden

When ‘Car’ is selected, it is possible to enter a registration number.

An example when the conditional field is shown

What about fields of a subform?

While it’s not necessarily more complex, it does require a bit of careful attention. This is because when the sub-fields are recorded, they lose their original names and are instead referenced by their IDs.

Let’s add the previously created fields to a subform called ‘Vehicles’.

A list of fields to create a subform, list, text and subform fields

The field ‘Type’ has ID 5. We need to modify the conditional value’s first part from ‘type’ to ‘field5’ (we use the keyword ‘field’ concatenated with the ID of the field).

The showon attribute for the subform is field5:car,truck

This results in a form where we can add vehicles to the article, with or without registration number, following the rules that have been set.

The resulting form with shown and hidden fields

Remember that the values entered in the fields are still stored, even if they are not visible on the form due to a condition. This can affect how you design the forms and how the data is used later.

To avoid confusion and prevent errors, do not make a field required if it can be hidden by a condition. Otherwise, the user might not be able to save the form because of a missing value in a hidden field.

Keyword or not keyword tag, that is the question
Everything Under One Roof


Already Registered? Login Here
No comments made yet. Be the first to submit a comment

By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/