Joomla! Documentation™

Joomla! 

4.x

Tutorial
Custom Fields - Creating a Checkbox Field

Introduction

The Checkboxes Field provides a field to create one or more checkboxes a Content Writer can use to output the values on the Frontend.

It provides you with a way for Writers to enter data that will be output in a consistent way, in whatever way it is used.

Creating the field

We will create some checkboxes for use in our articles.

In this example we will add some checkboxes that specify a flight type.

From the Sidebar Menu in the Backend choose Content then Fields.

Before clicking the New button, check the dropdown list below the New button is set to Article - this is the default setting for use in the Article view.

NOTE: Although this tutorial covers creating some checkboxes for use in the creation of an article, the following steps are the same if you were creating one for use in the Contacts Component (remember to set the view before clicking new) or for use in the Users Component.

Click New.

The Field Editor will open on the General tab.

Enter a Title This should be specific to the purpose of the new field. Avoid generic titles in case you want to use other custom fields in other places.

On the Type field choose Checkboxes.

The Name field will be filled in automatically on saving the field but you can enter a different one. It should be lowercase and separated by hyphens.

The Label field is automatically set to be the same as the Custom Field Title but you can enter whatever you want. The value you enter is output on the Frontend if you choose to show the Label.

Add a Description if it will be useful. It is not required.

Set the Required Field to Yes or No with the toggle button. Setting to Yes will make the field a required one that cannot be skipped or forgotten.

The Only Use In Subform field can be set to Yes if you only want the field available as a Subform child field.

The Default Value allows you to set a default value if you are creating more than one checkbox.

At Checkbox Values click the Plus icon and it will generate two input fields - Text is required. Value is optional but in this example we use the same in the Text and Value fields.

A new set of icons are also generated - one to add another checkbox, one to delete the checkbox and one to reorder the checkbox where there is more than one. In this example we have clicked the plus icon to create a second checkbox.

Restricting availability of the Custom Field

In the example shown we have set a Field Group of Aircraft. This means the Custom Field will be available via a tab named Aircraft in the Article Editor.

The Custom Field has also been set to use the Aircraft category. This means the Custom Field will only be available in articles set to the Aircraft category.

It is also possible to set the Access Level to restrict who can see the output of the the Custom Field.

You can also restrict access to using the Custom Field in the Backend to specific User Groups on the Permissions Tab.

At this point you have entered sufficient information to create the Custom Field and make it available for use.

Calendar Custom Field Options

Form Options

Options for using the Custom Field Form.

Placeholder - You can add a placeholder to guide content authors.

Field Class - You can add a class used in your CSS style sheet to style the field.

Label Class (Form) - You can add a class used in your CSS style sheet to style the label in the form.

Editable In - Set for Frontend Editing, Backend Editing or both.

Display Options

Options for the display of the Custom Field Output on the Frontend.

Display Class - You can add a class that is used in your style sheet to target the container that holds or wraps the field.

Value Class - You can add a class that is used in your style sheet to target the styling of the field.

Label - Show or hide the Custom Field Label.

Label Class (Output) - You can add a class that is used in your style sheet to target the the styling of the Custom Field Label that is output.

Automatic Display - This is closely linked to the Component Output.

• After Title Places the field output after the Component Title (after the article title, contact title or user title)

• Before Display Content Places the field output above the article, contact, or user content

• After Display Content Places the field output below the article, contact, or user contact

Note that these 3 settings assume default Joomla! output and could look different with other templates or if Custom Overrides are in use.

• Do not automatically display Will only display the output where you choose to display it by using Joomla's Insert Field function or your custom overrides if you use them.

Prefix You can add a Prefix to be output before the Custom Field output.

Suffix You can add a Suffix to be output after the Custom Field output.

Layout If they are used, you can select an alternative layout for the Custom Field

Display when Read-Only If you need to hide the field - this relates to user access control levels (ACL)

Save the Custom Field

Click Save & Close and the Custom Field is available to use.

Using the field in the Backend

In the Article Editor select the Custom Fields tab to access the Custom Field. In the this example we have a Field Group named Aircraft that was assigned to the Category Aircraft. As the Article is assigned to the Aircraft category, the Aircraft tab is available that will contain one or more Custom Fields assigned to that Field Group. If you are not using Field Groups look for a tab named Fields.

Once you have selected the tab it will display all the fields you have created. In this example we have only the Date Visited field we created. Note the asterisk symbol - it denotes that it is a required field (this is turned off or on in the field options when you create it). Our new Checkboxes field is now available. You will note that this new field is not required as the asterisk is not present. We can go back to the this custom field in the Articles: Fields Manager to set it to required.

Clicking one ore more of the checkboxes will render the value/s on the Frontend once the Article is saved

Frontend Output of the Checkboxes Custom Field

In the Frontend, you can see the field as you see in the following image. The option in Automatic display is responsible for the position of the field and your template is responsible for the layout of the field.

Fields are only displayed in the Frontend if you have filled them with data in the article.

Note that the output is displayed with a bullet point - this is the default layout and may look different dependent on your template.

It is possible to change the layout or to apply some styling using your CSS style sheet.

When you create a Custom Field a style class is added based upon the field name when the Custom Field was saved. If you are familiar with your browser developer tools you can use the Inspector to see the class and use it in your style sheet.

We can use this class in our CSS style sheet like, for example:

.flight-type {color: red;}