How to Add and Set Up the Grouped Values Dropdown Widget on Your Form

February 9, 2026

Jotform’s Grouped Values Dropdown widget lets you organize dropdown choices under labeled categories, making it easier for users to find what they’re looking for. Whether you’re listing products, locations, or service types, this widget keeps things neat and easy to navigate.

Here are a few ways to use it:

  •  Organize Large Option Lists — If your dropdown has dozens of items (like countries, departments, or product categories), you can group them into sections so users can find what they need without endless scrolling.
  • Simplify Product or Service Selection — If you’re selling multiple product lines or services, you can organize them into groups, like “Electronics,” “Furniture,” or “Clothing,” so customers can zero in on the right category fast.
  • Make Forms Easier to Navigate — Instead of overwhelming people with a long list, this widget helps break things down into logical chunks, giving your form a cleaner, friendlier feel.
  • Perfect for Registration or Application Forms — Use it to group things like school programs, job positions, or event sessions—making it clear and simple for applicants to pick the right one.

Notes

  • Each group of options appears under a labeled heading in the dropdown, similar to a menu with subcategories.
  • Users will be able to pick just one option from all the grouped choices added in the widget.

Adding and Setting Up the Grouped Values Dropdown Widget

Split your dropdown menu into multiple categories with the Grouped Values Dropdown widget. It only takes a minute to set up. Here’s how:

  1. In Form Builder, click on Add Element on the left side of the page.
Form Builder interface showing the Add Element button on the left sidebar for adding new form fields
  1. Now, in the Form Elements menu, under the Widgets tab, search for Grouped Values Dropdown and then click on it. Or, just drag and drop it to where you want it to be on your form.
Form Elements menu with the Widgets tab open and the Grouped Values Dropdown widget selected
  1. Next, in the Widget Settings window that opens on the right side of the page, set up the following options:
    • Groups — Set this up to define the categories or group labels that will organize your dropdown options and separate each one with a comma. 
    • Values — Enter here the list of items to appear under each group label.
    • Default Input Text — Edit this to add placeholder text shown in the dropdown before a user makes a selection.
  2. Once you’re done, click on Update.
Widget Settings panel for Grouped Values Dropdown with group labels, dropdown values, and placeholder text setup

That’s it. You’ve successfully added and set up the Grouped Values Dropdown widget to your form. Now, you have a field in your form that lets you display a long list of dropdown options organized by categories or groups, making forms easier to navigate. Wondering how it looks in action? Check out this Demo Form.

Form preview showing the Grouped Values Dropdown widget with options organized into categories

To further customize how the widget looks, click on the Gear icon to open its properties.

Note

For advanced styling, you can add your own custom CSS under the Custom CSS tab in the widget settings and style the Grouped Values Dropdown field. Our guide on How to Inject CSS Codes to Widgets walks you through everything.

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Podo Comment Be the first to comment.
Still have unanswered questions?

We’re here for you 24/7, anytime you need us day or night. Have a question or need a hand with something? Our team is always ready to help out.