Open Source ClientConfig Field Types

You can choose a number of field types for your configurations. The xtype in brackets is for hardcore ExtJS ninjas that want to know what is used behind the scenes to craft the form.

  • Text (xtype: textfield)
  • Textarea (xtype: textarea)
  • Rich Text
  • Image (xtype: modx-panel-tv-image)
  • File (xtype: modx-panel-tv-file)
  • Number (xtype: numberfield)
  • Color picker (xtype: colorpickerfield)
  • Checkbox (xtype: xcheckbox)
  • Password (xtype: textfield with inputType password)
  • Date (xtype: datefield)
  • Time (xtype: timefield)
  • Selectbox (xtype: modx-combo); properties: Text==value||Text2==value
  • Google Font List (xtype: googlefontlist)

You can use the Selectbox field type to mimick the boolean yes||no behaviour of certain System Settings by setting the field options like the screenshot example:


The textfield is a simple single-line textfield.


the textarea is a simple multi-line textfield.

Rich Text

The Rich Text field is a simple multi-line textfield that will get enhanced to a rich text editor based on what is installed in your MODX site. Both Redactor and TinyMCE are supported, others have not been tested.


Provides an input that opens the MODX Browser to select an image. Can be configured to a specific media source.


Provides an input that opens the MODX Browser to select any file. Can be configured to a specific media source.


A simple field that only accepts numbers.


Allows the user to pick a color.


Allows a user to toggle something on or off.


Allows a user to enter a secret value that is masked, for API Keys and the likes. Note that the value should not be considered securely stored, it can still be read in plain text.


Pick a date.


Pick a time.


Combined with the Field Options setting, you can create a dropdown for your users to choose between any of a number of options. Specify the options like you would set input options for template variables:
Display==Value,Other Display==OtherValue

Google Font List

To use the Google Font List input type, you need to set the clientconfig.google_fonts_api_key setting with your API Key from Google.