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.
• 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.

Overriding Options

If the options need to come from template logic, you can override the field’s options before rendering the form. See 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.