Input Field Types

Text Field, Link, Options, Color Picker, Information, Upload Image, Responsive Columns, Itemgroup / Sublist, Database list, Smart content.

There are different input types you can add to the CMS form linked to your code block.

Click the gear icon to open the properties page of the selected input field.

Below are all types with their unique properties. 

1. Text Field

There are 3 types of input for a text field


Input single line: show a default text input field

Textarea: shows a textarea 

Texteditor: shows a text editor with formatting options


The following properties are optional (not applicable to the texteditor)


Excluded Characters: These characters can not be used in the input field. Use a comma to exclude multiple characters. 

Number input: When active will convert the input from text to number

Breakrule: when active will transform the new line /n to <br> htmlcode

HMLT Entities: When active will convert all applicable characters to HTML

CMS examples Text Field

Single input:




Text editor:


2. Link

Let the CMS user set a link


Internal pagelink: allow the CMS user to set a link to an internal web page

External link: allow the CMS user to set a link to an external web page

Link  Target: allow the CMS user to set the target window

File Link: allow linking to a file from the file manager. (note: Filemanager needs to be active on this website)

Database Link: allow the CMS user to link to a database detail page. (note: databases with detailpages need to be active on this website.)

Default Link: what type of link is active when the CMS form is first loaded.

CMS example Link Input

In this example, the CMS user can choose between internal and external pages.


3. Options

Let the CMS user pick a predefined option from a list.

There are 3 types of lists you can use


Dropdown: shows the options in a dropdown list

Radios: shows the options in a radio group

Toggle: shows a switch. (only available with 2 options)


Create Options:


You can see all available options and pick the selected option when the CMS form is first loaded.


To add a new option simple set a new option label and value.

Click save to add the new option to the list.


CMS example options

Dropdown example:


Radios example:


Toggle example:


4. Color Picker

Let the CMS user pick a color value:


Design Color: The color picker will start with the colors defined by the design app.

Color value: You can also choose the option to not use the design colors and set a custom color value.

Overwrite: allow the CMS user to not use the available colors from the design app and pick a custom color.

CMS example

Example of picking a design color with the overwrite switch active.


5. Information

Sometimes you just want to add some additional information to the CMS form.

Information Type: you can choose between no markup or an alert box.


For the alert box, you can choose the color type.


Information Text/ HTML: type in the message you want to show in the CMS


CMS example Information

example of no markup:


example of primary alert box:


6. Upload Image

Allow the CMS user to select an image file from the image library.


Accept extensions: jpg, png, gif or svg files

Max width: what is the maximum width of the image? (pixels)

Max height: what is the maximum height of the image? (pixels)

Crop Image: Activate if width and height is set to crop image to these dimensions exactly.


Additional image sizes

You can add up to two different image dimensions.

Set the max-width and height and crop option.


This is used mostly when you need multiple sizes of the same picture. For example for a picture lightbox.

With the image library, you also have access to the mobile and tablet version of an uploaded image.


CMS example Upload Image

Pick a image from the image library. You can also upload images to the library.




7. Responsive Columns

Let the CMS user set a Bootstrap column, offset and visibility.

This input field can only be used in projects with a Bootstrap library.




Show Advanced Settings: Allow the CMS users to set the properties for all Bootstrap breakpoints.

Show Advanced Columns: Allow the CMS user to set the column width value when advanced settings are active.

Show Advanced Offset: Allow the CMS user to set the offset value when advanced settings are active.

Show Advanced Visibility: Allow the CMS user to set visibility when advanced settings are active.

Large (lg) Visible: Is the large (lg) Bootstrap breakpoint visible?

Standard (md) Visible: Is the standard (md) Bootstrap breakpoint visible?

Small (sm) Visible: Is the small (sm) Bootstrap breakpoint visible?

Extra Small (xs) Visible: Is the extra small (xs) Bootstrap breakpoint visible?


Default values:


Set the standard column width for all 4 (md, lg, sm, xs) bootstrap breakpoints.

CMS example

Example how the CMS user can set the column values in the CMS.


8. Itemgroup / sublist

This is a very special input field. With the itemgroup/sublist input field you can create a new level in the CMS form. In this level you can add new code blocks that will be grouped together.

Itemgroup/sublist is used in components with more complex structures. Example: masonry, form builder, database detail pages, ...


Edit Button Label: The name of the group shown in the CMS.

Type of list: You can either create a New Group or link to an existing group inside the component.

Full-width button: show the Edit button as wide as the column width.

Edit Group Items: Click to create and edit code blocks attached to this group item.

9. Database List

This is a special input field used when databases are active on your project. 

With a database list input field, you pull code from the database entry to show in a list on your page.


10. Smart Content

This is a special input field used to add smart content rules in this code block.

More information can be found here:


You can set which smart rules can be used.