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: 17-09-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.
Outer Space: Set the margin of the panel based on the different sizes defined in the Theme Builder, or set a custom padding in the settings for each individual side.



Grid

Visibility: A checkbox that determines if the grid is visible.
Type: The type of grid
Direction: The type of alignment (Items next to each other or underneath each other )
Reverse: Reverse the order of grid items
Align items: Vertical alignment of items within a grid.
Align content:
Justify: Horizontal alignment of items within a grid.
Height: The fixed height of the grid.
Background color: The background color of the grid.
Spacing: The spacing around the grid.
Wrap: Specify how and if you want to wrap the components within the grid.
Show responsive options: Responsive options for different desktop or mobile devices
Error message: Choose the built in error message or choose to create a custom error message using an interaction.



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.



Drawer

A drawer is a sidebar containing elements such as menu items.


Drawer width: The width of the drawer.
Drawer type: A buttongroup that determines if the drawer is shown persistent or temporary.
Responsively temporary on: A dropdown that makes the sidebar temporary visible for the selected device.
Alignment: A buttongroup that determines if the drawer is aligned to the left or right.
Visibility: A checkbox that determines if the drawer is visible.



Drawer sidebar

A drawer sidebar is the sidebar part of the drawer component.


Theme background color: The background color of the drawer sidebar.



Drawer container

A drawer container is the container part of the drawer component.


Theme background color: The background color of the drawer container.



Container


Max width: The max width the container can be
Disable gutters: A checkbox that determines if the gutters (left padding) is disabled.
Background color: The background color of the container.
Height: The fixed height of the container.



Box

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

Alignment: The alignment of the items within the box.
Stretch: 
Background color: The background color of the box.
Background color opacity: Opacity of the container.
Transparent: Make the box transparent.
Height: The fixed height of the box.
Width: The fixed width of the box.
Outer space: Set the margin of the box based on the different sizes defined in the Theme Builder, or set a custom padding in the settings for each individual side.
Inner space: Set the padding of the box based on the different sizes defined in the Theme Builder, or set a custom padding in the settings for each individual side.
Show positioning options: 
Show background options:



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.
Styles:  A few extra styling options for the specific text area.



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.
Styles:  A few extra styling options for the specific title.



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.
Horizontal alignment: A buttongroup that determines the horizontal  alignment based on the selected button.
Vertical alignment: A buttongroup that determines the vertical  alignment based on the selected button.
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.
Styles:  A few extra styling options for the specific List item.



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.



Dialog

Visibility: A checkbox that determines if the dialog  is visible.
Fullscreen: A checkbox that determines the dialog will be full screen or not.
Width: The fixed width of the dialog.



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.
Avatar type: The avatar type option.
Starticon: 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.
Styles:  A few extra styling options for the specific Avatar.



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 its records from to display as the dynamic list items.
Filter: A way to filter the data within the Data list provided by the selected model.
Search on property: Adds a search bar that uses the selected property as search term.
Order by: The order the data list will display the list items.
Rows per page: The amount of dynamic list items that are displayed per page.
Type: The type of data list display.
Outer space: The margin of the data list customizable on every side.
Hide pagination: A checkbox that determines if the pagination is hidden.
Hide built-in search field: A checkbox to enable/disable the built-in search field.
Error message:  Choose the built in error message or choose to create a custom error message using an interaction.



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 its records from to display as the dynamic data table columns.
Filter: A way to filter the data within the Data table provided by the selected model.
Default order: Adds an alphabetical order to the data table based on the selected property.
Search on property: Adds a search bar that uses the selected property as search term.
Hide built-in search field: A checkbox to enable/disable the built-in search field.
Title: The title that is displayed at the top of the data table.
Title type: The type of title.
Pagination: A checkbox that determines if the pagination is shown.
Rows per page: The amount of dynamic data table columns that are displayed per page.
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 is sticky.
Size: The size of the header in the data table.
Background: The background color of the data table.
Background header: The background color of the header in the data table.
Square: A checkbox that determines if the data table has squared corners.
Variant: The variant of data table.
Elevation: The level of elevation. 
Row click: The page that will be redirected when clicked on. 
Outer space: The margin of the data table customizable on every side.
Error message: Choose the built in error message or choose to create a custom error message using an interaction.



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.
Width: The fixed width of the data table column.
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 its records from to display as any component you’d like.
Filter: A way to filter the data within the data container provided by the selected model.
Redirect when no result: The page that is redirected when the data container can’t find any records.
Error message: The message that is displayed when the Data container failed.



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.
Separator type: The type of separator.
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.
Variant: The variant of the tabs.
Centered: A checkbox that determines if the tab index is centered.
Bar color: The color of the tab index bar.
Text color: The color of the text in the tab index bar.
Indicator color: The color of the stripe under the currently active tab.
Hide visual tabs:



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 shown step.
Show all steps: A checkbox that determines if all steps are shown.
Type: The type of stepper.
Variant: The variant of stepper.
Alternative label: A checkbox that determines if the step and its label are separated.
Active color: The color of the active steps in the stepper.
Inactive color: The color of the inactive steps in the stepper.



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 to post the values to.
Filter: A way to filter the data within the form provided by the selected model.
Success message: The message that is displayed when the form is successfully submitted.
Success message: Choose the built in success message or choose to create a custom success message using an interaction.
Error message: The message that is displayed when the form failed to submit.
Error message: Choose the built in error message or choose to create a custom error message using an interaction.
Outer space: The margin of the form customizable on every 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.
Button text: The text that is displayed within the button.
Variant: The variant of submit button.
Full width: A checkbox that determines if the button is the full width of its parent component.
Size: The size of the submit button.
Icon: The icon that is displayed within the submit button.
Text color: The color of the text in the submit button.
Color: The color of the submit button.
Outer space: The margin of the submit button customizable on every 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 that will be available within the text options.
Label: The label of the text area.
Value: The current value of the text area.
Validation options: Validation options for text area requirements.
Disabled: A checkbox that determines if the text area is disabled.
Placeholder: The placeholder of the text area.
Helper text: The small text right below the text area.
Variant: The variant of text area.
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 a multiline text area.
Rows: The amount of rows that the multiline text area has.
Size: The size of the text area.
Margin: The margin of the text area.
Adornment: The icon that is displayed within the text area.
Position: The position of the adornment.
Styles:  A few extra styling options for the specific text area.



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 that will be displayed within the datetime input field.
Label: The label of the datetime input field.
Type: The type of datetime picker.
Disable toolbar: A checkbox that determines if the datetime picker toolbar is removed.
Value: The current value of the datetime input field.
Format: The datetime format of the datetime input field.
Required: A checkbox that determines if the datetime input field is required.
Error: A checkbox that determines if the datetime input field is incorrect.
Disabled: A checkbox that determines if the datetime input field is disabled.
Placeholder: The placeholder of the datetime input field.
Helper text: The small text right below the datetime input field.
Variant: The variant of datetime picker.
Input variant: The variant of datetime input field.
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 margin of the datetime input field.
Styles:  A few extra styling options for the specific Datetime picker.



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 that will be available within the text options.
Label: The label of the number input field.
Value: The current value of the number input field.
Validation options: Validation options for text input requirements.
Disabled: A checkbox that determines if the number input field is disabled.
Placeholder: The placeholder of the number input field.
Helper text: The small text right below the number input field.
Variant: The variant of number input field.
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 margin of the number input field.
Adornment: The icon that is displayed within the number input field.
Position: The position of the adornment.
Styles:  A few extra styling options for the specific Number input.



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.
Validation options: Validation options for input requirements.
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.
Styles:  A few extra styling options for the specific Password input.



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.
Validation options: Validation options for input requirements.
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.
Styles:  A few extra styling options for the specific Price input.



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 that will be available within the text options.
Label: The label of the email input field.
Value: The current value of the email input field.
Validation options: Validation options for input requirements.
Disabled: A checkbox that determines if the email input field is disabled.
Placeholder: The placeholder of the email input field.
Helper text: The small text right below the email input field.
Variant: The variant of email input field.
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 margin of the email input field.
Adornment: The icon that is displayed within the email input field.
Position: The position of the adornment.
Styles:  A few extra styling options for the specific Email input.



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 that will be available within the text options.
Label: The label of the text input field.
Value: The current value of the text input field.
Validation options: Validation options for input requirements.
Disabled: A checkbox that determines if the text input field is disabled.
Placeholder: The placeholder of the text input field.
Helper text: The small text right below the text input field.
Variant: The variant of text input field.
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 margin of the text input field.
Adornment: The icon that is displayed within the text input field.
Position: The position of the adornment.
Styles:  A few extra styling options for the specific Text input.



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 that will be available within the text options.
Label: The label of the select input field.
Value: The current value of the select input field.
Option type: The type of option.
Options / Model: Based on the selection of the Option type option, this option lets you enter the select options or select a model to retrieve the records from as options.
Validation options: Validation options for select requirements.
Disabled: A checkbox that determines if the select input field is disabled.
Helper text: The small select right below the select input field.
Variant: The variant of select input field.
Full width: A checkbox that determines if the select input field is the full width of its parent component.
Size: The size of the select input field.
Margin: The margin of the select input field.
Styles:  A few extra styling options for the specific Select.



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 that will be available within the text options.
Label: The label of the radio group.
Value: The current value of the radio group.
Error: A checkbox that determines if the radio group is incorrect.
Validation options: Validation options for Radio group requirements.
Disabled: A checkbox that determines if the radio group is disabled.
Helper text: The small select right below the radio group.
Label position: The position of the radio button label.
Option type: The type of option.
Options / Model: Based on the selection of the Option type option, this option lets you enter the radio options or select a model to retrieve the records from as options.
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 margin of the radio group.
Styles:  A few extra styling options for the specific Select.



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.
Required: A checkbox that determines if the hidden input is required.
Disabled: A checkbox that determines if the hidden input is disabled.



Fileupload

The hidden input component is a hidden input field that can be used to post certain values inside a form.


Property: This option lets you select a property that will be available within the text options.
Label: The label of the Fileupload.
Required: A checkbox that determines if the checkbox is required.
Hide default error:
Disabled: A checkbox that determines if the checkbox is disabled.
Helper text: The small select right below the checkbox.
Full width: A checkbox that determines if the checkbox is the full width of its parent component.
Accept files: The files that will be accepted
Allow multiple: Option to allow multiple files at once.
Button size: The size of the button.
Button variant: The button type.
Button text: The text that’s displayed in the button.
Button icon: The icon that is displayed in the button.
Button icon position: The position of the icon within the button.
Margin: The margin of the fileupload.
Styles: A few extra styling options for the specific fileupload.



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 that will be available within the text options.
Label: The label of the check input field.
Value: The current value of the checkbox.
Validation options: Validation options for checkbox requirements.
Disabled: A checkbox that determines if the checkbox is disabled.
Helper text: The small select right below the checkbox.
Label position: The position of the radio button label.
Option type: The type of option.
Options / Model: Based on the selection of the Option type option, this option lets you enter the radio options or select a model to retrieve the records from as options.
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 margin of the checkbox.
Styles: A few extra styling options for the specific checkbox.



Auto complete

The auto complete component is a dropdown with suggestions based on what you enter in the input field.

Property: This option lets you select a property that will be available within the text options.
Label: The label of the check input field.
Value: The current value of the checkbox.
Model: This option lets you select a model to retrieve the records from as auto complete options.
Filter: A way to filter the data within the autocomplete provided by the selected model.
Label property: This option lets you select a property to display the retrieved records as options with.
Value property: This option lets you select a property to use as the values for your autocomplete options.
Allow multiple values: Enables the option to select multiple autocomplete options.
Add checkboxes: Enables the option to show checkboxes when selecting an autocomplete option.
Close dropdown after select: Prevents or enables the option to close the dropdown after an option is selected.
Free solo: Option to search through all records.
Required: A checkbox that determines if the autocomplete input field is required.
Error: Choose the built in error message or choose to create a custom error message using an interaction.
Disabled: A checkbox that determines if the autocomplete input field is disabled.
Placeholder: The placeholder of the autocomplete input field.
Helper text: The small text right below the autocomplete input field.
Variant: The variant of autocomplete, giving a standard, outlined or filled effect.
Full width: A checkbox that determines if the button is the full width of its parent component.
Size: The size of the autocomplete.
Margin: The margin of the autocomplete.



Conditional

The conditional component is a container sort that shows content if and only if the condition is met.


Left: The first variable.
Compare: The condition that has to be met.
Right: The second variable.



Card


Square: Option to give the card a rounded outline or square outline.
Variant: The variant of the card, giving an elevated or an outlined effect.
Elevation: The level of elevation. Only available when choosing the Elevation variant.



Card header

The card header component is a header component placed within a card component.


Avatar: The avatar of the card header.
Avatar type: Option to show text or an image as avatar
Title: The title that is displayed at the top of the card.
Sub header: A header that will be displayed underneath the title.



Card media

The card media is a media component which is used to display images, videos or i-frames.


Media type: The type of 
Source: The source url
Title: The title of the card media.



Card content

The card content component is the container part of the card component.




Card actions

The card actions component is a container used for buttons within a card component.


Alignment: The alignment of the child components
Disable spacing: Disables the spacing of the card action.


In this article