5

When developing an extension, what are the form field types I can use in Joomla?

11

Numerous types of form field are built into Joomla, with many usefull fields like calendar, color picker, image picker, file upload, file selection etc.:

Available Fields

+---------------------+-------------------------------------------------------------------------------------------------------+
| TYPE                | DESCRIPTION                                                                                           |
+---------------------+-------------------------------------------------------------------------------------------------------+
| accesslevel         | provides a drop down list of viewing access levels.                                                   |
+---------------------+-------------------------------------------------------------------------------------------------------+
| cachehandler        | provides a list of available cache handling options.                                                  |
+---------------------+-------------------------------------------------------------------------------------------------------+
| calendar            | provides a text box for entry of a date. An icon next to the text box                                 |
|                     | provides a link to a pop-up calendar, which can also be used                                          |
|                     | to enter the date value.                                                                              |
+---------------------+-------------------------------------------------------------------------------------------------------+
| captcha             | provides a drop down list of the captcha plugins.                                                     |
+---------------------+-------------------------------------------------------------------------------------------------------+
| category            | provides a drop down list of categories for an extension.                                             |
+---------------------+-------------------------------------------------------------------------------------------------------+
| checkbox            | provides a single checkbox to be checked or unchecked                                                 |
+---------------------+-------------------------------------------------------------------------------------------------------+
| checkboxes          | provides unlimited checkboxes that can be used for multi-select.                                      |
+---------------------+-------------------------------------------------------------------------------------------------------+
| Chrome Style        | provides a list of template chrome style options grouped by template.                                 |
+---------------------+-------------------------------------------------------------------------------------------------------+
| color               | provides a color picker when clicking the input box.                                                  |
+---------------------+-------------------------------------------------------------------------------------------------------+
| Content Language    | Provides a list of content languages.                                                                 |
+---------------------+-------------------------------------------------------------------------------------------------------+
| Content Type        | Provides a list of content types.                                                                     |
+---------------------+-------------------------------------------------------------------------------------------------------+
| combo               | provides a combo box field.                                                                           |
+---------------------+-------------------------------------------------------------------------------------------------------+
| componentlayout     | provides a grouped list of core and template alternate layouts                                        |
|                     | for a component item.                                                                                 |
+---------------------+-------------------------------------------------------------------------------------------------------+
| contentlanguage     | provides a list of installed content languages for use in                                             |
|                     | conjunction with the language switcher plugin.                                                        |
+---------------------+-------------------------------------------------------------------------------------------------------+
| Database Connection | Provides a list of available database connections,                                                    |
|                     | optionally limiting to a given list.                                                                  |
+---------------------+-------------------------------------------------------------------------------------------------------+
| editor              | provides an editor area field.                                                                        |
+---------------------+-------------------------------------------------------------------------------------------------------+
| editors             | Provides a drop down list of the available WYSIWYG editors.                                           |
|                     | Since Joomla 2.5 use plugins form field instead.                                                      |
+---------------------+-------------------------------------------------------------------------------------------------------+
| email               | provides an email field.                                                                              |
+---------------------+-------------------------------------------------------------------------------------------------------+
| file                |                                                                                                       |
+---------------------+-------------------------------------------------------------------------------------------------------+
| filelist            | provides a drop down list of files from a specified directory.                                        |
+---------------------+-------------------------------------------------------------------------------------------------------+
| folderlist          | provides a drop down list of folders from a specified directory.                                      |
+---------------------+-------------------------------------------------------------------------------------------------------+
| groupedlist         | provides a drop down list of items organized into groups.                                             |
+---------------------+-------------------------------------------------------------------------------------------------------+
| header tag          | provides a drop down list of the header tags (h1-h6).                                                 |
+---------------------+-------------------------------------------------------------------------------------------------------+
| helpsite            | provides a drop down list of the help sites for your Joomla installation.                             |
+---------------------+-------------------------------------------------------------------------------------------------------+
| hidden              | provides a hidden field for saving a form field whose value cannot be altered directly                |
|                     | by a user in the Administrator (it can be altered in code or by editing the params.ini file).         |
+---------------------+-------------------------------------------------------------------------------------------------------+
| imagelist           | provides a drop down list of image files in a specified directory.                                    |
+---------------------+-------------------------------------------------------------------------------------------------------+
| integer             | provides a drop down list of integers between a minimum and maximum.                                  |
+---------------------+-------------------------------------------------------------------------------------------------------+
| language            | provides a drop down list of the installed languages for the Front-end or Back-end.                   |
+---------------------+-------------------------------------------------------------------------------------------------------+
| list                | provides a drop down list of custom-defined entries.                                                  |
+---------------------+-------------------------------------------------------------------------------------------------------+
| media               | provides modal access to the media manager for insertion of images with                               |
|                     | upload for users with appropriate permissions.                                                        |
+---------------------+-------------------------------------------------------------------------------------------------------+
| menu                | provides a drop down list of the available menus from your Joomla site.                               |
+---------------------+-------------------------------------------------------------------------------------------------------+
| Menu Item           | provides a drop down list of the available menu items from your Joomla site.                          |
+---------------------+-------------------------------------------------------------------------------------------------------+
| Module Layout       | provides a list of alternative layout for a module grouped by core and template.                      |
+---------------------+-------------------------------------------------------------------------------------------------------+
| Module Order        | Provides a drop down to set the ordering of module in a given position                                |
+---------------------+-------------------------------------------------------------------------------------------------------+
| Module Position     | provides a text input to set the position of a module.                                                |
+---------------------+-------------------------------------------------------------------------------------------------------+
| Module Tag          | provides a list of html5 elements (used to wrap a module in).                                         |
+---------------------+-------------------------------------------------------------------------------------------------------+
| note                | supports a one line text field.                                                                       |
+---------------------+-------------------------------------------------------------------------------------------------------+
| password            | provides a text box for entry of a password.                                                          |
|                     | The password characters will be obscured as they are entered.                                         |
+---------------------+-------------------------------------------------------------------------------------------------------+
| plugins             | provides a list of plugins from a given folder.                                                       |
+---------------------+-------------------------------------------------------------------------------------------------------+
| radio               | provides radio buttons to select different options.                                                   |
+---------------------+-------------------------------------------------------------------------------------------------------+
| repeatable          | Allows form fields which can have as many options as the user desires.                                |
+---------------------+-------------------------------------------------------------------------------------------------------+
| rules               | provides a matrix of group by action options for managing access control. Display depends on context. |
+---------------------+-------------------------------------------------------------------------------------------------------+
| sessionhandler      | provides a drop down list of session handler options.                                                 |
+---------------------+-------------------------------------------------------------------------------------------------------+
| spacer              | provides a visual separator between form fields. It is purely a visual aid and no value is stored.    |
+---------------------+-------------------------------------------------------------------------------------------------------+
| sql                 | provides a drop down list of entries obtained by running a query on the Joomla Database.              |
|                     | The first results column returned by the query provides the values for the drop down box.             |
+---------------------+-------------------------------------------------------------------------------------------------------+
| tag                 | provides an entry point for tags (either AJAX or Nested).                                             |
+---------------------+-------------------------------------------------------------------------------------------------------+
| tel                 | provides an input field for a telephone number.                                                       |
+---------------------+-------------------------------------------------------------------------------------------------------+
| templatestyle       | provides a drop down list of template styles.                                                         |
+---------------------+-------------------------------------------------------------------------------------------------------+
| text                | provides a text box for data entry.                                                                   |
+---------------------+-------------------------------------------------------------------------------------------------------+
| textarea            | provides a text area for entry of multi-line text.                                                    |
+---------------------+-------------------------------------------------------------------------------------------------------+
| timezone            | provides a drop down list of time zones.                                                              |
+---------------------+-------------------------------------------------------------------------------------------------------+
| URL                 | provides a URL text input field.                                                                      |
+---------------------+-------------------------------------------------------------------------------------------------------+
| user                | provides a modal list of users.                                                                       |
+---------------------+-------------------------------------------------------------------------------------------------------+
| usergroup           | provides a drop down list of user groups.                                                             |
+---------------------+-------------------------------------------------------------------------------------------------------+

The complete list with examples can be found at http://docs.joomla.org/Form_field.

Example usage

This example XML file with (almost) all available fields might be useful in order to see all available fields and how they look:

<?xml version="1.0" encoding="UTF-8"?>
<extension version="2.5" type="module" client="site" method="upgrade">
   <name>All fields Demo</name>
   <description>XML file containing all available form fields in Joomla</description>
   <files>
      <filename module="mod_AllFields">mod_AllFields.php</filename>
   </files>
   <config>
      <fields name="params">
         <fieldset name="basic">
            <field name="access" type="accesslevel" label="JFIELD_ACCESS_LABEL" description="JFIELD_ACCESS_DESC" class="span12 small" />
            <field name="cache_handler" type="cachehandler" default="" label="Cache Handler Field type" description="COM_CONFIG_FIELD_CACHE_HANDLER_DESC" filter="word" />
            <field name="mycalendar" type="calendar" default="5-10-2008" label="Select a date" description="" format="%d-%m-%Y" />
            <field name="captcha" type="plugins" folder="captcha" label="Captcha Selection field" description="COM_CONTACT_FIELD_CAPTCHA_DESC" default="" filter="cmd">
               <option value="">JOPTION_USE_DEFAULT</option>
               <option value="0">JOPTION_DO_NOT_USE</option>
            </field>
            <field name="mycategory" type="category" extension="com_content" label="Select a category" description="" />
            <field name="show_title" type="checkbox" label="Show title" description="Show the title of the item" value="1" />
            <field name="toppings" type="checkboxes">
               <option value="anch">Anchovies</option>
               <option value="chor">Chorizo</option>
               <option value="on">Onions</option>
               <option value="mush">Mushrooms</option>
            </field>
            <field name="style" type="chromestyle" label="COM_MODULES_FIELD_MODULE_STYLE_LABEL" description="COM_MODULES_FIELD_MODULE_STYLE_DESC" />
            <field name="backgroundcolor" type="color" default="#eee" label="Color selector field" description="TPL_BEEZ3_FIELD_HEADER_BACKGROUND_COLOR_DESC" />
            <field name="types" type="contenttype" label="Tags field type" description="COM_TAGS_FIELD_TYPE_DESC" multiple="true" />
            <field name="myeditbox" type="combobox" label="MyEditBox" description="myeditbox_Desc" size="7" />
            <field name="mylayout" type="componentlayout" extension="com_content" view="article" label="Component Layout field" useglobal="true" description="JFIELD_ALT_COMPONENT_LAYOUT" />
            <field name="language" type="contentlanguage" label="JFIELD_LANGUAGE_LABEL" description="COM_CATEGORIES_FIELD_LANGUAGE_DESC" class="span12 small">
               <option value="*">JALL</option>
            </field>
            <field name="dbtype" type="databaseconnection" label="DB type field" description="COM_CONFIG_FIELD_DATABASE_TYPE_DESC" supported="mysql,mysqli,postgresql,sqlsrv,sqlazure" filter="string" />
            <field name="test1" label="Test Field" type="editor" width="300" filter="safehtml" />
            <field name="email" type="email" label="JGLOBAL_EMAIL" description="COM_ADMIN_USER_FIELD_EMAIL_DESC" required="true" size="30" class="inputbox" validate="email" />
            <field name="myfilevalue" type="file" label="Enter some text" description="Choose an image from your computer with maximum 100KB" size="10" accept="image/*" />
            <field name="myfile" type="filelist" default="" label="Select a file" description="" directory="administrator" filter="" exclude="" stripext="" />
            <field name="myfolder" type="folderlist" default="" label="Select a folder" directory="administrator" filter="" exclude="" stripext="" />
            <field name="mylistvalue" type="groupedlist" default="" label="Select an option" description="">
               <group label="Group 1">
                  <option value="0">Option 1</option>
                  <option value="1">Option 2</option>
               </group>
               <group label="Group 2">
                  <option value="3">Option 3</option>
                  <option value="4">Option 4</option>
               </group>
               <option value="5">Option 5</option>
               <option value="6">Option 6</option>
            </field>
            <field name="header_tag" type="headertag" label="COM_MODULES_FIELD_HEADER_TAG_LABEL" description="COM_MODULES_FIELD_HEADER_TAG_DESC" default="h3" />
            <field name="myhelpsite" type="helpsite" default="" label="Select a help site" description="" />
            <field name="mysecretvariable" type="hidden" default="" />
            <field name="myimage" type="imagelist" default="" label="Select an image" description="" directory="" exclude="" stripext="" />
            <field name="myintegervalue" type="integer" default="Some integer" label="Choose an integer" description="" first="1" last="10" step="1" />
            <field name="mylanguage" type="language" client="site" default="en-GB" label="Select a language" description="" />
            <field name="mylistvalue" type="list" default="" label="Select an option" description="">
               <option value="0">Option 1</option>
               <option value="1">Option 2</option>
            </field>
            <field name="myimage" type="media" directory="stories" />
            <field name="mymenu" type="menu" default="mainmenu" label="Select a menu" description="Select a menu" />
            <field name="mymenuitem" type="menuitem" default="45" label="Select a menu item" description="Select a menu item" />
            <field name="mymodulelayout" type="modulelayout" label="JFIELD_ALT_LAYOUT_LABEL" description="JFIELD_ALT_MODULE_LAYOUT_DESC" />
            <field name="ordering" type="moduleorder" label="JFIELD_ORDERING_LABEL" description="JFIELD_ORDERING_DESC" />
            <field name="position" type="moduleposition" description="COM_MODULES_FIELD_POSITION_DESC" label="COM_MODULES_FIELD_POSITION_LABEL" default="" maxlength="50" />
            <field name="module_tag" type="moduletag" label="COM_MODULES_FIELD_MODULE_TAG_LABEL" description="COM_MODULES_FIELD_MODULE_TAG_DESC" default="div" />
            <field name="note31" type="note" class="alert" close="true" label="Note Field" description="Note field description here." />
            <field name="mypassword" type="password" default="secret" label="Enter a password" description="" size="5" />
            <field name="editor" type="plugins" folder="editors" description="COM_USERS_USER_FIELD_EDITOR_DESC" label="User editor field type">
               <option value="">JOPTION_USE_DEFAULT</option>
            </field>
            <field name="myradiovalue" type="radio" default="0" label="Select an option" description="">
               <option value="0">1</option>
               <option value="1">2</option>
            </field>
            <field name="session_handler" type="sessionhandler" default="none" label="Session handler field type" description="COM_CONFIG_FIELD_SESSION_HANDLER_DESC" required="true" filter="word" />
            <field type="spacer" name="myspacer" label="Spacer field type" />
            <field name="title" type="sql" default="10" label="sql Field type" query="SELECT id AS value, title FROM #__content" />
            <field name="tags" type="tag" label="JTAG" description="JTAG_DESC" mode="ajax" class="inputbox span12 small" multiple="true" />
            <field name="admin_style" type="templatestyle" client="administrator" description="Template style field type" label="Template style field type">
               <option value="">JOPTION_USE_DEFAULT</option>
            </field>
            <field name="mytextvalue" type="text" default="Some text" label="Enter some text" description="" size="10" />
            <field name="mytextarea" type="textarea" default="default" label="Enter some text" description="" rows="10" cols="5" />
            <field name="mytimezone" type="timezone" default="-10" label="Select a timezone" description="" />
            <field name="mytextvalue" type="url" default="http://www.example.com" label="Enter a URL" description="" size="10" />
            <field name="modified_user_id" type="user" label="JGLOBAL_FIELD_MODIFIED_BY_LABEL" class="readonly" readonly="true" filter="unset" />
            <field name="guest_usergroup" type="usergroup" label="Guest usergroup field type" description="COM_USERS_CONFIG_FIELD_GUEST_USER_GROUP_DESC" multiple="true" />
         </fieldset>
      </fields>
   </config>
</extension>

Note that some of the fields are only available in Joomla 3.0 (or 3.1, in the case of contentType, note and tag).

Custom form field types

An extension can define its own form field types, which can then be used in its own forms or forms created by another extension. See Creating a custom form field type (Joomla! Documentation) for instructions.

  • good work in listing the available form fields – FFrewin Nov 14 '14 at 0:36
  • 1
    asking question to duplicate docs information that is 1 result in Google and to self rate up is a good job for sure – Alexandr Jul 1 '16 at 3:15
3

There is also one other neat trick - when using Radio buttons, you can add Bootstrap class and they will look nicer. Look for class attribute in this code:

<field name="some-choices" type="radio" class="btn-group btn-group-yesno"

After that you continue with the rest of the code as normal.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.