### [How To Customize the Modern Dropdown Field](https://wpforms.com/developers/how-to-customize-the-modern-dropdown-field/)

**Published:** June 23, 2021
**Author:** Editorial Team

**Excerpt:** This tutorial will show you how to customize the modern dropdown field by limiting the search results.

**Content:**

Would you like to customize the **Modern Dropdown** field in WPForms? When using this field, you allow your users to type into a search box and display results based on the characters entered and with a small PHP snippet, you can control the number of results that display as keys are entered. In this tutorial, we’ll walk you through each step to customize the number of results that display.

## Creating your form

First, you’ll need to create your form and add your fields with at least one **Dropdown** form field included in the form.

![Create your form and add a Dropdown field to it](https://wpforms.com/wp-content/uploads/2021/06/wpforms-create-form-modern-dropdown-1.jpg)

If you need any help creating your form, [please review this documentation](https://wpforms.com/docs/creating-first-form/ "Creating Your First Form").

Once you’ve added your **Dropdown** field, click the **Advanced** tab and select **Modern** for the **Style** of the dropdown.

![Set your dropdown style to modern](https://wpforms.com/wp-content/uploads/2021/06/wpforms-limit-modern-dropdown-search.jpg)

## Customizing the modern dropdown

Now it’s time to add the code snippet to customize the **Modern Dropdown** field.

If you need any help adding snippets to your site, [please see this tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "How to Add Custom PHP or JavaScript for WPForms").

```

/**
 * Customize modern dropdown search results
 *
 * @link https://wpforms.com/developers/how-to-customize-the-modern-dropdown-field/
 */

function wpf_dev_modern_dropdown_search_results( $config, $forms ) {
	
	// Change 519 to an ID of your actual form or remove this condition to apply to all forms.
	if ( ! array_key_exists( 519, $forms ) ) {
        return $config;
	}
	
	// Change 6 to a large number to show all the matching results for every search (might impact performance).
	$config[ 'searchResultLimit' ] = 6;
	
	return $config;
}
add_filter( 'wpforms_field_select_choicesjs_config', 'wpf_dev_modern_dropdown_search_results', 10, 2 );
```

Remember to change the **519** to match your own form ID.

If you’re not sure how to find your form ID, [please visit this tutorial](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "How to Locate Form ID and Field ID").

Once you’ve added the snippet and updated the form ID, the last step is to set the **searchResultLimit** to the number you want to show as your users type into the search box. In our example, we only want to show the **6** top results.

![Now you can easily customize the modern dropdown search results](https://wpforms.com/wp-content/uploads/2021/06/wpforms-limit-modern-dropdown.jpg)

And that’s all you need! Would you also like to change the text that displays when no results are found? Take a look at our tutorial on [How to Change the No Results Found Text in the Modern Dropdown Field.](https://wpforms.com/developers/how-to-change-the-no-results-found-text-in-the-modern-dropdown-field/ "How to Change the No Results Found Text in the Modern Dropdown Field.")

## Reference Filter

[wpforms\_field\_select\_choicesjs\_config](https://wpforms.com/developers/wpforms_field_select_choicesjs_config/ "Using the wpforms_field_select_choicesjs_config filter")

## FAQ

#### Q: Can I limit the dropdown to only select 2 items?

**A:** Absolutely! First, you’ll have to edit the **Modern Dropdown** field and on the **Advanced** tab and toggle to option to enable **Multiple Options Selection**.

![toggle the switch to enable Multiple Options Selection](https://wpforms.com/wp-content/uploads/2021/06/wpforms-limit-selection-modern-dropdown.jpg)

Once you’ve enabled this option, you can add this snippet to your site.

```

/**
 * Customize modern dropdown search results
 *
 * @link https://wpforms.com/developers/how-to-customize-the-modern-dropdown-field/
 */

function wpf_dev_modern_dropdown_select_limit( $config, $forms ) {
     
    // Change 519 to an ID of your actual form or remove this condition to apply to all forms.
    if ( ! array_key_exists( 519, $forms ) ) {
        return $config;
    }
     
    // Change 2 to a large number to show all the matching results for every search (might impact performance).
    $config[ 'maxItemCount' ] = 2;

    // Modify the 'maxItemText' to make it translatable when limiting the selections.
    $config['maxItemText'] = sprintf( __( 'Only %1$s values can be added', 'wpforms' ), $config['maxItemCount'] );
     
    return $config;
}
add_filter( 'wpforms_field_select_choicesjs_config', 'wpf_dev_modern_dropdown_select_limit', 10, 2 );
```

![with this snippet you can limit the choices selected in the modern dropdown field](https://wpforms.com/wp-content/uploads/2021/06/wpforms-limit-frontend.jpg)

#### Q: How can I make my search return more of an exact match?

**A:** You can change the threshold value to be more specific with your search. Just add this snippet to your site.

```

/**
 * Return more specific results
 *
 * @link https://wpforms.com/developers/how-to-customize-the-modern-dropdown-field/
 */

function wpf_dev_modern_dropdown_select_search( $config, $forms ) {
     
    // Providing more specific search results 
    // This will be added to all WPForms Modern Dropdown field for the search bar
    $config[ 'fuseOptions' ] = array(
		'threshold' =>  0.1
	);
      
    return $config;
}
add_filter( 'wpforms_field_select_choicesjs_config', 'wpf_dev_modern_dropdown_select_search', 10, 2 );
```

**Categories:** Fields

**Tags:** PHP

---