This dropdown field requires a value. If no value provided, there will be a validation error message (customizable). The default “required field indicator” is * (customizable).
This is a read-only dropdown. User can’t select any options. However, an option can be set indirectly using “Default Value” in field settings or programmatically.
Any of the options can be selected as the default option
When there is no default option selected, dropdown auto-selects the first option by default. Usually, the first option is an empty option, so we don’t really see it. But if the first option is a non-empty option, we can see it in action.
Placeholder is used to add message/instruction to a dropdown. When the first option is an empty option, placeholder text replaces its label. However, its value is still empty. That means, when the user saves the form without making a selection, the dropdown value will be stored as empty. Since placeholder value is empty, it will fail “required” validation.
When the first option is not an empty option, placeholder text is added as the new first option pushing existing options below.
This field looks exactly the same as the previous one but the difference is previous dropdown has 4 options “” (empty), “Apple”, “Orange” and “Banana” while this dropdown has only 3 options “Apple”, “Orange” and “Banana”. The first option was added by placeholder text.
Label position “Placeholder inside the field” is another way of adding placeholder where field label becomes the placeholder. It also replaces the empty option label.
When “Automatic width” enabled, dropdown size is automatically adjusted to the size of its option labels.
Autocompletes is useful when there is a large number of options in a dropdown field where searching for an option is faster than scrolling the list.
The multi-select dropdown allows the user to select more than one options.
In this dropdown, “Apple” and “Banana” are selected as default options.