Topics Map > Page Builder

LCS - Form Component Input Types Part 1

Form components are the web application templates used within the development platform to build online forms. These online forms gather data from your users through input fields and a submit button. These input fields are called Form Component Inputs.

Overview

  • Input components are dragged from the left pane onto the web form in the canvas to add them to the web form. 

  • When adding an input component such as a text field to an existing form, you will select which property from your data model the input component is connected to. The selected input and property will determine the action input variable that can be mapped to the assigned rows within the action. 

  • This is Part 1 of the alphabetical list of input components. To see Part 2, go to LCS - Form Component Input Types Part 2

Autocomplete

The autocomplete input provides a dynamic display list of options based on the records in your data model that the autocomplete is connected to, or the values of a list property. When the user begins typing in this field, the autocomplete input fetches records to show matching values for the characters entered in the autocomplete. 

Limits 

  • The autocomplete shows the first 20 records matching the current user input in the list of options when based on a data model. 

Options 

  • Property 
    The Property option specifies the data model property represented by the Autocomplete to connect the Autocomplete component, the action input variable, and that data model property. 

  • Label 
    The Label option is used to display text above or below the Autocomplete field, informing the user about the purpose or usage of the field.  

  • Value 
    The Value option is used to configure the Autocomplete input component to give it a default value or bind it to a dynamic property from a data model. 

  • Close dropdown after select 
    When checked, this option will close the Autocomplete list after the user has chosen the desired value in the list by clicking on it. 

  • Disabled 
    When checked, this option sets the input in its disabled state to prevent the values of the Autocomplete from being submitted and the end-user from choosing any values. 

  • Placeholder 
    Placeholder text is displayed in the Autocomplete until the user begins to type in the field. This helps the user understand what type of information is expected or its formatting. 

  • Helper text 
    Helper text is displayed dynamically below the Autocomplete input in a bubble to give an end user more information about the suggested use of the field, or requirements of the input data. When there are validation messages, this text bubble will display that information. 

  • No options text

This option contains the text you will display to your users when no items from the list match the characters typed in by the end user. 

  • Margin 
    The margin property is used to specify the amount of spacing around the Autocomplete component. 

  • Size 
    The Size property is used to specify the default sizing of the Autocomplete. 

  • Place label above input 

It does what it says 

  • Full width 
    When this option is checked, the width of the Autocomplete will be based on the width of its parent container. 

  • Variant 
    This option allows you to apply a predefined custom style to your Autocomplete. 

  • Validation Options 
    Expand this option to see the contents inside the Validation subpanel. 

    • Required 
      When this is checked, the Autocomplete is required and an error message will inform the user if there is no input. 

    • Required message 

This message will be displayed to your end users when the field isrequired but a valid value has not been supplied. 

  • Styling options 
    Expand this option to see the contents inside the Styling subpanel. 

    • Hide label 

It does what it says. 

    • Use the options in this panel to set the various color attributes used within the Autocomplete component. 

  • Advanced options 
    Expand this option to see the contents inside the Advanced subpanel. 

    • Error message 

Choose between the default error message that displays autogenerated feedback to your user, and an interaction which can be customized to display additional information that you create. 

    • Test attribute 
      This option allows you to set a data attribute on the component. The data attribute can be used to make the selection of these components easier when working with testing tools, gathering metrics or styling based on custom CSS.  

Checkbox 

The checkbox input is used to collect singular values from your users, like I agree or Yes that are either true or false. 

Options 

  • Property 
    The Property option specifies the data model property represented by the Checkbox to connect the Checkbox component, the action input variable, and that data model property. A Checkbox in your web form should use the checkbox property in your data model to contain its value. 

  • Label 
    The Label option is used to display text near the Checkbox field, informing the user about the purpose or usage of the field.  

  • Value 
    The Value option is used to configure the Checkbox input component to give it a default value of true (checked) or false (unchecked), or bind it to a checkbox property from a data model that contains the value true or false. 

  • Disabled 
    When checked, this option sets the input in its disabled state to prevent the values of the Checkbox from being submitted and the end-user from choosing any values. 

  • Helper text 
    Helper text is displayed dynamically below the Checkbox input in a bubble to give an end user more information about the suggested use of the field, or requirements of the input data. When there are validation messages, this text bubble will display that information. 

  • Label Position 

These four options are self-evident: Top, Left, Bottom, Right.

  • Validation Options 
    Expand this option to see the contents inside the Validation subpanel. 

    • Required 
      When this is checked, the Checkbox is required, and an error message will inform the user if there is no input. Enabling this option will compel your user to check the Checkbox in your web form.  

    • Required message 

This message will be displayed to your end users when the field is required but a valid value has not been supplied. 

  • Styling options 
    Expand this option to see the contents inside the Styling subpanel. 

    • Hide label 

It does what it says. 

    • Use the options in this panel to set the various color attributes used within the Checkbox component. 

  • Advanced options 
    Expand this option to see the contents inside the Advanced subpanel. 

    • Test attribute 
      This option allows you to set a data attribute on the component. The data attribute can be used to make the selection of these components easier when working with testing tools, gathering metrics or styling based on custom CSS. 

Checkbox group 

The Checkbox group input is used to collect multiple values that your users have selected from a list of options. 

Options 

  • Property 

The Property option specifies the data model property represented by the Checkbox group to connect the Checkbox group component, the action input variable, and that data model property. A Checkbox group in your web form should use the list property in your data model to contain its values. 

  • Label 
    The Label option is used to display text near the Checkbox group, informing the user about the purpose or usage of the field.  

  • Value 
    The Value option is used to configure the Checkbox group input component to give it a set of default values of type true (checked) or false&rdqu; (unchecked), or bind the group to a list property from a data model that contains the values for the checkboxes in the group. 

  • Disabled 
    When checked, this option sets the input in its disabled state to prevent the values of the Checkbox group from being submitted and the end-user from choosing any values. 

  • Helper text 
    Helper text is displayed dynamically below the Checkbox group input in a bubble to give an end user more information about the suggested use of the field, or requirements of the input data. When there are validation messages, this text bubble will display that information. 

  • Label Position 

These four options are self-evident: Top, Right, Bottom, Left.

  • Row 

When checked, this option makes the checkboxes in the group appear in a row instead of vertically, which is the default. 

  • Full width 

When this option is checked, the Checkbox group's width will be based on its parent container's width. 

  • Margin 

Use this option to increase or decrease the spacing around the Checkbox group. 

  • Size 

Use this option to modify the default size of the Checkbox group. 

  • Validation Options 
    Expand this option to see the contents inside the Validation subpanel. 

    • Required 
      When this is checked, at least one response from the Checkbox group is required, and an error message will inform the user if there is no input. Enabling this option will compel your user to check the Checkbox in your web form.  

    • Error message 

This message will be displayed to your end users when the field is required but a valid value has not been supplied. There are two options Built-in or Interaction.  

      • Built-in 

Use this option to accept the default option for displaying a standard required response message. 

      • Interaction 

Use this option to create a custom error message for your Checkbox group when no box from the group has been checked. 

  • Styling options 
    Expand this option to see the contents inside the Styling subpanel. 

    • Use the options in this panel to set the various color attributes used within the Checkbox component. 

  • Advanced options 
    Expand this option to see the contents inside the Advanced subpanel. 

    • Test attribute 
      This option allows you to set a data attribute on the component. The data attribute can be used to make the selection of these components easier when working with testing tools, gathering metrics or styling based on custom CSS. 

Date picker 

The date picker input is used in your web form to create a visual calendar that allows your end users to select a specific date from that calendar. 

Options 

  •  Property 

The Property option specifies the data model property represented by the Date picker to connect the Date picker component, the action input variable, and that data model property. A Date picker in your web form should use the date property in your data model to contain its value. 

  • Label 
    The Label option is used to display text near the Date picker field, informing the user about the purpose or usage of the field.  

  • Value 
    The Value option is used to configure the Date picker input component to give it a default value of a date, or bind it to a date property from a data model that contains a valid date value. 

  • Autocomplete 

When checked, this option allows the Date picker to function as intended, suggesting a date as the end user is typing in a value. 

  • Disabled 
    When checked, this option sets the input in its disabled state to prevent the values of the Date picker from being submitted and the end-user from choosing any values. 

  • Helper text 
    Helper text is displayed dynamically below the Date picker input in a bubble to give an end user more information about the suggested use of the field, or requirements of the input data. When there are validation messages, this text bubble will display that information. 

  • Format 

This option is used to specify a valid date format of the type dd/MM/yyyy, with a two-digit day, two-digit month and four-digit year. Other date formats can be found here: https://docs.bettyblocks.com/en/articles/5596796-property-format-reference-for-numbers-and-dates#h_61cc5c3c78 

  • Locale 

Choose the English option unless you are actually Dutch. 

  • Use 24 Hour format 

Leave this option checked unless you need to use a different time format for your requirements, in which case you might consider using the Date time picker component instead. 

  • Disable past dates 

Enable this option if you dont want your users to be able to pick a date from the past  

  • Close picker after select 

It does what it says 

  • Margin 

Use this option to increase or decrease the spacing around the Date picker. 

  • Size 

Use this option to modify the default size of the Date picker. 

  • Place label above input 

It does what it says. 

  • Full width 
    When this option is checked, the width of the Date picker will be based on the width of its parent container. 

  • Picker Variant 

Choose which of the available options best matches your system requirements from the dialog, inline or static variant for the picker: 

  • Dialog 

The calendar in a dialog will open on top of your web form when your user clicks into the Date picker field and close when a date has been selected. 

  • Inline 

The calendar will appear on your web form at the position of the Date picker when your user clicks into the Date Picker field and close when the date has been selected. 

  • Static 

The calendar of dates will always show in your web form. 

  • Disable toolbar 

Checking this option reduces the functionality of the calendar by hiding the toolbar that allows your users to navigate forward or backward through the calendar. 

  • Validation Options 
    Expand this option to see the contents inside the Validation subpanel. 

  • Required 
    When this is checked, the Date picker is required, and an error message will inform the user if there is no input.  

  • Required message 

This message will be displayed to your end users when the field is required but a valid value has not been supplied.  

  • Styling options 
    Expand this option to see the contents inside the Styling subpanel. 

    • Hide label 

It does what it says. 

    • Use the options in this panel to set the various color attributes used within the Date picker component. 

  • Advanced options 
    Expand this option to see the contents inside the Advanced subpanel. 

    • Test attribute 
      This option allows you to set a data attribute on the component. The data attribute can be used to make the selection of these components easier when working with testing tools, gathering metrics or styling based on custom CSS. 

Date time picker 

The Date time picker input is used in your web form to create a visual calendar that allows your end users to select a specific date and a time of day from that calendar. 

Options 

  •  Property 
    The Property option specifies the data model property represented by the Date time picker to connect the Date time picker component, the action input variable, and that data model property. A Date time picker n your web form should use the date property in your data model to contain its value. 

  • Label 
    The Label option is used to display text near the Date time picker field, informing the user about the purpose or usage of the field.  

  • Value 
    The Value option is used to configure the Date time picker input component to give it a default value of a date and time, or bind it to a date property from a data model that contains a valid date value. 

  • Autocomplete 

When checked, this option allows the Date time picker to function as intended, suggesting a date as the end user is typing in a value. 

  • Disabled 
    When checked, this option sets the input in its disabled state to prevent the values of the Date time picker from being submitted and the end-user from choosing any values. 

  • Helper text 
    Helper text is displayed dynamically below the Date time picker input in a bubble to give an end user more information about the suggested use of the field, or requirements of the input data. When there are validation messages, this text bubble will display that information. 

  • Format 

This option is used to specify a valid date time format of the type dd/MM/yyyy HH:mm:ss, with a two-digit day, two-digit month,four-digit year and two-digit hour, minute and second separated by colons. Other date time formats can be found here: https://docs.bettyblocks.com/en/articles/5596796-property-format-reference-for-numbers-and-dates#h_61cc5c3c78 

  • Locale 

Choose the English option unless you are actually Dutch. 

  • Use 24 Hour format 

Uncheck this option to use AM/PM times in your date time picker. 

  • Disable past dates 

Enable this option if you dont want your users to be able to pick a date from the past  

  • Close picker after select 

It does what it says 

  • Margin 

Use this option to increase or decrease the spacing around the Date time picker. 

  • Size 

Use this option to modify the default size of the Date time picker. 

  • Place label above input 

It does what it says. 

  • Full width 
    When this option is checked, the width of the Date time picker will be based on the width of its parent container. 

  • Picker Variant 

Choose which of the available options best matches your system requirements from the dialog, inline or static variant for the picker: 

    • Dialog 

The calendar in a dialog will open on top of your web form when your user clicks into the Date time picker field and close when a date has been selected. 

    • Inline 

The calendar will appear on your web form at the position of the Date time picker when your user clicks into the Date time picker field and close when the date has been selected. 

    • Static 

The calendar of dates/times will always show in your web form. 

  • Disable toolbar 

Checking this option reduces the functionality of the calendar by hiding the toolbar that allows your users to navigate forward or backward through the calendar. 

  • Validation Options 
    Expand this option to see the contents inside the Validation subpanel. 

    • Required 
      When this is checked, the Date time picker is required, and an error message will inform the user if there is no input.  

    • Required message 

This message will be displayed to your end users when the field is required but a valid value has not been supplied. 

  • Styling options 
    Expand this option to see the contents inside the Styling subpanel. 

    • Hide label 

It does what it says. 

    • Use the options in this panel to set the various color attributes used within the Date time picker component. 

  • Advanced options 
    Expand this option to see the contents inside the Advanced subpanel. 

    • Test attribute 
      This option allows you to set a data attribute on the component. The data attribute can be used to make the selection of these components easier when working with testing tools, gathering metrics or styling based on custom CSS. 

Decimal 

The decimal input is used to in a web form to allow end users of the form to fill in a number with a decimal in the input. It has browser-specific behavior and a keyboard switch on mobile devices. 

Options 

  • Property 
    The Property option specifies the data model property represented by the Decimal to connect the Decimal component, the action input variable, and that data model property. Note that the Decimal input must connect to a decimal property in your data model. 

  • Label 
    The Label option is used to display text above or below the Decimal, informing the user about the purpose or usage of the Decimal. 

  • Value 
    The Value option is used to configure the Decimal input component to give it a default value or bind it to a dynamic property. 

  • Autocomplete 
    When this option is checked, the Decimal will show autocomplete suggestions from the web users browser history usage of similar fields, such as first or last name. 

  • Disabled 
    When checked, this option sets the Decimal to a disabled state. It prevents the values of this input from being submitted and a web user from filling in any values. 

  • Placeholder 
    Placeholder text is displayed in the Decimal until the user begins to type in the field. This helps the user understand what type of information is expected or its formatting. 

  • Helper text 
    Helper text is displayed dynamically below the Decimal input in a bubble to give an end user more information about the suggested use of the field, or requirements of the input data. When there are validation messages, this text bubble will display that information. 

  • Margin 
    The margin property is used to specify the amount of spacing around the Decimal component. 

  • Size 
    The Size property is used to specify the default sizing of the Decimal input. 

  • Place label above input 

It does what it says 

  • Full width 
    When this option is checked, the width of the Decimal input will be based on the width of its parent container. 

  • Variant 
    This option allows you to apply a predefined custom style to your Decimal input. 

  • Icon 
    If chosen, this option displays an icon inside the Decimal input to give visual context to an end user about the purpose of the input. 

    • Icon position 
      The icon can be displayed at the start or end of the Decimal input. 

  • Validation Options 
    Expand this option to see the contents inside the Validation subpanel. 

    • Required 
      When this is checked, the Decimal input is required and an error message will inform the user if there is no value. 

      • Required message 
        Use this to define what validation message is displayed when the Decimal input does not have a value when the form is submitted. 

    • Validation Pattern 
      Use this field to add a regex pattern that the numeric contents of the Decimal input need to match.  

      • Pattern mismatch message 
        Use this field to create a validation message that is displayed to the user in the case of a regex mismatch. 

    • Min Length 
      Use this field to define the minimum number of digits the user needs to type in to be valid. 

      • Value too short message 
        Use this field to supply the validation message that is displayed when the user doesnt add enough digits to the Decimal. 

    • Max Length 
      Use this field to define the maximum number of digits the user can type in. 

      • Value too long message 
        Use this field to supply the validation message that is displayed when the user types in too long of a number into the Decimal. 

  • Styling options 
    Expand this option to see the contents inside the Styling subpanel. 

    • Hide label 

It does what it says 

    • Use the options in this panel to set the various color attributes used within the Decimal component. 

  • Advanced options 
    Expand this option to see the contents inside the Advanced subpanel. 

    • Interaction (change) delay in milliseconds 

Modify this value to speed up or slow down the speed of any interactions you add to the Decimal input. 

    • Test attribute 
      This option allows you to set a data attribute on the component. The data attribute can be used to make the selection of these components easier when working with testing tools, gathering metrics or styling based on custom CSS. 

Email 

The email input is used in a web form to enable end users of the application to enter a valid email address into the input.  

Options 

  • Property 
    The Property option specifies the data model property represented by the Email input to connect the Email input component, the action input variable, and that data model property. You should use an email property in your data model to store email addresses. 

  • Label 
    The Label option is used to display text above or below the Email input, informing the user about the purpose or usage of the Email input. 

  • Value 
    The Value option is used to configure the Email input component to give it a default value or bind it to a dynamic property. 

  • Autocomplete 
    When this option is checked, the Email input will show autocomplete suggestions from the web users browser history usage of similar fields, such as a previously used email address. 

  • Disabled 
    When checked, this option sets the Email input to a disabled stte. It prevents the values of this input from being submitted and a web user from filling in any values. 

  • Placeholder 
    Placeholder text is displayed in the Email input until the user begins to type in the field. This helps the user understand what type of information is expected or its formatting. 

  • Helper text 
    Helper text is displayed dynamically below the Email input in a bubble to give an end user more information about the suggested use of the field, or requirements of the input data. When there are validation messages, this text bubble will display that information. 

  • Margin 
    The margin property is used to specify the amount of spacing around the Email input component. 

  • Size 
    The Size property is used to specify the default sizing of the Email input. 

  • Place label above input 

It does what it says 

  • Full width 
    When this option is checked, the width of the Email input will be based on the width of its parent container. 

  • Variant 
    This option allows you to apply a predefined custom style to your Email input. 

  • Icon 
    If chosen, this option displays an icon inside the Email input to give visual context to an end user about the purpose of the input. 

  • Icon position 
    The icon can be displayed at the start or end of the Email input. 

  • Validation Options 
    Expand this option to see the contents inside the Validation subpanel. 

    • Required 
      When this is checked, the Email input is required and an error message will inform the user if there is no input. 

      • Required message 
        Use this to define what validation message is displayed when the Email input does not have a value when the form is submitted. 

    • Validation Pattern 
      Use this field to add a regex pattern that the contents of the Email input need to match.  

      • Pattern mismatch message 
        Use this field to create a validation message that is displayed to the user in the case of a regex mismatch. 

    • Min Length 
      Use this field to define the minimum number of characters the user needs to type in to be valid. 

      • Value too short message 
        Use this field to supply the validation message that is displayed when the user doesnt add enough characters to the Email input. 

    • Max Length 
      Use this field to define the maximum number of characters the user can type in. 

      • Value too long message 
        Use this field to supply the validation message that is displayed when the user types in too many characters into the Email input. 

  • Styling options 
    Expand this option to see the contents inside the Styling subpanel. 

    • Hide label 

It does what it says. 

    • Use the options in this panel to set the various color attributes used within the Email input component. 

  • Advanced options 
    Expand this option to see the contents inside the Advanced subpanel. 

    • Interaction (change) delay in milliseconds 

Modify this value to speed up or slow down any interactions used with this input. 

    • Test attribute 
      This option allows you to set a data attribute on the component. The data attribute can be used to make the selection of these components easier when working with testing tools, gathering metrics or styling based on custom CSS. 

File upload 

The file upload component allows the end users of the application to upload files in the web form.  

Options 

  • Property 
    The Property option specifies the data model property represented by the File upload input to create a connection between the File upload input component, the action input variable, and that data model property. You should use a File property in your data model to store files. 

  • Label 
    The Label option is used to display text above or below the File upload input, informing the user about the purpose or usage of the File upload input. 

  • Value 
    The Value option is used to configure the File upload input component to give it a default value or bind it to a dynamic property. 

  • Disabled 
    When checked, this option sets the File upload input to a disabled state. It prevents the values of this input from being submitted and a web user from filling in any values. 

  • Helper text 
    Helper text is displayed dynamically below the File upload input in a bubble to give an end user more information about the suggested use of the field, or requirements of the input data. When there are validation messages, this text bubble will display that information. 

  • Margin 
    The margin property is used to specify the amount of spacing around the File upload input component. 

  • Full width 
    When this option is checked, the File upload input's width will be based on its parent container's. 

  • Validation Options 
    Expand this option to see the contents inside the Validation subpanel. 

    • Required 
      When this is checked, the File upload input is required and an error message will inform the user if there is no input. 

      • Required message 
        Use this to define what validation message is displayed when the File upload input does not have a value when the form is submitted. 

    • Hide default error 

If this option is checked, the error normally generated when a file upload fails is not shown. You should create an interaction to show a custom error instead if you check this. 

    • Accept Files 

Specify the file extensions you want to allow your users to upload, such as .pdf, .xls, or .txt. Only files of this type will be displayed in the file picker displayed in the browser. 

    • Max File Size 

Enter a value to specify the maximum file size you will allow to be uploaded to prevent overly large files. A typical range for a max file size is 1-25MB. 

    • Invalid Max File Size Message 

Enter the error text you want to display to your users if they attempt to exceed your specified max file size. 

  • Styling options 
    Expand this option to see the contents inside the Styling subpanel. 

    • Hide label 

It does what it says. 

    • Use the options in this panel to set the various color attributes used within the File upload input component. 

  • Advanced options 
    Expand this option to see the contents inside the Advanced subpanel. 

    • Name Attribute 

This option allows you to set the name attribute for the file uploaded by the user. 

    • Test attribute 
      This option allows you to set a data attribute on the component. The data attribute can be used to make the selection of these components easier when working with testing tools, gathering metrics or styling based oncustom CSS. 

Hidden input 

The hidden input can be used to store a static or dynamic value in a web form and pass that value to the action without showing the value to the end user. Note that this value is stored in plain text and is visible to anyone who views the source of the web application. Also note that this value can be modified by most browsers, so it should not be used for any security purposes. 

Options 

  • Action Variable  
    This field contains the name of the action input variable that will contain the value in the hidden input. 

  • Value 

The Value option is used to configure the Hidden input component to give it a default value or bind it to a dynamic property. 

IBAN 

The IBAN input enables end users of the application to fill in an 18-digit IBAN number (with letters) in the input. It has browser-specific behavior and a mobile keyboard switch on mobile devices. 

Options 

  • Property 
    The Property option specifies the data model property represented by the IBAN input to create a connection between the IBAN input component, the action input variable, and that data model property. You should use an IBAN property in your data model to store IBAN addresses. 

  • Label 
    The Label option is used to display text above or below the IBAN input, informing the user about the purpose or usage of the IBAN input. 

  • Value 
    The Value option is used to configure the IBAN input component to give it a default value or bind it to a dynamic property. 

  • Autocomplete 
    When this option is checked, the IBAN input will show autocomplete suggestions from the web users browser history usage of similar fields. 

  • Disabled 
    When checked, this option sets the IBAN input to a disabled state. It prevents the values of this input from being submitted and a web user from filling in any values. 

  • Placeholder 
    Placeholder text is displayed in the IBAN input until the user begins to type in the field. This helps the user understand what type of information is expected or its formatting. 

  • Helper text 
    Helper text is displayed dynamically below the IBAN input in a bubble to give an end user more information about the suggested use of the field, or requirements of the input data. When there are validation messages, this text bubble will display that information. 

  • Margin 
    The margin property is used to specify the amount of spacing around the IBAN input component. 

  • Size 
    The Size property is used to specify the default sizing of the IBAN input. 

  • Place label above input 

It does what it says 

  • Full width 
    When this option is checked, the width of the IBAN input will be based on the width of its parent container. 

  • Variant 
    This option allows you to apply a predefined custom style to your IBAN input. 

  • Icon 
    If chosen, this option displays an icon inside the IBAN input to give visual context to an end user about the purpose of the input. 

    • Icon position 
      The icon can be displayed at the start or end of the IBAN input. 

  • Validation Options 
    Expand this option to see the contents inside the Validation subpanel. 

    • Required 
      When this is checked, the IBAN input is required and an error message will inform the user if there is no input. 

      • Required message 
        Use this to define what validation message is displayed when the IBAN input does not have a value when the form is submitted. 

    • Validation Pattern 
      Use this field to add a regex pattern that the contents of the IBAN input need to match.  

      • Pattern mismatch message 
        Use this field to create a validation message that is displayed to the user in the case of a regex mismatch. 

    • Min Length 
      Use this field to define the minimum number of characters the user needs to type in to be valid. 

      • Value too short message 
        Use this field to supply the validation message that is displayed when the user doesnt add enough characters to the IBAN input. 

    • Max Length 
      Use this field to define the maximum number of characters the user can type in. 

      • Value too long message 
        Use this field to supply the validation message that is displayed when the user types in too many characters into the IBAN input. 

  • Styling options 
    Expand this option to see the contents inside the Styling subpanel. 

    • Hide label 

It does what it says. 

    • Use the options in this panel to set the various color attributes used within the IBAN input component. 

  • Advanced options 
    Expand this option to see the contents inside the Advanced subpanel. 

    • Interaction (change) delay in milliseconds 

Modify this value to speed up or slow down any interactions used with this input. 

    • Test attribute 
      This option allows you to set a data attribute on the component. The data attribute can be used to make the selection of these components easier when working with testing tools, gathering metrics or styling based on custom CSS. 

Image upload 

The image upload component enables the end users of the application to upload image files in the input. In the context of the form, this input can be submitted to the action where it allows the user to populate image file properties. 

Options 

  • Property 
    The Property option specifies the data model property represented by the Image upload input to create a connection between the Image upload component, the action input variable, and that data model property. You should use an image property in your data model to store images. 

  • Label 
    The Label option is used to display text above or below the Image upload input, informing the user about the purpose or usage of the Image upload input. 

  • Value 
    The Value option is used to configure the Image upload input component to give it a default value or bind it to a dynamic property. 

  • Disabled 
    When checked, this option sets the Image upload input to a disabled state. It prevents the values of this input from being submitted and a web user from filling in any values. 

  • Helper text 
    Helper text is displayed dynamically below the Image upload input in a bubble to give an end user more information about the suggested use of the field, or requirements of the input data. When there are validation messages, this text bubble will display that information. 

  • Margin 
    The margin property is used to specify the amount of spacing around the Image upload input component. 

  • Full width 
    When this option is checked, the width of the Image upload input will be based on the width of its parent container. 

  • Validation Options 
    Expand this option to see the contents inside the Validation subpanel. 

  • Required 
    When this is checked, the Image upload input is required and an error message will inform the user if there is no input. 

  • Required message 
    Use this to define what validation message is displayed when the Image upload input does not have a value when the form is submitted. 

  • Hide default error 

If this option is checked, the error normally generated when a image upload fails is not shown. You should create an interaction to show a custom error instead if you check this. 

  • Accept Files 

Specify the image file extensions you want to allow your users to upload, such as .png, .jpeg, or .gif. Only files of this type will be displayed in the file picker displayed in the browser. 

  • Max File Size 

Enter a value to specify the maximum file size you will allow to be uploaded to prevent overly large files. A typical range for a max file size is 1-25MB. 

    • Invalid Max File Size Message 

Enter the error text you want to display to your users if they attempt to exceed your specified max file size. 

  • Styling options 
    Expand this option to see the contents inside the Styling subpanel. 

    • Hide label 

It does what it says. 

    • Show Image Preview 
      When enabled, the Image input will display a preview of the current or recently uploaded file. 

    • Image Preview Width 
      Defines the width of the preview in pixels.  

    • Image Preview Height 
      Defines the height of the preview in pixels. 

  • Advanced options 
    Expand this option to see the contents inside the Advanced subpanel. 

    • Test attribute 
      This option allows you to set a data attribute on the component. The data attribute can be used to make the selection of these components easier when working with testing tools, gathering metrics or styling based on custom CSS. 

Number 

The Number input is used to in a web form to allow end users of the form to fill in a number in the input. It has browser-specific behavior and a mobile keyboard switch on mobile devices. 

Options 

  • Property 

The Property option specifies the data model property represented by the Number to connect the Number component, the action input variable, and that data model property. Note that the Number input must connect to a number property in your data model. 

  • Label 
    The Label option is used to display text above or below the Number, informing the user about the purpose or usage of the Number. 

  • Value 
    The Value option is used to configure the Number input component to give it a default value or bind it to a dynamic property. 

  • Autocomplete 
    When this option is checked, the Number will show autocomplete suggestions from the web users browser history usage of similar fields. 

  • Disabled 
    When checked, this option sets the Number to a disabled state. It prevents the values of this input from being submitted and a web user from filling in any values. 

  • Placeholder 
    Placeholder text is displayed in the Number until the user begins to type in the field. This helps the user understand what type of information is expected or its formatting. 

  • Helper text 
    Helper text is displayed dynamically below the Number input in a bubble to give an end user more information about the suggested use of the field, or requirements of the input data. When there are validation messages, this text bubble will display that information. 

  • Margin 
    The margin property is used to specify the amount of spacing around the Number component. 

  • Size 
    The Size property is used to specify the default sizing of the Number input. 

  • Place label above input 

It does what it says 

  • Full width 
    When this option is checked, the width of the Number input will be based on the width of its parent container. 

  • Variant 
    This option allows you to apply a predefined custom style to your Number input. 

  • Icon 
    If chosen, this option displays an icon inside the Number input to give visual context to an end user about the purpose of the input. 

  • Icon position 
    The icon can be displayed at the start or end of the Number input. 

  • Validation Options 
    Expand this option to see the contents inside the Validation subpanel. 

    • Required 
      When this is checked, the Number input is required and an error message will inform the user if there is no value. 

      • Required message 
        Use this to define what validation message is displayed when the Number input does not have a value when the form is submitted. 

    • Validation Pattern 
      Use this field to add a regex pattern that the numeric contents of the Number input need to match.  

      • Pattern mismatch message 
        Use this field to create a validation message that is displayed to the user in the case of a regex mismatch. 

    • Min Length 
      Use this field to define the minimum number of digits the user needs to type in to be valid. 

      • Value too short message 
        Use this field to supply the validation message that is displayed when the user doesnt add enough digits to the Number. 

    • Max Length 
      Use this field to define the maximum number of digits the user can type in. 

      • Value too long message 
        Use this field to supply the validation message that is displayed when the user types in too long of a number into the Number. 

  • Styling options 
    Expand this option to see the contents inside the Styling subpnel. 

    • Hide label 

It does what it says 

    • Use the options in this panel to set the various color attributes used within the Number component 

  • Advanced options 
    Expand this option to see the contents inside the Advanced subpanel. 

    • Interaction (change) delay in milliseconds 

Modify this value to speed up or slow down the incrementing of the value in the box as users increment the value in the Number input. 

    • Test attribute 
      This option allows you to set a data attribute on the component. The data attribute can be used to make the selection of these components easier when working with testing tools, gathering metrics or styling based on custom CSS. 

Password 

The password input is used in a login or other web form for end users of the application to enter a password. The default behavior of the password input is to hide the characters that an end user types in. The password input has browser-specific behavior and a mobile keyboard switch on mobile devices. 

Options 

  • Property 
    The Property option specifies the data model property represented by the Password to create a connection between the Password component, the action input variable, and that data model property. To use the Password input, you must have a password property in your data model. 

  • Label 
    The Label option is used to display text above or below the Password, informing the user about the purpose or usage of the Password. 

  • Value 
    The Value option is used to configure the Password input component to give it a default value or bind it to a dynamic property. 

  • Autocomplete 
    When this option is checked, the Password will show autocomplete suggestions from the web users browser history usage of similar fields, such as first or last name. 

  • Disabled 
    When checked, this option sets the Password to a disabled state. It prevents the values of this input from being submitted and a web user from filling in any values. 

  • Placeholder 
    Placeholder text is displayed in the Password until the user begins to type in the field. This helps the user understand what type of information is expected or its formatting. 

  • Helper text 
    Helper text is displayed dynamically below the Password input in a bubble to give an end user more infrmation about the suggested use of the field, or requirements of the input data. When there are validation messages, this text bubble will display that information. 

  • Margin 
    The margin property is used to specify the amount of spacing around the Password component. 

  • Size 
    The Size property is used to specify the default sizing of the Password. 

  • Place label above input 

It does what it says 

  • Full width 
    When this option is checked, the width of the Password will be based on the width of its parent container. 

  • Variant 
    This option allows you to apply a predefined custom style to your Password. 

  • Icon 
    If chosen, this option displays an icon inside the Password to give visual context to an end user about the purpose of the input. 

    • Icon position 
      The icon can be displayed at the start or end of the Password. 

  • Validation Options 
    Expand this option to see the contents inside the Validation subpanel. 

    • Required 
      When this is checked, the Password is required and an error message will inform the user if there is no input. 

      • Required message 
        Use this to define what validation message is displayed when the Password does not have a value when the form is submitted. 

    • Validation Pattern 
      Use this field to add a regex pattern that the contents of the Password need to match, such as the minimum criteria for a password more complex than password123.  

      • Pattern mismatch message 
        Use this field to create a validation message that is displayed to the user in the case of a regex mismatch. 

    • Min Length 
      Use this field to define the minimum number of characters the user needs to type in to be valid. 

      • Value too short message 
        Use this field to supply the validation message that is displayed when the user doesnt add enough characters to the Password. 

    • Max Length 
      Use this field to define the maximum number of characters the user can type in. 

      • Value too long message 
        Use this field to supply the validation message that is displayed when the user types in too many characters into the Password. 

  • Styling options 
    Expand this option to see the contents inside the Styling subpanel. 

    • Hide label 

It does what it says. 

    • Use the options in this panel to set the various color attributes used within the Password component. 

  • Advanced options  

Expand this option to see the contents inside the Advanced subpanel. 

    • Test attribute 
      This option allows you to set a data attribute on the component. The data attribute can be used to make the selection of these components easier when working with testing tools, gathering metrics or styling based on custom CSS.

See Also


Keywords:
Web form, Form elements, building forms 
Doc ID:
135200
Owned by:
Jeanne H. in Low Code Solutions
Created:
2024-02-02
Updated:
2024-06-18
Sites:
DoIT Enterprise Business Systems - Low Code Solutions