Dropdown Component Updates

CHANGELOG.md

@@ -1,6 +1,16 @@
 # Upcoming Release
 
 ## New Features:
+
+### Dropdown Component Updates
+
+The standard dropdown component now supports searching for choices. Also when `multiselect` is `True`, you can specify `max_choices` to set the maximum number of choices you want the user to be able to select from the dropdown component.
+
+```python
+gr.Dropdown(label="Multiselect Dropdown", choices=CHOICES, multiselect=True, max_choices=2),
+```
+by [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 3211](https://github.com/gradio-app/gradio/pull/3211)
+
 - Updated image upload component to accept all image formats, including lossless formats like .webp by [@fienestar](https://github.com/fienestar) in [PR 3225](https://github.com/gradio-app/gradio/pull/3225)
 - Adds a disabled mode to the `gr.Button` component by setting `interactive=False` by [@abidlabs](https://github.com/abidlabs) in [PR 3266](https://github.com/gradio-app/gradio/pull/3266) and [PR 3288](https://github.com/gradio-app/gradio/pull/3288)
 - Allow the setting of `brush_radius` for the `Image` component both as a default and via `Image.update()` by [@pngwn](https://github.com/pngwn) in [PR 3277](https://github.com/gradio-app/gradio/pull/3277)

demo/kitchen_sink/run.py

@@ -19,6 +19,7 @@ def fn(
     checkboxes,
     radio,
     dropdown,
+    multi_dropdown,
     im1,
     im2,
     im3,
@@ -96,6 +97,7 @@ def fn(
         gr.CheckboxGroup(label="CheckboxGroup", choices=CHOICES, value=CHOICES[0:2]),
         gr.Radio(label="Radio", choices=CHOICES, value=CHOICES[2]),
         gr.Dropdown(label="Dropdown", choices=CHOICES),
+        gr.Dropdown(label="Multiselect Dropdown (Max choice: 2)", choices=CHOICES, multiselect=True, max_choices=2),
         gr.Image(label="Image"),
         gr.Image(label="Image w/ Cropper", tool="select"),
         gr.Image(label="Sketchpad", source="canvas"),
@@ -135,6 +137,7 @@ def fn(
             ["foo", "baz"],
             "baz",
             "bar",
+            ["foo", "bar"],
             os.path.join(os.path.dirname(__file__), "files/cheetah1.jpg"),
             os.path.join(os.path.dirname(__file__), "files/cheetah1.jpg"),
             os.path.join(os.path.dirname(__file__), "files/cheetah1.jpg"),

gradio/components.py

@@ -1204,6 +1204,7 @@ def __init__(
         value: str | List[str] | Callable | None = None,
         type: str = "value",
         multiselect: bool | None = None,
+        max_choices: int | None = None,
         label: str | None = None,
         info: str | None = None,
         every: float | None = None,
@@ -1219,6 +1220,7 @@ def __init__(
             value: default value(s) selected in dropdown. If None, no value is selected by default. If callable, the function will be called whenever the app loads to set the initial value of the component.
             type: Type of value to be returned by component. "value" returns the string of the choice selected, "index" returns the index of the choice selected.
             multiselect: if True, multiple choices can be selected.
+            max_choices: maximum number of choices that can be selected. If None, no limit is enforced.
             label: component name in interface.
             info: additional component description.
             every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
@@ -1238,6 +1240,9 @@ def __init__(
         if multiselect:
             if isinstance(value, str):
                 value = [value]
+        if not multiselect and max_choices is not None:
+            warnings.warn("Max choices is ignored when multiselect is False.")
+        self.max_choices = max_choices
         self.test_input = self.choices[0] if len(self.choices) else None
         self.interpret_by_tokens = False
         IOComponent.__init__(
@@ -1259,6 +1264,7 @@ def get_config(self):
             "choices": self.choices,
             "value": self.value,
             "multiselect": self.multiselect,
+            "max_choices": self.max_choices,
             **IOComponent.get_config(self),
         }
 

test/test_components.py

@@ -563,7 +563,7 @@ def test_component_functions(self):
         assert dropdown_input.preprocess("a") == "a"
         assert dropdown_input.postprocess("a") == "a"
 
-        dropdown_input_multiselect = gr.Dropdown(["a", "b", "c"], multiselect=True)
+        dropdown_input_multiselect = gr.Dropdown(["a", "b", "c"])
         assert dropdown_input_multiselect.preprocess(["a", "c"]) == ["a", "c"]
         assert dropdown_input_multiselect.postprocess(["a", "c"]) == ["a", "c"]
         assert dropdown_input_multiselect.serialize(["a", "c"], True) == ["a", "c"]
@@ -572,6 +572,8 @@ def test_component_functions(self):
             value=["a", "c"],
             choices=["a", "b", "c"],
             label="Select Your Inputs",
+            multiselect=True,
+            max_choices=2,
         )
         assert dropdown_input_multiselect.get_config() == {
             "choices": ["a", "b", "c"],
@@ -584,7 +586,8 @@ def test_component_functions(self):
             "visible": True,
             "interactive": None,
             "root_url": None,
-            "multiselect": None,
+            "multiselect": True,
+            "max_choices": 2,
         }
         with pytest.raises(ValueError):
             gr.Dropdown(["a"], type="unknown")

ui/packages/app/src/components/Dropdown/Dropdown.svelte

@@ -11,6 +11,7 @@
 	export let visible: boolean = true;
 	export let value: string | Array<string> = [];
 	export let multiselect: boolean = false;
+	export let max_choices: number;
 	export let choices: Array<string>;
 	export let show_label: boolean;
 	export let style: Styles = {};
@@ -30,6 +31,7 @@
 		bind:value
 		{choices}
 		{multiselect}
+		{max_choices}
 		{label}
 		{info}
 		{show_label}

ui/packages/app/test/outbreak_forecast.spec.ts

@@ -31,8 +31,10 @@ test("matplotlib", async ({ page }) => {
 	await mock_api(page, [[{ type: "matplotlib", plot: BASE64_PLOT_IMG }]]);
 	await page.goto("http://localhost:9876");
 
-	await page.getByLabel("Plot Type").selectOption("Matplotlib");
-	await page.getByLabel("Month").selectOption("January");
+	await page.getByLabel("Plot Type").click();
+	await page.getByRole("button", { name: "Matplotlib" }).click();
+	await page.getByLabel("Month").click();
+	await page.getByRole("button", { name: "January" }).click();
 	await page.getByLabel("Social Distancing?").check();
 
 	await Promise.all([
@@ -57,8 +59,10 @@ test("plotly", async ({ page }) => {
 	]);
 	await page.goto("http://localhost:9876");
 
-	await page.getByLabel("Plot Type").selectOption("Plotly");
-	await page.getByLabel("Month").selectOption("January");
+	await page.getByLabel("Plot Type").click();
+	await page.getByRole("button", { name: "Matplotlib" }).click();
+	await page.getByLabel("Month").click();
+	await page.getByRole("button", { name: "January" }).click();
 	await page.getByLabel("Social Distancing?").check();
 
 	await Promise.all([

ui/packages/form/package.json

@@ -9,6 +9,7 @@
 	"private": true,
 	"dependencies": {
 		"@gradio/atoms": "workspace:^0.0.1",
-		"@gradio/utils": "workspace:^0.0.1"
+		"@gradio/utils": "workspace:^0.0.1",
+		"@gradio/icons": "workspace:^0.0.1"
 	}
 }