Topics Map > Page Builder

LCS - Form Component Input Types Part 2

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 2 of the alphabetical list of input components. To see Part 1, go to LCS - Form Component Input Types Part 1

Phone number 

The phone number input is used in a web form to allow end users of the application to enter a valid phone number. 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 Phone number input to create a connection between the Phone number input component, the action input variable, and that data model property. Note that you need to use a phone number property in your data model. 

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

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

  • Autocomplete 
    When this option is checked, the Phone number input will show autocomplete suggestions from the web user’s browser history usage of similar fields, such as first or last name. 

  • Disabled 
    When checked, this option sets the Phone number 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 Phone number 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 Phone 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 Phone number input component. 

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

  • Place label above input 

It does what it says 

  • Full width 
    When this option is checked, the width of the Phone 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 Phone number input. 

  • Icon 
    If chosen, this option displays an icon inside the Phone 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 Phone number input. 

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

    • Required 
      When this is checked, the Phone number 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 Phone number 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 Phone number input need to match so users can enter a value in the format of a valid phone number.  

      • 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 doesn’t add enough characters to the Phone number 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 Phone number input. 

  • Styling options 
    Expand this option to see th 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 Phone number input 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. 

Price 

The price input is used in a web form to allow end users of the application to enter a valid local currency value in the web form. 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 Price input to connect the Text Field component, the action input variable, and that data model property. Note that the Price input must be connected to a number property in your data model. 

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

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

  • Autocomplete 
    When this option is checked, the Price input will show autocomplete suggestions from the web user’s browser history usage of similar fields. 

  • Disabled 
    When checked, this option sets the Price 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 Price 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 Price 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. 

  • Currency 

The currency option defaults to Euros, so you need to update this to dollars by changing to the $ symbol if you are creating a Price input for the US. 

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

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

  • Place label above input 

It does what it says 

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

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

  • Icon 
    If chosen, this option displays an icon inside the Price 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 Price input. 

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

    • Required 
      When this is checked, the Price 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 Price 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 Price 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 doesn’t add enough characters to the Price 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 Price 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 Price input 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. 

Radio 

The radio input is used in a web form to provide a limited set of options based on the list property in a data model. Only one option can be selected at a time. The number of options in a radio input should not exceed five. If more than five options are available, you should use the Select input type instead for a more compact display in the user interface of the web form. 

Options 

  • Property 
    The Property option specifies the data model property represented by the Radio input to create a connection between the Radio input component, the action input variable, and that data model property. Note that you must use the list property in your data model with the Radio input. 

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

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

  • Disabled 
    When checked, this option sets the Radio 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 th Radio 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 

It does what it says 

  • Row 

When this option is selected, the radio buttons are displayed in a row across the form.  When unchecked, the radio buttons will be displayed vertically. 

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

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

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

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

    • Required 
      When this is checked, the Radio 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 Radio input does not have a value when the form is submitted. 

  • 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 Radio input component. 

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

    • Test attribute 
      Thisoption 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. 

Rating 

The Rating input is used to collect a numeric value from your users that summarizes their evaluation on a scale of icons like stars that you specify for them to use. 

Options 

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

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

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

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

  • Is read only 
    When checked, this option makes the Rating input non-interactive for the end user without disabling it. 

  • Helper text 
    Helper text is displayed dynamically below the Rating input in a bubble togive 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. 

  • Number of Icons 

This property contains a numeric value for the number of stars or other icons displayed in the Rating input. 

  • Precision 

This property is used to determine if half-star ratings can be entered by the end user, or if only whole values are allowed. 

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

  • Outer Space 
    The outer space property is used to specify the amount of spacing around the Rating input component. 

  • Icon 
    Use this option to choose the display of a set of icons inside the Rating input, such as stars or thumbs-up. 

  • 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 Rating input component. 

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

    • Required 
      When this is checked, the Rating 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 Rating input does not have a value when the form is submitted. 

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

    • Interaction (change) delay in millisecods 

Modify this value to speed up or slow down the incrementing of the value in the box as users increment the value in the Rating 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. 

Rich Text Editor 

The Rich Text Editor component is used in a web form to allow users to use a word processor in their web browser. 

Options 

  • Property 
    The Property option specifies the data model property represented by the Rich Text Editor to connect the Rich Text Editor component, the action input variable, and that data model property. You should use the rich text property in your data model to store values from the Rich Text Editor. 

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

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

  • Disabled 
    When checked, this option sets the Rich Text Editor 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 Rich Text Editor 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 Rich Text Editor 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. 

  • Height 

The Height property is used to set the display height of the Rich Text Editor in pixels or other units. 

  • Width 

The Width property is used to set the display width of the Rich Text Editor in pixels or other units. 

  • Outer Space  
    The Outer Space property is used to specify the amount of spacing around the Rich Text Editor component. 

  • Place label above input 

It does what it says 

  • Toolbar Options 

Expand this option to see the contents inside the Toolbar Options subpanel. 

    • Use the options in this panel to set the various toolbar options used within the Rich Text Editor component. 

  • 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 Rich Text Editor 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. 

Select 

The select input is used in a web form to provide a limited set of options based on the list property in a data model or based on the values of a list property. Only one option can be selected at a time. The number of options displayed in the user interface in a Select input is limited to 10. If fewer than five options are available, you should use the Radio input type instead for a more user-friendly display in the user interface of the web form. 

Options

  • Property 
    The Property option specifies the data model property represented by the Select input to connect the Select input component, the action input variable, and that data model property. Note that you must use the list property in your data model with the Select input. 

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

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

  • Placeholder 

Placeholder text is shown in the Select input until the user clicks on the input. This helps the user understand what type of information is expected or its formatting. 

  • Allow user to empty selection

When checked, this option allows the user to un-select a previously chosen value in the Select list. 

  • Disabled 
    When checked, this option sets the Select 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 Select 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 Select input component. 

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

  • Place label above input 

It does what it says 

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

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

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

    • Required 
      When this is checked, the Select 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 Select input does not have a value when the form is submitted. 

  • 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 Select input component.&nbp;

  • 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. 

Switch 

The Switch 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 Switch to connect the Switch component, the action input variable, and that data model property. A Switch 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 Switch field, informing the user about the purpose or usage of the field.  

  • Value 
    The Value option is used to configure the Switch input component to give it a default value of “true” (checked) or “false” (unchecked), or bind it to a Switch 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 Switch from being submitted and the end-user from choosing any values. 

  • Helper text 
    Helper text is displayed dynamically below the Switch 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.

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

    • Required 
      When this is checked, the Switch 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 Switch 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 Switch 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. 

Text Area 

The text area component is used in a web form to allow users to type in multiple lines of plain text. 

Options 

  • Property 
    The Property option specifies the data model property represented by the Text area to connect the Text Area component, the action input variable, and that data model property. You should use the multi line text property in your data model to store values from the Text Area. 

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

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

  • Autocomplete 
    When this option is checked, the Text Area will show autocomplete suggestions from the web user’s browser history usage of similar fields. 

  • Disabled 
    When checked, this option sets the Text Area 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 Text Area 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 Text Area 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. 

  • Multiline 

When checked, this option displays the Text Area as a multiline textbox with browser-specific behavior and a mobile keyboard switch on mobile devices. 

  • Rows 

The rows property is used to specify the number of rows of text displayed in the Text Area component in the user interface. The number of rows does not constrain the amount of text that can be typed in, however, as a block of text longer than the number of rows will result in a scroll bar appearing in the Text Area so the user can scroll down through multiple lines of text. 

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

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

  • Place label above input 

It does what it says 

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

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

  • Icon 
    If chosen, this option displays an icon inside the Text Area 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 Text Area. 

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

    • Required 
      When this is checked, the Text Area 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 Text Area 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 Text Area 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 doesn’t add enough characters to the Text Area. 

    • 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 displayed when the user types in too many characters into the Text Area. 

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

    • Hide label 

It does what it says. 

    • Use the option in this panel to set the various color attributes used within the Text Area 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. 

Text Field 

The Text Field component is used in a web form to allow users to type in a single line of plain text.  

Options 

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

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

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

  • Autocomplete 
    When this option is checked, the Text Field will show autocomplete suggestions from the web user’s browser history usage of similar fields, such s first or last name. 

  • Disabled 
    When checked, this option sets the Text Field 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 Text Field 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 Text Field 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 Text Field component. 

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

  • Place label above input 

  • It does what it says 

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

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

  • Icon 
    If chosen, this option displays an icon inside the Text Field 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 Text Field. 

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

    • Required 
      When this is checked, the Text Field 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 Text Field 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 Text Field 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 doesn’t add enough characters to the Text Field. 

    • 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 displayed when the user types in too many characters into the Text Field. 

  • 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 Text Field 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 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.  

Time picker 

The time picker input is used in your web form to create a visual clock that allows your end users to select a specific time in hours, minutes and seconds. 

Options 

  •  Property 

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

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

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

  • Autocomplete 

When checked, this option allows the Time picker to function as intended, suggesting a time 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 Time picker from being submitted and the end-user from choosing any values. 

  • Placeholder 

Placeholder text is shown in the Time picker until the user interacts with 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 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 time format of the type HH:mm:ss, with a two-digit hour, two-digit minute and two-digit seconds. Other 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 

Leave this option checked unless you need to use a different time format for your requirements. 

  • Disable past dates 

Enable this option if you don’t want your users to be able to pick a time from the past  

  • Close picker after select 

It does what it says 

  • Margin 

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

  • Size 

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

  • Place label above input 

It does what it says. 

  • Full width 
    When this option is checked, the width of the 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 clock in a dialog will open on top of your web form when your user clicks into the Time picker field and close when a time has been selected. 

    • Inline 

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

    • Static 

The clock will always show in your web form. 

  • Variant 

The Variant options modify the display of the clock. 

  • Disable toolbar 

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

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

    • Required 
      When this is checked, the 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 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. 

URL 

The URL input is used in your web form to allow your end users to enter a properly formatted URL. 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 URL input to connect the URL input component, the action input variable, and that data model property. Note that the URL input requires a URL property in the data model. 

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

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

  • Autocomplete 
    When this option is checked, the URL input will show autocomplete suggestions from the web user’s browser history usage of similar fields. 

  • Disabled 
    When checked, this option sets the URL 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 URL 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 URL 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 URL input component. 

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

  • Place label above input 

It does what it says 

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

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

  • Icon 
    If chosen, this option displays an icon inside the URL 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 URL input. 

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

    • Required 
      When this is checked, the URL 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 URL 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 URL 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 doesn’t add enough characters to the URL 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 displayed when the user types in too many characters into the URL 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 URL 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 the incrementing of the value in the box as users increment the value in 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. 

See Also


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