The Dropdown component provides a compact single-selection menu that expands when clicked. It works well for questions with many options where displaying all choices at once would take too much space.
When to use Dropdown
Section titled “When to use Dropdown”Dropdown is ideal for:
- Country or region selection
- Category selection from long lists
- Year or date selection
- Department or team selection
- Any single-choice question with 5+ options
Adding a Dropdown component
Section titled “Adding a Dropdown component”-
Open your form in the editor
-
Drag the Dropdown component from the left sidebar onto your form
-
Click the component to select it and configure its settings
-
Add your options in the settings panel
Configuration options
Section titled “Configuration options”Question label
Section titled “Question label”The main question or prompt displayed above the dropdown.
Examples:
- “Country”
- “Select your department”
- “How did you hear about us?”
- “Preferred contact method”
Description
Section titled “Description”Optional helper text that appears below the question label.
When to use descriptions:
- To provide selection guidance
- To clarify what the options represent
- To indicate if selection affects other questions
Examples:
- “Select the country where you currently reside”
- “Choose the department most relevant to your inquiry”
Placeholder
Section titled “Placeholder”Text displayed in the dropdown before a selection is made.
Examples:
- “Select an option”
- “Choose a country”
- “Pick one”
- ”— Please select —“
Options list
Section titled “Options list”The list of choices available in the dropdown menu.
To manage options:
- Click to add new options
- Drag to reorder options
- Click the delete icon to remove options
- Edit option text directly
Tips for options:
- Order logically (alphabetically for long lists, by frequency for shorter ones)
- Keep option text concise
- Use consistent formatting across all options
- Consider grouping related options together
Required
Section titled “Required”Toggle whether a selection must be made before the form can be submitted.
When enabled:
- An asterisk (*) appears next to the question label
- Users must select an option to submit
- A validation message appears if no selection is made
Tips for effective use
Section titled “Tips for effective use”Use for longer lists. Dropdowns shine when you have many options. For 4 or fewer options, Multi Choice is often better.
Order options thoughtfully. Alphabetical order works well for long lists like countries. For shorter lists, consider ordering by popularity or logic.
Write clear placeholders. The placeholder should indicate what kind of selection is expected.
Keep options concise. Long option text can be hard to read in a dropdown. Aim for brevity.
Consider searchable dropdowns. For very long lists (like countries), Fomr’s dropdown includes search functionality.
Include “Other” when needed. If your list might not cover all cases, add an “Other” option.
Dropdown vs. Multi Choice
Section titled “Dropdown vs. Multi Choice”| Aspect | Dropdown | Multi Choice |
|---|---|---|
| Space | Compact, expands on click | Shows all options |
| Best for | 5+ options | 2-5 options |
| Interaction | Click to open, then select | Click directly on option |
| Visibility | Options hidden until clicked | All options visible |
| Mobile | Works well | Works well |
Searchable dropdown
Section titled “Searchable dropdown”For dropdowns with many options, users can type to filter:
- Start typing to filter options
- Matching options are highlighted
- Makes long lists (like countries) easy to navigate
Validation
Section titled “Validation”When a dropdown is marked as required:
- A selection must be made before submission
- The placeholder doesn’t count as a valid selection
- A validation message appears if submitted without selection
Accessibility
Section titled “Accessibility”The Dropdown component is built with accessibility in mind:
- Proper select/combobox semantics
- Keyboard navigation (Arrow keys, Enter, Escape)
- Screen reader compatible
- Focus states are clearly visible
- Type-ahead search functionality
Handling responses
Section titled “Handling responses”Dropdown responses in your form results:
- Show the selected option text
- Can be filtered by selection
- Are included in exports
- Allow analysis of selection distribution
Related
- Multi Choice - For single selection with visible options
- Multiselect - For multiple selections in dropdown format
- Checkboxes - For multiple selections with visible options
Need help?
For additional assistance with the Dropdown component, check our FAQ section or contact our support team.