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.
Table of Contents
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.
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.
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.
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.
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.
The select field also comes with the option of adding three different preset options to add the dropdown list of countries, languages and months.
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.
Moreover, as any other block, you can add additional CSS classes to change the styling of the block.