Documentation

All the information you need in one place

How to Use a Select Field in Nelio Forms

The select field in a form is the designated field for users to select an option or a group of options from a pre-defined dropdown list, whether it is the city where a trip starts, the type of device the user is using, or any other information you want them to fill in the form.

In this entry, we’ll show you all the options available for the select field with Nelio Forms.

Adding a Select Field to Your Form

When creating a new form or editing an existing one, adding a select field is as easy as adding a new Select field block in the block editor. You can use the Block Inserter + icon, or a shortcut slash command or use the More options on any of the block’s toolbar to insert a block.

Adding a select field to a form
Adding a select field to a form.

You should add a descriptive label (the select field by default has an empty label) if you want it to be accessible. You have the option to have this label displayed or not in the form.

Editing a new select field
Editing a new select field.

You can also type a placeholder in the field, such as “Select an option…”, which is especially recommended if you don’t display the label of the select field in the form.

Tu customize the text for each of the options in the dropdown, you must enter the text that should be displayed to the user in the label field and the value you want to be registered for that label when the form is submitted. By default, the select field comes with three pre-filled options to choose from, and whose labels are “First”, “Second” and “Third” and whose values are “first”, “second” and “third” (see image above).

To add additional choices, click intro after the last option or click the + Add option. You can remove an option with the delete key or by clicking the trash icon next to the field you want to remove.

Editing the different options of a select field
Editing the different options of a select field.

You can also organize the choices in groups by clicking on the + Add group of options. For example, you may want to create the different type of expenses in a form by grouping them in categories.

Editing different group of options in select field
Editing different group of options in select field.

The preview of the previous example would be as follows:

You can also mark any option as disabled by clicking on the lock icon and make that option non selectable by the user.

Preview of a select field with a disabled option
Preview of a select field with a disabled option.

The select field also comes with the option of adding three different preset options to add the dropdown list of countries, languages and months.

Add preset options in a select field
Add preset options in a select field.

Finally, you can reset all the options at any time in case you need to.

Select Field Settings

In the sidebar, you can set the the following number field properties:

  • Set whether the field must be filled in the form to be submitted,
  • Set whether to show the edit option in the editor,
  • Set whether the field label should be shown or hidden.
Select field settings
Select field settings.

Moreover, as any other block, you can add additional CSS classes to change the styling of the block.