...

/

Drop-Down with Gradio

Drop-Down with Gradio

Learn how to create drop-downs in Gradio and introduce more interactivity to applications!

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'.

Press + to interact
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 ...