Radio Button, Checkbox, and Drop-Down Fields

These fields allow the user to select from a predetermined list of options.

Radio button

Use a radio button field if you want the user to select only one option from a small number of options.

  • This is best for mutually exclusive choices and when you want all options visible at once for quick scanning.

  • For example, Aaron in Learning and Development adds an option to their LMS Upload form for users to choose which environment their project should be deployed to. It can only be deployed to one of three environments: Development, Stage, or Production. He adds these options as radio buttons because only one option can be selected, all choices should be visible at once, and it will reduce the risk of accidentally selecting multiple environments.

Checkbox

Use a checkbox field if you want the user to be able to select more than one option.

  • This is best for tasks, preferences, interests, etc.

  • For example, Riley in HR adds an option to their Onboarding form for users to select the services they want enabled when onboarded. There are multiple services and users can select as many as they need (i.e., API Access, Daily Usage Reports, SLA Monitoring, etc.). She will add the options as checkboxes to allow multiple selections without forcing a hierarchy or priority and to make it visually clear which options are selected and which are not.

Drop-down

Use a drop-down field if you want the user to select only one option from a long list or when space is limited.

  • This is best for country selection, age ranges, job titles, etc. Drop-down menus can keep the area clean and compact, especially when using a mobile device.

  • For example, Joe in IT adds an option to their Device Repair form for users to select the device model that needs repaired. Because there are 50+ device models, he will add the options to a drop-down menu to save space, prevent visual fatigue, and make the form easier to scan.

Note: If the total number of choices in a checkbox or radio button field exceeds 100, only the selected choices will be saved.

Settings

Editing Radio Button, Checkbox, and Drop-Down Fields in the Form Designer

  1. Select the field on the canvas, and the options will appear in the right pane.
  2. Under Field label, enter the field label that will appear next to the field on the form.
  3. Under Variable, specify a name for the field variable associated with this field. If you do not specify a variable name, Forms will automatically assign the field one based on its label.
  4. Under Text above field and Text below field, you can enter any additional text that should appear with the field. Click the Insert variable button to include a variable with this text.
  5. Under Display options, select Required if users must fill in this field before submitting the form. Select Read-only if users should not be allowed to modify this field.
  6. Note: If a required field is hidden with a field rule, it is no longer required. A required field is only required when it appears on the form.

  7. Under Choices, specify the options users will choose from in this field.

    Note: The choices you specify for a drop-down, checkbox, or radio button must be different from each other. The same choice cannot be listed twice in the same field.

    • Use the Search choices field to edit specific choices in a long list.
    • Use the arrows to to the left of the Label column to rearrange the order of the choices.
    • Edit the labels in the Labels column by clicking in the text field for that choice.
    • Optional: Select one choice to be the default selection for the form. Checkbox fields allow more than one default to be selected.
    • Click Add choice to add a new choice to the bottom of the list.
    • Click Clear default value to remove the Default previously selected.
    • Click Import choices with a .csv or .txt file to open a text file containing a list, and append that list to the existing choices.
      Note: The format of the CSV file should be:
      Choice 1,Value_1,false
      Choice 2,Value_2,false
      Choice 3,Value_3,false
    • Click Export choices as .csv file if you would like to save a copy of the choices as a .csv text file.
    • Select Use a dropdown when the choice count exceeds the choice limit to automatically render the list as a drop-down on the form for long lists, set the Choice Limit to the number of choices that will be displayed before the list is converted. Does not apply to drop-drown fields.
    • Select Assign values to choices to add a Value column and the ability to assign a value for use instead of the choice label. This is useful when further processing will be performed, and a shorter URL friendly value is needed. Checkbox fields have a Value column by default.
    • Select Append choices to lookup results to allow a lookup rule to add to the list, rather than replacing the list, of choices.
    • Select Add 'Other' choice to allow the user to enter a custom value in case the list does not contain exactly what they are looking for.
  8. Note: If multiple checkboxes are selected, the {/dataset/Checkbox} variable stores all the values in a single variable.

  9. To configure advanced options, click the Advanced tab.
    • For checkbox and radio button fields, under Layout, specify how the field choices will be displayed (in one to 4 columns or side-by-side).
    • Under Tooltip, specify the help text that will appear when users hover over the field.
    • Under CSS classes, specify CSS classes to assign this field. Learn more about using CSS.
  10. To configure field specific rules, click the Rules tab.
  11. Your field changes will be applied to the form automatically.

Note: The labels, tooltip, text above, and text below settings in the form designer support the use of simple HTML markup for formatting purposes.

Editing Radio Button, Checkbox, and Drop-Down Fields in the Classic Form Designer

  1. Select the field on the canvas and click Edit.
  2. Under Field label, enter the field label that will appear next to the field on the form.
  3. Under Variable, specify a name for the field variable associated with this field. If you do not specify a variable name, Forms will automatically assign the field one based on its label.
  4. Under Field options, select Required if users must fill in this field before submitting the form. Select Read-only if users should not be allowed to modify this field.
  5. Note: If a required field is hidden with a field rule, it is no longer required. A required field is only required when it appears on the form.

  6. Under Text above field and Text below field, enter any additional text that should appear with the field. Click the Insert variable button to insert a variable into the text.
  7. For checkbox and radio button fields, under Layout (radio button and checkbox only), specify how the field choices will be displayed (in columns or side-by-side).
  8. For drop-down fields, under Field width specify whether the field should be small, medium, large, or x-large in width
  9. Under Choices, specify the options users will choose from in this field. Select the number next to a choice to make it the default choice. Checkbox fields can have multiple default choices.

    Note: The choices you specify for a drop-down, checkbox, or radio button must be different from each other. The same choice cannot be listed twice in the same field.

  10. Assign a value to these choices. When you assign a value to a choice, the assigned value is stored for reporting and for use in the process. The choice, which is displayed to the person who filled out the form, is not stored. Assigning values to choices is especially useful if there is a monetary amount associated with a choice, and you want to use that amount to perform calculations.
  11. Note: If multiple checkboxes are selected, the {/dataset/Checkbox} variable stores all the values in a single variable.

  12. For checkboxes and radio buttons, you can include an "Other" field in the list by selecting Add "Other" choice.
  13. To configure advanced options, click the Advanced tab.
    • In the Advanced tab under Tooltip, specify the help text that will appear when users hover over the field.
    • Under CSS class, specify a CSS class to assign this field. Learn more about using CSS.
  14. Click Save to save your changes.

Populating Drop-down Lists with Database Values

To populate a drop-down list with database values

  1. After creating the drop-down field, open the Lookup Rules page of the form designer.
  2. If there aren't any lookup rules associated with this form, click New lookup rule. Otherwise, click the Add Rule button.
  3. In the drop-down fields next to Available Sources, specify the data source, table/view, and the table name.
  4. Delete the conditional statement (the line that says "When ____ matches with data source column...) by clicking the x button next to it.
  5. In the Fill section, select the drop-down field you want to populate and the data source values that will populate it.
  6. When you are finished editing the field settings, click Done. Your changes will be applied to the form automatically.