Some questions have too many answers for buttons. Dog breeds, countries, car makes and models, yarn weights: a list like that works far better as a dropdown, and with Searchable turned on your customers can type a few letters to find their answer.
A dropdown is a display option on single and multiple choice questions, not a different kind of question. The answers underneath are the same answers, so products, logic jumps, Skip/Show conditions, answer visibility rules and integrations all keep working exactly as they do with buttons.
Add a dropdown question
Open your quiz in the Quiz Builder.
Click Add Page in the left-hand side menu.
Select Dropdown Question.
Choose Dropdown - Single Choice (one answer) or Dropdown - Multiple Choices (several answers).
Enter your question, then add your answers.
The new question opens with Display answers as already set to Dropdown in Question Properties.
Turn an existing question into a dropdown
Any Single Choice - Text Only or Multiple Choices - Text Only question can be switched without losing anything:
Select the question in the Quiz Builder.
In Question Properties on the right, set Display answers as to Dropdown.
Set it back to Buttons at any time. Your answers, connected products, logic jumps and conditions stay as they were.
Note: The dropdown option is available on text-only questions. Emoji and image answers keep their buttons, because a dropdown list can't show an image next to each answer.
Dropdown settings
When Display answers as is set to Dropdown, two more settings appear in Question Properties:
Searchable: customers can type to filter the list. Matching ignores capital letters and accents (typing
cremefindsCrème), it matches anywhere in the answer, and the matching part is shown in bold. When nothing matches, the list says so. Turn this on for lists of more than about ten answers.Placeholder: the text shown in the empty field. Leave it blank for the default in the quiz language: Select an answer, Select all that apply for multiple choice, or Type to search when Searchable is on.
Everything else works as on a button question: Required, Go to next question when answer is selected (the quiz moves on as soon as a customer picks an answer), Property ID and Sensitive data.
Add many answers at once
Typing two hundred breeds one by one isn't fun, so every choice question now has an Add answers from a list button next to Add answer.
Click Add answers from a list under the answers in the preview.
Paste your answers, one per line. Copying a column from a spreadsheet works.
Click Add. The button shows how many answers it's about to add.
Blank lines are skipped, and so are answers that already exist on the question, so you can paste the same list twice without creating duplicates.
Multiple choice dropdowns
On a Dropdown - Multiple Choices question, each answer the customer picks appears as a small tag inside the field, with an x to remove it. The list stays open so they can keep picking, and the answers they've chosen are marked in the list.
Selectable Options Limit works as usual: once the limit is reached, the remaining answers are grayed out until one is removed.
Mutually exclusive answers work as usual: picking one (for example None of these) clears the others, and picking any other answer clears it.
How it looks
The dropdown follows your quiz theme and primary color. In Classic it's a white field with a square-ish corner and a radio or checkbox next to each answer. In Clean it's a light gray filled field with no border, and in Elegant it's a pill-shaped field with pill-shaped rows and tags. Your primary color drives the focus ring, the highlighted row, the check mark and the tags.
The list opens directly under the field and pushes the content below it down, instead of floating over the page. That's on purpose: a floating list can get cut off at the edge of the quiz when it's embedded in your theme. On phones the rows are tall enough to tap comfortably, and the list scrolls after about six rows.
It also works with a keyboard and screen readers: arrow keys move through the list, Enter picks, Escape closes.
Logic, products and personalization
Because the answers are ordinary answers, nothing changes here:
Connect products, variants and collections to each answer as usual.
Use Logic Jumps to send a customer to a different question depending on the answer they picked.
Use answer visibility rules to show different answers depending on an earlier answer. Two dropdowns with visibility rules give you a dependent pair, for example car make first and then only that make's models.
Give the question a Property ID to reuse the answer later with
{{ breed }}, or in Skip/Show conditions.
Translating the dropdown text
The dropdown's built-in text can be translated in Translations under the Question steps group: the three placeholders, the No matches message and the label screen readers use for the remove button. If you only need to change the placeholder on one question, use the Placeholder setting on that question instead.
Custom CSS
Every part of the dropdown has its own class, so you can style it from the quiz's custom CSS editor (see How to add custom CSS to your quiz).
Class | What it styles |
| The whole dropdown (field and list) |
| The field: border, background, corners, padding |
| The text inside the field (placeholder, typed search) |
| The magnifier icon (Searchable only) |
| The arrow at the end of the field |
| A chosen answer tag on a multiple choice dropdown (its remove button is the |
| The open list: border, shadow, height before scrolling |
| One row in the list |
| The No matches row |
Inside a row, the answer text is .answer-text and its description .answer-description, the same classes as on answer buttons. A chosen row has aria-selected="true", a row that can't be picked because the limit is reached has aria-disabled="true", and the matching part of a search is a mark element.
For example, to show eight rows before the list scrolls and make the chosen row stand out:
.answer-dropdown-list { max-height: 384px; }
.answer-dropdown-option[aria-selected="true"] { background: #f1f5ff; }
.answer-dropdown-option mark { color: #0d34ff; }
Using the Lantern assistant
If you build quizzes through the Lantern assistant in Claude or another AI tool, ask for a dropdown or dropdown_multiple question, and add searchable when you want the search box. It accepts up to 200 answers in one go.
Good to know
Dropdowns are available on every plan.
Answers show as plain text in the list. HTML in an answer label is removed there.
On a single choice dropdown that isn't searchable, customers can still type on a keyboard to jump to the first answer starting with those letters, like a standard select box.
Analytics, submissions, CSV exports and integrations receive the chosen answers exactly as they do for button questions.
If you have any questions, contact our support team and we'll be happy to help!