Documentation

Page Builder Component Reference

In this article

In this article, you’ll learn which components the default component set has to offer and what each does!

Sam van de Kreeke

Published: 16-06-2020

Last updated: 16-06-2020

When using the default component set you have plenty of components to choose from. Each component has its own options to modify, but some components also share the same options.



General

When you add a component, you’ll see that it contains a couple of actions in the bottom of the window. All components contain these actions:

  • Component interactions
  • Convert to partial
  • Remove from page



Categories

To keep a clear overview of all components, we divided them in a set of categories. Each category contains a set of components which is expanded over time. Every once in a while, we’ll add something new to give builders more options.

These are the (current) categories we offer:

  • Layout components
  • Content components
  • Data components
  • Navigation components
  • Form components
  • Logic components
  • Card components

Each categorie’s name describes what the role and function of it is in a page. For example, Form components contain all components used in a form, while logic components determine how and why other components will be shown or utilized.



Components

Column

Columns are layout type components that are used to create an additional section in the grid of your page. This is based on the MaterialUI framework (12 sections principle).

Show: A checkbox that determines if the column should be shown or not.
Column width: The width of the column when using a default screen resolution.
Column width (tablet landscape): The width of the column when using a tablet landscape screen resolution.
Column width (tablet portrait): The width of the column when using a tablet portrait screen resolution.
Column width (mobile): The width of the column when using a mobile screen resolution.
Height: The height of the column.
Background color: The background color of the column based on the configured colors of each option in the Theme Builder.
Horizontal alignment: Determines the relative position of the components inside of the column in a horizontal scale.
Vertical alignment: Determines the relative position of the components inside of the column in a vertical scale.
Outer space: The margin of the column based on the different sizes defined in the Theme Builder, or set a custom margin in the settings for each individual side.
Inner space: The padding of the column based on the different sizes defined in the Theme Builder, or set a custom padding in the settings for each individual side.



Paper

Papers are slightly altered columns with a border effect to give it a ‘paper’ look, elevating or outlining the component.

Square: A checkbox that determines if the paper has squared corners.
Variant: The styling variant of paper, giving a lifted effect or an outline.
Elevation: The level of elevation. Only available when choosing the Elevation variant.



Panel

Panels are slightly altered columns with a styled border added to it. On panels, however, you’re able to add a title to its header.

Title: The title of the panel which is shown at the top.
Title color: The color of the panel's title, based on the configured colors of each option in the Theme Builder.
Panel color: The color of the panel based on the configured colors of each option in the Theme Builder.



Expansion panel

An expansion panel is a panel that can be expanded to show the contents within, displaying them in a dropdown manner.

Title: The title of the expansion panel which is shown at the top.
Default expanded: A checkbox that determines if the expansion panel is opened by default.
Square: A checkbox that determines if the expansion panel has squared corners.
Variant: The styling variant of the expansion panel, giving a lifted effect or an outline.
Elevation: The level of elevation, only available when choosing elevation as Variant.



Box

Boxes are layout type components that are used to create empty containers for your page.

Alignment: Determines the relative position of the components inside of the box.



Text

Text components are text with predefined options that display them in a body text format.

Content: The text that is being displayed by the text component.
Type: The type of content, giving it a body- or title text look.
Text alignment: Determines the relative position of the text in a horizontal scale.
Outer space: The margin of the text based on the different sizes defined in the Theme Builder, or set a custom margin in the settings for each individual side.



Title

Title components are text with predefined options that display them in a title text format.

Content: The text that is being displayed by the title component.
Type: The type of content, giving it a body or title text look.
Text alignment: Determines the relative position of the text in a horizontal scale.
Outer space: The margin of the text based on the different sizes defined in the Theme Builder, or set a custom margin in the settings for each individual side.



Alert

Alert components are pop up windows with a message inside of them. They can be used to notify/alert users.

Visible: A checkbox that determines if the alert is visible.
Body text: The body text that is displayed inside of the alert component.
Title text: The title text that is displayed inside of the alert component.
Text color: The color of the text within the alert based on the configured colors of each option in the Theme Builder.
Background color: The background color of the alert based on the configured colors of each option in the Theme Builder.
Icon: The icon that is displayed on the left in the alert.
Collapsable: A checkbox that determines if the alert is collapsable.
Outer space: The margin of the alert based on the different sizes defined in the Theme Builder, or set a custom margin in the settings for each individual side.


 

Icon

Icon components are icons that can be placed inside of many different components. All icons are retrieved from the MaterialUI website.

Icon: A dropdown with all the available icons to choose from.
Size: The size of the icon based on the configured sizes of each option in the Theme Builder.
Color: The color of the icon based on the configured colors of each option in the Theme Builder.
Outer space: The margin of the icon based on the different sizes defined in the Theme Builder, or set a custom margin in the settings for each individual side.



Button

Button components are buttons that can be used to redirect to pages and trigger actions.

Variant: The styling variant of the button, giving it a different look.
Button text: The text that’s displayed inside of the button.
Link to: Select the page that is redirected to or the action that is triggered when the button is clicked.
Page / Url / Action: Based on the selection of the Link to option, this option lets you select a page, enter a url, or select an action.
Full width: A checkbox that determines if the button is the full width of its parent component.
Size: The size of the button based on the configured sizes of each option in the Theme Builder.
Icon: The icon that’s displayed within the button.
Icon position: Determines the relative position of the icon within the button in a horizontal scale.
Text color: The color of the text based on the configured colors of each option in the Theme Builder.
Color: The color of the button based on the configured colors of each option in the Theme Builder.
Outer space: The margin of the button based on the different sizes defined in the Theme Builder, or set a custom margin in the settings for each individual side.
Disabled: A checkbox that determines if the button is disabled.
Visible: A checkbox that determines if the button is visible.



List item

List item components are items that can be dragged into list components. They can also be used to redirect to pages.

Primary text: The primary text that is displayed inside of the list item.
Secondary text: The secondary text that is displayed below the primary text in the list item.
Background color: The background color of the list item based on the configured colors of each option in the Theme Builder.
Title color: The color of the title based on the configured colors of each option in the Theme Builder.
Icon color: The color of the icon based on the configured colors of each option in the Theme Builder.
Subtitle color: The color of the subtitle based on the configured colors of each option in the Theme Builder.
Page: Select the page that is redirected to when the button is clicked.
Align items: Determines the relative position of the items within the list item in a vertical scale.
Icon: The icon that is displayed inside of the list item.
Show icon as avatar: A checkbox that determines if the icon is shown as an avatar.
Disabled: A checkbox that determines if the list item is disabled.
Disable gutters: A checkbox that determines if the gutters (left padding) is removed.
Dense: A checkbox that determines if the list item is more dense.
Divider: A checkbox that determines if the list item has a divider below it.
Selected: A checkbox that determines if the list item is selected by default.



Divider

Divider components are components used to separate components from each other and create a layout.

Thickness: The thickness of the divider based on the configured border sizes in the Theme Builder.
Color: The color of the divider based on the configured colors of each option in the Theme Builder.
Outer space: The margin of the divider based on the different sizes defined in the Theme Builder, or set a custom margin in the settings for each individual side.



Image 

Image components are used to display images on your page.

Image url: The link address of the image that you want to display.
Image alternative text: The text that will be displayed if the image can't be found/rendered.
Outer space: The margin of the image based on the different sizes defined in the Theme Builder, or set a custom margin in the settings for each individual side.
Width: The set width of the image, configured in percent, pixels, or rem.
Height: The set height of the image, configured in percent, pixels, or rem.



Progress 

Progress components are progress bars used to display any progress based on the given values.

Type: The type of progress bar, giving it circular or linear look.
Variant: The styling variant of the progress bar, giving it a different look.
Color: The color of the progress bar based on the configured colors of each option in the Theme Builder.
Height: The set height of the progress bar, configured in percent, pixels, or rem.
Min value: The minimum value that the progress bar will show when it's empty, e.g. 0.
Max value: The maximum value that the progress bar will show when it's full, e.g. 100.
Value: The current value that the progress bar is displaying.
Value buffer: The current value of the transparent part of the progress bar when the Variant option is set to buffer.
Outer space: The margin of the progress based on the different sizes defined in the Theme Builder, or set a custom margin in the settings for each individual side.



List sub header 

List sub header components are sticky headers used in list items, e.g. to indicate categories.

Sub header: The text that is displayed inside of the list sub header.
Inset: A checkbox that determines if the sub header has a left padding added to it.
Background color: The background color of the list sub header based on the configured colors of each option in the Theme Builder.
Text color: The color of the text within the list sub header based on the configured colors of each option in the Theme Builder.



List

List components are used as a container for list items and list sub headers.

Model: This options lets you select a model of which the properties will be available in the child components' options.
Background color: The background color of the list based on the configured colors of each option in the Theme Builder.
Disable padding: A checkbox that determines if the padding of the list is removed.
Dense: A checkbox that determines if the list is more dense, saving space. Overrules the dense option for individual list items.



Chip

Chip components are labels that display text. Often used to show multiple values in a single component, e.g. a multi-optional filter.

Label: The text that is displayed inside of the chip.
Disabled: A checkbox that determines if the chip is disabled.
Variant: The styling variant of chip, giving it a default look or outline.
Size: The size of the chip based on the configured sizes of each option in the Theme Builder.
Color: The color of the chip based on the configured colors of each option in the Theme Builder.
Text color: The color of the text within the list sub header based on the configured colors of each option in the Theme Builder.
Icon: The icon that is displayed at the start of the chip.
Outer space: The margin of the chip based on the different sizes defined in the Theme Builder, or set a custom margin in the settings for each individual side.



Avatar

Avatar components are avatars that can contain either an image, a letter, or an icon. Often used as profile pictures or to distinguish categories.

Type: The type of avatar.
Image url / Letter / Icon: Based on the selection of the Type option, this option lets you enter the image link address, enter the letter, or select the icon that you want to display in the avatar.
Variant: The styling variant of avatar, giving it a circle, rounded (corners), or square look.
Width: The set width of the avatar, configured in percent, pixels, or rem.
Height: The set width of the avatar, configured in percent, pixels, or rem.
Outer space: The margin of the avatar based on the different sizes defined in the Theme Builder, or set a custom margin in the settings for each individual side.



Data list

Data list components are lists that execute requests towards the Data API, collecting records from the chosen model, and renders in list items.

Model: The model where the data list retrieves the records from to display as dynamic list items.
Create filter: Apply a filter to the data list component, limiting the data requested.
Search on property: Choose a property of the chosen model to be searched on in the search bar on top. 
Rows per page: The amount of dynamic list items that are displayed per page.
Outer space: The margin of the data list based on the different sizes defined in the Theme Builder, or set a custom margin in the settings for each individual side.
Hide pagination: A checkbox that determines if the pagination is hidden.



Data table

Data table components are tables that execute requests towards the Data API, collecting records from the chosen model, and renders a row for each record.

Model: The model where the data table retrieves the records from to display as dynamic table rows.
Default order: Choose a property of the chosen model which is used for sorting the results.
Sort order: The order in which the sorting (on the chosen property) is done. Can be ascending and descending.
Search on property: Choose a property of the chosen model to be searched on in the search bar on top. 
Title: The title that is displayed in the top of the data table.
Title type: The type of title, giving it a body or title text look.
Pagination: A checkbox that determines if the pagination is shown.
Rows per page: The default amount of data table rows that are displayed per page when a user views the table.
Rows per page text: The text that represents the rows per page.
Sticky header: A checkbox that determines if the header in the data table column is sticky.
Size: The size of the header in the data table.
Background: The background color of the data table based on the configured colors of each option in the Theme Builder.
Background header: The background color of the data table header based on the configured colors of each option in the Theme Builder.
Square: A checkbox that determines if the data table has squared corners.
Variant: The styling variant of the data table, giving a lifted effect or an outline.
Outer space: The margin of the data table based on the different sizes defined in the Theme Builder, or set a custom margin in the settings for each individual side.



Data table column 

Data table column components are columns that come with the data table component but can also be added manually. They are used to display property values inside of the data table

Property: The property that the data table column will display.

Sortable: A checkbox that determines if the property is sortable (alphabetical).
Header text: The text that is displayed in the header above the data table column.
Header type: The type of header text, giving it a body or title text look..
Content: The text that is displayed in the data table column.
Body type: The type of content text, giving it a body or title text look..
Column alignment: Determines the relative position of the text within the data table column in a horizontal scale.
Background: The background color of the data table column based on the configured colors of each option in the Theme Builder.
Border color: The border color of the data table column based on the configured colors of each option in the Theme Builder.



Data container

Data container components are containers that can be associated with a model so that the child components are able to use the properties of the selected model in the options.

Model: The model where the data container retrieves the records from to display in any possible component you’d like.
Redirect when no result: The page that is redirected to when the data container can’t find any records.



Breadcrumb

Breadcrumb components are secondary navigation schemes that use breadcrumb items to reveal your location within the website.

Max items: The maximum number of breadcrumb items.
Items before collapse: The amount of breadcrumb items that will be displayed before breaking off the unshown breadcrumb items.
Items after collapse: The amount of breadcrumb items that will be displayed after breaking off the unshown breadcrumb items.
Separator type: The type of separator between the breadcrumb items.
Separator text / Separator icon: The text or icon that is used as the separator.



Breadcrumb item

Breadcrumb item components are part of the breadcrumb component, each representing a page within the breadcrumb.

Content: The text that is displayed inside of the breadcrumb item.
Page: The page that is associated with the breadcrumb item and redirected to when clicked.
Text color: The color of the text within the breadcrumb item based on the configured colors of each option in the Theme Builder.
Icon: The icon that is displayed inside of the breadcrumb item.
Icon position: The position of the icon.



Tabs

Tabs components are windows with multiple tabs containing different containers which can be switched between.

Selected tab index: The currently selected tab in the tab index.
Orientation: The orientation of the tab index, making it horizontal or vertical.
Variant: The styling variant of tabs, giving it a different look.
Centered: A checkbox that determines if the tab index is centered, only works when Variant is set to standard.
Bar color: The color of the tabs bar based on the configured colors of each option in the Theme Builder.
Text color: The color of the text within the tabs bar based on the configured colors of each option in the Theme Builder.
Indicator color: The color of the stripe below the currently active tab based on the configured colors of each option in the Theme Builder.



Tab

Tab components are part of the tabs component, each representing a tab within the container.

Tab label: The text of the current tab in the tab index.
Icon: The icon of the current tab that is displayed above the text in the tab index.
Disabled: A checkbox that determines if the tab is disabled.
Disable ripple: A checkbox that determines if the ripple effect when clicked is disabled.



Stepper 

Stepper components are components that use steps to show your progress, often used in wizards or multi-page forms.

Show step: The currently active step.
Show all steps: A checkbox that determines if all steps are shown, even when a step is not actively viewed.
Type: The type of stepper, giving it a horizontal- or vertical alignment, or optimizing it for mobile view.
Variant: The styling variant of stepper, making it linear or non-linear. Linear forces the user to follow each step in sequence, Non-linear allows free navigation.
Alternative label: A checkbox that determines if the step and its label are separated. The alternative label maintains a steady line between each step while the standard label fits each step to its content.
Active color: The color of the active steps within the stepper based on the configured colors of each option in the Theme Builder.
Inactive color: The color of the inactive steps within the stepper based on the configured colors of each option in the Theme Builder.
Button next text: The text that is displayed in the button to advance to the next step, only available when Type is set to Mobile.
Button previous text: The text that is displayed in the button to return to the previous step, only available when Type is set to Mobile.



Step

Step components are part of the stepper component, each representing a step.

Label: The text that is displayed next to the step number.
Icon: The icon that is displayed instead of the step number.



App bar 

App bar components are navigation menu's with a logo, title and menu items.

Background color: The background color of the app bar based on the configured colors of each option in the Theme Builder.
Text color: The color of the text within the app bar based on the configured colors of each option in the Theme Builder.
Position: The position of the app bar when interacted with by a user. Either stays at the top of the page or moves when scrolling depending on the chosen option.
If you want to know more about CSS positions, check out the CSS position property article!
Title: The title of the app bar which is displayed on the left by default.
Logo: The logo of the app bar which is displayed on the left by default.
Align items: Determines the relative position of the items within the list item on a horizontal scale.
Page: The page that is redirected to when the logo or title is clicked.
Variant: The styling variant of app bar, giving a lifted effect or an outline.
Elevation: The level of elevation, only available when choosing Elevation as Variant.
Square: A checkbox that determines if the app bar has squared corners.
Size: The size of the app bar.



Form 

Form components are forms with input fields and a submit button to post the values to an action.

Action: This option lets you select an action where the values will be posted to once the form is submitted.
Model: This options lets you select a model of which the properties will be available in the child components' options.
Success message: The message that is displayed when the form is successfully submitted.
Error message: The message that is displayed when the form failed to submit.
Outer space: The margin of the form based on the different sizes defined in the Theme Builder, or set a custom margin in the settings for each individual side.
Redirect after successful submit: This option lets you select a page that will be redirected to when the form is successfully submitted.



Submit button

Submit button components are buttons to finalize the user's input and submit forms.

Type: The type of submit button, making it a submit- or reset button.
Button text: The text that is displayed inside of the button.
Variant: The styling variant of the button, giving it a different look.
Full width: A checkbox that determines if the button is the full width of its parent component.
Size: The size of the submit button based on the configured sizes of each option in the Theme Builder.
Icon: The icon that is displayed within the submit button.
Text color: The color of the text within the submit button based on the configured colors of each option in the Theme Builder.
Color: The color of the submit button based on the configured colors of each option in the Theme Builder.
Outer space: The margin of the form based on the different sizes defined in the Theme Builder, or set a custom margin in the settings for each individual side.
Disabled: A checkbox that determines if the submit button is disabled.
Visible: A checkbox that determines if the submit button is visible.



Text area

Text area components are text fields that are able to contain multiple text lines and can be used inside forms to post text values.

Property: This option lets you select a property based on the chosen model of the form that will be available within the component options. Automatically appends the property's name as label and makes it easier to create input variables.
Label: The label of the text area.
Value: The current value of the text area already filled in when viewing the form.
Input variable name: The name of your input variable.
Input variable type: The type of input variable.
Required: A checkbox that determines if the text area is required.
Error: A checkbox altering the text area's look, indicating that it is incorrect.
Disabled: A checkbox that determines if the text area is disabled.
Placeholder: The placeholder of the text area.
Helper text: An option to add some help text to the text area which is shown underneath.
Variant: The styling variant of text area, giving it a different look.
Full width: A checkbox that determines if the text area is the full width of its parent component.
Multiline: A checkbox that determines if the text area is multilined, allowing newlines/line breaks.
Rows: The amount of rows that the multiline text area has.
Size: The size of the text area.
Margin: The top and bottom margin of the text area.
Adornment: The icon that is displayed within the text area.
Position: The position of the adornment.



Datetime picker

Datetime picker components are datetime pickers that can be used inside forms to post both date and time values.

Property: This option lets you select a property based on the chosen model of the form that will be available within the component options. Automatically appends the property's name as label and makes it easier to create input variables.
Label: The label of the datetime input field.
Type: The type of datetime picker, making it a date- or time picker.
Disable toolbar: A checkbox that determines if the datetime picker toolbar is removed.
Value: The current value of the datetime input field already filled in when viewing the form.
Format: The format of the date and time in the datetime input field, with letters representing a specific weight of the datetime stamp.
Input variable name: The name of your input variable.
Input variable type: The type of input variable.
Required: A checkbox that determines if the datetime input field is required.
Error: A checkbox altering the datetime input's look, indicating that it is incorrect.
Disabled: A checkbox that determines if the datetime input field is disabled.
Placeholder: The placeholder of the datetime input field.
Helper text: An option to add some help text to the datetime input field which is shown underneath.
Variant: The styling variant of datetime picker, giving it a different look.
Input variant: The styling variant of datetime input field, giving it a different look.
Full width: A checkbox that determines if the datetime input field is the full width of its parent component.
Size: The size of the datetime input field.
Margin: The top and bottom margin of the datetime input field.



Number input

Number input components are number input fields that can be used inside forms to post number values.

Property: This option lets you select a property based on the chosen model of the form that will be available within the component options. Automatically appends the property's name as label and makes it easier to create input variables.
Label: The label of the number input field.
Value: The current value of the number input field.
Input variable name: The name of your input variable.
Input variable type: The type of input variable.
Required: A checkbox that determines if the number input field is required.
Error: A checkbox altering the number input's look, indicating that it is incorrect.
Disabled: A checkbox that determines if the number input field is disabled.
Placeholder: The placeholder of the number input field.
Helper text: An option to add some help text to the number input field which is shown underneath.
Variant: The styling variant of number input field, giving it a different look.
Full width: A checkbox that determines if the number input field is the full width of its parent component.
Size: The size of the number input field.
Margin: The top and bottom margin of the number input field.
Adornment: The icon that is displayed within the number input field.
Position: The position of the adornment.



Password input 

Password components are password input fields that can be used inside forms to post password values.

Property: This option lets you select a property based on the chosen model of the form that will be available within the component options. Automatically appends the property's name as label and makes it easier to create input variables.
Label: The label of the password input field.
Value: The current value of the password input field.
Input variable name: The name of your input variable.
Input variable type: The type of input variable.
Required: A checkbox that determines if the password input field is required.
Error: A checkbox altering the password input's look, indicating that it is incorrect.
Disabled: A checkbox that determines if the password input field is disabled.
Placeholder: The placeholder of the password input field.
Helper text: An option to add some help text to the password input field which is shown underneath.
Variant: The styling variant of password input field, giving it a different look.
Full width: A checkbox that determines if the password input field is the full width of its parent component.
Size: The size of the password input field.
Margin: The top and bottom margin of the password input field.
Show password toggle: A checkbox to add an option to the password field, enabling users to show their password.
Position: The position of the show password toggler.



Price input

Price input components are price input fields that can be used inside forms to post price values.

Property: This option lets you select a property based on the chosen model of the form that will be available within the component options. Automatically appends the property's name as label and makes it easier to create input variables.
Label: The label of the price input field.
Value: The current value of the price input field.
Input variable name: The name of your input variable.
Input variable type: The type of input variable.
Required: A checkbox that determines if the price input field is required.
Error: A checkbox altering the price input's look, indicating that it is incorrect.
Disabled: A checkbox that determines if the price input field is disabled.
Placeholder: The placeholder of the price input field.
Helper text: An option to add some help text to the price input field which is shown underneath.
Variant: The styling variant of price input field, giving it a different look.
Full width: A checkbox that determines if the price input field is the full width of its parent component.
Size: The size of the price input field.
Margin: The top and bottom margin of the price input field.
Currency: The currency that is shown within the price input field, also accepts other types of input.
Position: The position of the currency.



Email input

Email input components are email input fields that can be used inside forms to post email values.

Property: This option lets you select a property based on the chosen model of the form that will be available within the component options. Automatically appends the property's name as label and makes it easier to create input variables.
Label: The label of the email input field.
Value: The current value of the email input field.
Input variable name: The name of your input variable.
Input variable type: The type of input variable.
Required: A checkbox that determines if the email input field is required.
Error: A checkbox altering the email input's look, indicating that it is incorrect.
Disabled: A checkbox that determines if the email input field is disabled.
Placeholder: The placeholder of the email input field.
Helper text: An option to add some help text to the email input field which is shown underneath.
Variant: The styling variant of email input field, giving it a different look.
Full width: A checkbox that determines if the email input field is the full width of its parent component.
Size: The size of the email input field.
Margin: The top and bottom margin of the email input field.
Adornment: The icon that is displayed within the email input field.
Position: The position of the adornment.



Text input

Text input components are text input fields that can be used inside a form to post text values.

Property: This option lets you select a property based on the chosen model of the form that will be available within the component options. Automatically appends the property's name as label and makes it easier to create input variables.
Label: The label of the text input field.
Value: The current value of the text input field.
Input variable name: The name of your input variable.
Input variable type: The type of input variable.
Required: A checkbox that determines if the text input field is required.
Error: A checkbox altering the text input's look, indicating that it is incorrect.
Disabled: A checkbox that determines if the text input field is disabled.
Placeholder: The placeholder of the text input field.
Helper text: An option to add some help text to the text input field which is shown underneath.
Variant: The styling variant of text input field, giving it a different look.
Full width: A checkbox that determines if the text input field is the full width of its parent component.
Size: The size of the text input field.
Margin: The top and bottom margin of the text input field.
Adornment: The icon that is displayed within the text input field.
Position: The position of the adornment.



Select 

Select components are dropdown boxes containing options that can be chosen and used inside a form to post certain values.

Property: This option lets you select a property based on the chosen model of the form that will be available within the component options. Automatically appends the property's name as label and makes it easier to create input variables.
Label: The label of the select list.
Value: The current value of the select list.
Input variable name: The name of your input variable.
Input variable type: The type of input variable.
Option type: The type of option, making the select list static or dynamic, either rendering set values or loading records from a model.
Options / Model: Based on the selection of the Option type option, this option lets you enter the select options manually or select a model to retrieve the records from and show them as dynamic options.
(Label) Property: This option lets you select a property that will be used to distinguish each record in the list, e.g. Name.
Value property: This option lets you select a property, which value will be sent to the action, e.g. Id.
Required: A checkbox that determines if the select list is required.
Error: A checkbox altering the select input's look, indicating that it is incorrect.
Disabled: A checkbox that determines if the select list is disabled.
Helper text: An option to add some help text to the select list which is shown underneath.
Variant: The styling variant of select list, giving it a different look.
Full width: A checkbox that determines if the select list is the full width of its parent component.
Size: The size of the select list.
Margin: The top and bottom margin of the select list.
Adornment: The icon that is displayed within the select list.
Position: The position of the adornment.



Radio group

Radio group components are radio button groups containing options that can be chosen and used inside a form to post certain values.

Property: This option lets you select a property based on the chosen model of the form that will be available within the component options. Automatically appends the property's name as label and makes it easier to create input variables.
Label: The label of the radio group.
Value: The current value of the radio group.
Input variable name: The name of your input variable.
Input variable type: The type of input variable.
Option type: The type of option.
Required: A checkbox that determines if the radio group is required.
Error: A checkbox altering the radio group's look, indicating that it is incorrect.
Disabled: A checkbox that determines if the radio group is disabled.
Helper text: An option to add some help text to the text area which is shown underneath.
Label position: The position of the radio button label.
Option type: The type of option, making the radio group static or dynamic.
Options / Model: Based on the selection of the Option type option, this option lets you enter the radio buttons manually or select a model to retrieve the records from and show them as dynamic radio buttons.
Label property: This option lets you select a property that will be used to distinguish each record in the list, e.g. Name.
Value property: This option lets you select a property, which value will be sent to the action, e.g. Id.
Row: A checkbox that determines if the radio group is horizontally aligned.
Full width: A checkbox that determines if the radio group is the full width of its parent component.
Size: The size of the radio group.
Margin: The top and bottom margin of the radio button group.



Hidden input 

Hidden input components are hidden input fields that can be used inside a form to post certain values.

Value: The current value of the input field.
Input variable name: The name of your input variable.
Input variable type: The type of input variable.
Required: A checkbox that determines if the hidden input is required.
Disabled: A checkbox that determines if the hidden input is disabled.



Checkbox

Checkbox components are checkbox groups containing options that can be chosen and used inside a form to post certain values.

Property: This option lets you select a property based on the chosen model of the form that will be available within the component options. Automatically appends the property's name as label and makes it easier to create input variables.
Label: The label of the check input field.
Value: The current value of the checkbox.
Input variable name: The name of your input variable.
Input variable type: The type of input variable.
Required: A checkbox that determines if the checkbox is required.
Error: A checkbox altering the checkbox group's look, indicating that it is incorrect.
Disabled: A checkbox that determines if the checkbox is disabled.
Helper text: An option to add some help text to the text area which is shown underneath.
Label position: The position of the radio button label.
Option type: The type of option, making the checkbox group static or dynamic.
Options / Model: Based on the selection of the Option type option, this option lets you enter the checkboxes manually or select a model to retrieve the records from and show them as dynamic checkboxes.
Label property: This option lets you select a property that will be used to distinguish each record in the list, e.g. Name.
Value property: This option lets you select a property, which value will be sent to the action, e.g. Id.
Row: A checkbox that determines if the radio group is horizontally aligned.
Full width: A checkbox that determines if the checkbox is the full width of its parent component.
Size: The size of the checkbox.
Margin: The top and bottom margin of the checkbox group.

In this article