Multiple select

Simplify data organization with Yeeflow's multiple-select fields. Enhance flexibility and streamline decision-making effortlessly.

Updated over a week ago

The Multiple select field control enables your users to select one or more values from a predefined set of choices that are displayed as Checkbox or Dropdown list.


When to use this field?

You may consider the following pointers to determine when to use a Multiple select field:

  • Opt to use a Multiple select field if the data that you want to enable your users to enter spans a defined set of choices, and one or more of these choices can be present per entry (or record).

  • The display control can be choose as Checkbox, or Dropdown list. Where the Checkbox and Dropdown controls differ is the way the choices are displayed when your users access them on a web-browser: as checkboxes and in a drop-down menu, respectively.

  • If you want to enable your users to select a single value, you must opt to add a Single select field to your form.

  • If you want to create a dynamic picklist that allows your users to select multiple values, then you must opt to use a lookup field.


Character limits

A choice displayed by theMultiple select field contains up to 255 characters.


Add Multiple select to the form

Firstly, find the Multiple select control in the controls add panel. Then, drag and drop it into a section or container on your form.


Basic of the Multiple select field

Open the Content > Basic block and set the Title's text of this Multiple select control. For more information about Title for field control, please refer:

Set the Associated variable for this Multiple select control. When you add a newMultiple select control, a default variable will be generated automatically. You can click the Edit Button to change the ID and name, or click the Reset button to bind thisMultiple select control to other existing variables. For more information, please refer:


Appearance of the Multiple select field

Open the Content > Appearance block to set the appearance and layout of thisMultiple select control.

Display Style: One of the primary customizable features of the "Single Select" control is the "Display Style." Users can choose between two styles for presenting the options - "Checkbox" or "Dropdown".

  • Dropdown: This style is suitable when the list of options is long. It saves space on the form and only reveals the options when the user clicks on the dropdown.

    When the Dropdown is selected, the Placeholder setting shows toset the text of the placeholder for this Dropdown.

  • Checkbox: This style is perfect for shorter lists. It allows all options to be visible at a glance and provides a quicker selection process.

    When the display style is set as "Radio Button", there's one additional option called "Layout" you can select,

    Layout: Set the layout of the choices to be displayed horizontal or vertical.

Display Title: Choose display or hide the label of this control. For more information, please refer: Understand the title of field controls

Allow comment: Turn on this option will allow users to add comments on this control.

Dynamic Display Rules: When you set a dynamic display rules, It behaves differently based on specific conditions and rules.


Choices of the Multiple select field

Open the Content > Choices block to add choices, edit a choice, and delete a choice.

  • Define the order in which the choices are displayed: You can drag a choice to arrange the choices manually in the required order.

  • Rename the values provided as choices in your Multiple select field.

  • Set an initial value: Click the radio button at the beginning of each choice to set it as the initial value for aMultiple select field. The Initial value will be preselected when your users access your form. Setting an initial value does not restrict your users from removing and selecting a different set of choices from theMultiple select.

  • Click the Add button to add new choices.


Validation of the Multiple select field

Open the Content > Validation block to set the properties of thisMultiple select control.

Readonly: Turn this ON will make this field control as view only status.

Required: Make it mandatory for your users to select at least a choice.

Custom Validation: Set the custom validation rules. An error message that will display under your field when specified conditions become true. It will allow you to add any number of rules for validating your field.


Action call of the Multiple select field

Open the Content > Action block to call a pre-defined action from the dropdown list. This action will be triggered once the value of thisMultiple select field is changed.


Style the Checkbox control

Set the styles when the display style is set to Checkbox.

Field

Open the Style > Field block to set the styles of the field control.

  1. Gap between control and option label: Set the spacing between the Checkbox, and the text of option label.

  2. Control size: Set the size of the Checkbox.

  3. Field Alignment: Set the alignment of this Checkbox control as left, center or right.

  4. Normal / Active / Disabled: Set different styles for normal, active and disabled state of the Checkbox control. Styles below are supported to be set separately for normal, active and disabled state.

    • Color: Choose the front color of the Checkbox.

    • Background Color: Set background color of the Checkbox.

    • Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.

    • Radius: Set the border radius to control corner roundness.

  5. Option Label:Set the style of the option label after the radio button control:

    • Typography: Set the typography options for the text of the option label.

    • Color: Choose the text color of the option label.

    • Background Color: Set background color of the option label.

Style the Dropdown control

Set the styles when the display style is set to Dropdown.

Field - Editable

Open the Style > Field - Editable block to set the styles of the field control for it's editable status.

  1. Typography: Set the typography options for the text in the field.

  2. Normal / Focus: Set different styles for normal state and focus state of the dropdown list. Styles below are supported to be set separately for Normal and Focus state.

    • Color: Choose the color of the dropdown list items text.

    • Background Color: Set background color of the dropdown list. By default, the background color is set as transparent.

    • Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.

    • Radius: Set the border radius to control corner roundness.

    • Shadow: Adjust box shadow options

  3. Placeholder Color: Choose the color of the placeholder text.

  4. Align: Set the alignment of text inside the field control. Can be Left, Center or Right.

  5. Padding: Set the Padding of the field control.

  6. Field Width: Set the width of the field control in PX or %.

  7. Field Alignment: Set the alignment of the field control. This will only be effected when the field width is less than the outside container.

  8. Error Message: Set the styles of the error message,

    • Typography: Set the typography options for the error message.

    • Color: Choose the color of the error message's text.

Dropdown

Open the Style > Dropdown block to set the style of the dropdown list items (choices).

  1. Typography: Set the typography options for the text of dropdown list items.

  2. Align: Set the alignment of text inside each of the dropdown list items. Can be Left, Center or Right.

  3. Padding: Set the Padding of the dropdown list items.

  4. Normal / Hover / Active: Set different styles for normal state hover and active state of each dropdown list items. Styles below are supported to be set separately for normal, hover and active state.

    • Text Color: Choose the color of the list items' text.

    • Background Color: Set background color of the drop down list.

    • Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.

    • Radius: Set the border radius to control corner roundness.

    • Shadow: Adjust box shadow options

Field - Read Only

Open the Style > Field - Read Only block to set the styles of the field control for it's view only status.

  1. Typography: Set the typography options for the text in the dropdown field.

  2. Color: Choose the color of the field's text.

  3. Background Color: Set background color of the field. By default, the background color is set as transparent.

  4. Align: Set the alignment of text inside the field control. Can be Left, Center or Right.

  5. Padding: Set the Padding of the field control.

  6. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.

  7. Radius: Set the border radius to control corner roundness.

Style of title

Style the Title of field controls that are applicable to this control.


Advanced Settings

Set the Advanced options that are applicable to this control.

Did this answer your question?