Dropdown

Use Dropdown when someone should choose from a defined list and the options do not need to be visible all at once.

Use Dropdown for compact choice fields, especially when the list is long. If the choices are few and should stay visible, Radio or Checkboxes may be clearer.

Key settings

• Options - Define the available choices. Keep option values stable once submissions, exports or integrations depend on them.
• Multiple selections - Allow one selected value or a list of selected values.
• Default value - Preselect one or more options for new submissions.
• Placeholder - Show an initial prompt before a value is selected.
• Use searchable dropdown - Let users filter options by typing. Recommended for long lists. The front end keeps the native <select> for submission and enhances it with Formie’s combobox module.
• Required - Force a choice before the form can be submitted.

Bulk Add Options

Use Bulk add options when you need to add a long list, such as countries, states, currencies or another repeated option set. You can start from Formie’s predefined options, choose which source field should be used for the label and value, then append those options to the field or replace the existing options.

You can also paste your own options into the bulk editor. Use one option per line:

Australia|AU
New Zealand|NZ
United States|US

If you only provide one value on a line, Formie uses it for both the label and value.

Option Sources

Instead of copying a long predefined or integration list into the static options table, set Options to Predefined or Integration. Formie resolves the list at render time and stores the selected label with the submission value.

See Option Sources for predefined lists, Mailchimp groups, CRM picklists, template mode, converting to static options, and validation behaviour.

Option availability

Use the row menu on an option to set its availability:

• Visible — Shown and selectable (default).
• Hidden — Removed from the front-end form without deleting the option. Existing submissions keep their stored value and label in the control panel, exports and email notifications.
• Disabled — Shown on the front-end form with HTML disabled so it is visible but cannot be selected.

Only one state applies at a time. Prefer hiding over deleting an option once submissions may reference its value.

Searchable dropdown

Enable Use searchable dropdown when the option list is long enough that scrolling a native <select> is awkward. Formie renders a normal dropdown on the server, then enhances it on the front end so users can type to filter choices.

• Works with single and multiple selection.
• Placeholder and empty-value options are shown as prompt text, not as selectable choices.
• Selected multi-select values appear as removable pills; already-selected options are hidden from the filtered list.
• The underlying <select> is still submitted, so validation, conditions, calculations and integrations behave like a regular dropdown.

The setting is also available on Entries, Categories, Users, Products, and Recipients when Display type is Dropdown.

For JavaScript hooks and module events, see Combobox module in the browser docs.

Overriding Options

If the options need to come from template logic, set the field’s Options type to Template in the form builder, then override the field’s options before rendering the form. See Option Sources and Overriding Settings.

Submitted value

Dropdown stores the selected option value. When multiple selections are enabled, it stores a list of selected option values.

When querying or saving submissions through GraphQL, the field handle is used as the field name. Query the form’s formFields and include inputTypeName if you need to confirm the generated input type for a specific form.

Theme config

The Dropdown field can be targeted with the dropdown theme config key.

{{ craft.formie.renderForm('contactForm', {
    themeConfig: {
        dropdown: {
            fieldInput: {
                attributes: {
                    class: 'my-dropdown-input',
                },
            },
        },
    },
}) }}

Use theme config for class and attribute changes. Use a template override only when the <select> markup or option rendering needs to change.

For full Tailwind, Bootstrap and other framework examples, see Formie theme configs (opens new window).

Related fields

• Use Radio when a short list should stay visible.
• Use Checkboxes when several choices can be selected and visibility matters more than compactness.