Skip to main content

DropdownM2

A dropdown lets the user select from a number of items. The dropdown shows the currently selected item as well as an arrow that opens a menu for selecting another item.

Example:

ft.DropdownM2(
    width=220,
    value="Alice",
    options=[
        ft.dropdownm2.Option(key="Alice", text="Alice"),
        ft.dropdownm2.Option(key="Bob", text="Bob"),
    ],
)

Inherits: FormFieldControl

Properties

  • alignment - Defines how the hint or the selected item is positioned within this dropdown.
  • autofocus - True if the control will be selected as the initial focus.
  • border_radius deprecated - The radii of the open dropdown menu's rounded rectangle shape.
  • disabled_hint_content - A placeholder Control for the dropdown's value that is displayed when value is None and the dropdown is disabled.
  • elevation - The dropdown's elevation.
  • enable_feedback - Whether detected gestures should provide acoustic and/or haptic feedback.
  • hint_content - A placeholder Control for the dropdown's value that is displayed when value is None.
  • item_height - The height of the items/options in the dropdown menu.
  • max_menu_height - The maximum height of the dropdown menu.
  • menu_border_radius - The radii of the open dropdown menu's rounded rectangle shape.
  • options - A list of Option controls representing items in this dropdown.
  • options_fill_horizontally - Whether the dropdown's inner contents to horizontally fill its parent.
  • padding - The padding around the visible portion of this dropdown.
  • select_icon - The name of the icon or Control to use for the drop-down select button's icon.
  • select_icon_disabled_color - The color of any Icon descendant of select_icon if this button is disabled.
  • select_icon_enabled_color - The color of any Icon descendant of select_icon if this button is enabled.
  • select_icon_size - The size of the icon button which wraps select_icon.
  • value - key value of the selected option.

Events

  • on_blur - Called when the control has lost focus.
  • on_change - Called when the selected item of this dropdown has changed.
  • on_click - Called when this dropdown is clicked.
  • on_focus - Called when the control has received focus.

Properties​

alignmentclass-attributeinstance-attribute​

alignment: Alignment | None = None

Defines how the hint or the selected item is positioned within this dropdown.

autofocusclass-attributeinstance-attribute​

autofocus: bool = False

True if the control will be selected as the initial focus. If there is more than one control on a page with autofocus set, then the first one added to the page will get focus.

border_radiusclass-attributedeprecatedinstance-attribute​

border_radius: BorderRadiusValue | None = None
Deprecated

Deprecated since version 1.0.0 and scheduled for removal in 1.3.0. Use menu_border_radius to shape the menu, or border to shape the input field.

The radii of the open dropdown menu's rounded rectangle shape.

disabled_hint_contentclass-attributeinstance-attribute​

disabled_hint_content: Control | None = None

A placeholder Control for the dropdown's value that is displayed when value is None and the dropdown is disabled.

elevationclass-attributeinstance-attribute​

elevation: Number = 8

The dropdown's elevation.

enable_feedbackclass-attributeinstance-attribute​

enable_feedback: bool | None = None

Whether detected gestures should provide acoustic and/or haptic feedback. On Android, for example, setting this to True produce a click sound and a long-press will produce a short vibration.

hint_contentclass-attributeinstance-attribute​

hint_content: Control | None = None

A placeholder Control for the dropdown's value that is displayed when value is None.

item_heightclass-attributeinstance-attribute​

item_height: Number | None = None

The height of the items/options in the dropdown menu.

max_menu_heightclass-attributeinstance-attribute​

max_menu_height: Number | None = None

The maximum height of the dropdown menu.

menu_border_radiusclass-attributeinstance-attribute​

menu_border_radius: BorderRadiusValue | None = None

The radii of the open dropdown menu's rounded rectangle shape.

If None (the default), the menu uses its default shape.

Note

This shapes the menu only; the input field's border is configured through border.

optionsclass-attributeinstance-attribute​

options: list[Option] | None = None

A list of Option controls representing items in this dropdown.

options_fill_horizontallyclass-attributeinstance-attribute​

options_fill_horizontally: bool = True

Whether the dropdown's inner contents to horizontally fill its parent. By default this button's inner width is the minimum size of its content.

If True, the inner width is expanded to fill its surrounding container.

paddingclass-attributeinstance-attribute​

padding: PaddingValue | None = None

The padding around the visible portion of this dropdown.

select_iconclass-attributeinstance-attribute​

select_icon: IconDataOrControl | None = None

The name of the icon or Control to use for the drop-down select button's icon.

Defaults to Icon(ft.Icons.ARROW_DROP_DOWN).

select_icon_disabled_colorclass-attributeinstance-attribute​

select_icon_disabled_color: ColorValue | None = None

The color of any Icon descendant of select_icon if this button is disabled.

select_icon_enabled_colorclass-attributeinstance-attribute​

select_icon_enabled_color: ColorValue | None = None

The color of any Icon descendant of select_icon if this button is enabled.

select_icon_sizeclass-attributeinstance-attribute​

select_icon_size: Number = 24.0

The size of the icon button which wraps select_icon.

valueclass-attributeinstance-attribute​

value: str | None = None

key value of the selected option.

Events​

on_blurclass-attributeinstance-attribute​

on_blur: ControlEventHandler[DropdownM2] | None = None

Called when the control has lost focus.

on_changeclass-attributeinstance-attribute​

on_change: ControlEventHandler[DropdownM2] | None = None

Called when the selected item of this dropdown has changed.

on_clickclass-attributeinstance-attribute​

on_click: ControlEventHandler[DropdownM2] | None = None

Called when this dropdown is clicked.

on_focusclass-attributeinstance-attribute​

on_focus: ControlEventHandler[DropdownM2] | None = None

Called when the control has received focus.

Examples​

Field border and menu shape​

play_arrowTry Online
import flet as ft


def main(page: ft.Page):
    page.add(
        ft.SafeArea(
            content=ft.Column(
                controls=[
                    ft.DropdownM2(
                        label="Matching field and menu",
                        value="a",
                        border=ft.OutlineInputBorder(
                            border_radius=20,
                            side=ft.BorderSide(width=2, color=ft.Colors.TEAL),
                        ),
                        menu_border_radius=20,
                        options=[
                            ft.dropdownm2.Option("a", "Alice"),
                            ft.dropdownm2.Option("b", "Bob"),
                            ft.dropdownm2.Option("c", "Carol"),
                        ],
                    ),
                    ft.DropdownM2(
                        label="Underlined field, rounded menu",
                        value="a",
                        border=ft.UnderlineInputBorder(),
                        menu_border_radius=ft.BorderRadius.only(
                            bottom_left=16, bottom_right=16
                        ),
                        options=[
                            ft.dropdownm2.Option("a", "Alice"),
                            ft.dropdownm2.Option("b", "Bob"),
                            ft.dropdownm2.Option("c", "Carol"),
                        ],
                    ),
                ],
            ),
        ),
    )


if __name__ == "__main__":
    ft.run(main)