Search⌘ K

Drop-Down with Gradio

Explore how to create and use dropdown components in Gradio to enable user selections in machine learning applications. Understand key features like multiselect, custom values, and event listeners such as focus and blur. Learn to apply dropdowns for tasks like ticket status tracking and filtering property listings. Gain hands-on knowledge to build interactive, dynamic interfaces using Gradio dropdowns.

The Dropdown component

Dropdown allows the user to make a selection from a list of possible options, much like a CheckboxGroup. Generally, they can achieve similar things, with just some minor differences, including:

  • Dropdown will present the options once selected as a list that pops out, rather than a CheckboxGroup where you see all the options at once.

  • Dropdown can allow users to add their own value to the available options (if allow_custom_value is set as True).

At the end of the day, it is usually just a visual preference that differentiates whether to use a Dropdown or a CheckboxGroup.

A Dropdown in Gradio can be instantiated with gr.Dropdown() or with Interface string shortcut 'dropdown'.

Drop-down in Gradio
Drop-down in Gradio

If it is passed as an input into a function, it will pass the selected drop-down entry (or a list of selected drop-down entries if multi-select is allowed). If it is an output, it expects the function to return a string corresponding to the drop-down value (or a list of entries).

Much like other Gradio components, there are many parameters that tailor how a Dropdown functions. The most notable ones are multiselect, which allows multiple choices to be made, allow_custom_value which allows the user to add their custom value, and filterable, which allows the user to start typing into the drop-down to filter the ...