Available UI components

Overview of the components that are available for use.

Text components

Component name Available properties Properties editor Default look
Title
  • Title text
  • Title type (H2, H3, H4)
Title component - edit properties Title component - default look
Paragraph
  • Paragraph text
Paragraph component - edit properties Paragraph component - default look

Basic form components

Component name Available properties Properties editor Default look
Input
  • Link to data model
  • Label text
  • Description text
Input component - edit properties Input component - default look
Checkboxes
  • Link to data model
  • Label text
  • Description text
  • Method to add options (codelist/manual)
  • Codelist name
  • Manual option
    • Label
    • Value
  • Pre-selected choice
Manual adding of options
Checkboxes component - edit properties
Adding options via codelist
Checkboxes component - edit properties
Checkboxes component - default look
Radio buttons
  • Link to data model
  • Label text
  • Description text
  • Method to add options (codelist/manual)
  • Codelist name
  • Manual option
    • Label
    • Value
  • Pre-selected choice
Manual adding of options
Radio buttons component - edit properties
Adding options via codelist
Radio buttons component - edit properties
Radio buttons component - default look
File Upload File upload component - edit properties File upload component - default look
Text Area
  • Link to data model
  • Label text
  • Description text
  • Read only
Text area component - edit properties Text area component - default look
Datepicker
  • Link to data model
  • Label text
  • Description text
Text area component - edit properties Text area component - default look

In addition to the above components, the following basic form components are under development. These are not ready to be used, they will be added to the overview when they are ready to use:

  • Dropdown
  • Container

Advanced form components

Advanced form components are components that potentially contain multiple fields that each need to be mapped to a field in the data model. They will typically contain fields that are functionally related, ex. fields related to address, see below.

NOTE: The address component is a proof of concept. The content/design of this component and its configuration is under development. The component is available for use, but might undergo major changes in the future.

Component name Available properties Properties editor Default look
Address component
(simple mode)
  • Link to data model for field:
    • Address
    • Postal code
    • Postal area
  • Label text for Address field
Address (simple mode) - edit properties Address (simple mode) - default look
Address component
(advanced mode)
  • Link to data model for field:
    • Address
    • Postal code
    • Postal area
    • C/O
    • Housing number
  • Label text for Address field
Address (advanced mode) - edit properties Address (advanced mode) - default look

See all Github issues for UI-editor.