Select Input

A Select Input allows users to choose a single option from a predefined list. It combines an input field with a dropdown menu that reveals available selections when expanded.

Use a Select Input when the user needs to pick one option from several clearly defined choices, such as selecting a country, category, or status.

Common alternative names:
Dropdown, Selection Field, Menu Select, Combo Box

---

Variants

Standard

A dropdown input with a standard label.

Preview

Code

SelectInput<int>(
  label: 'Select an option',
  dropdownMenuEntries: List.generate(3, (e) {
    return DropdownMenuEntry<int>(
      value: e,
      label: 'Option $e',
    );
  }),
)

---

Floating Label

A dropdown input with a floating label that moves above the input when a value is selected.

Preview

Code

SelectInput<int>(
  label: 'Select an option',
  selectedLabel: 'Your selection',
  showLabel: true,
  dropdownMenuEntries: List.generate(3, (e) {
    return DropdownMenuEntry<int>(
      value: e,
      label: 'Option $e',
    );
  }),
)

---

Properties

SelectInput

Property	Type	Description
width	double	The width of the dropdown input. Defaults to 400.
label	String?	The label text displayed when no value is selected.
selectedLabel	String?	The label text displayed when a value is selected. If null, falls back to label.
labelStyle	TextStyle?	Custom text style for the label.
disabled	bool	Whether the dropdown input is disabled. Defaults to false.
showLabel	bool	Whether to show the label above the dropdown input. Defaults to false.
icon	Widget?	Custom icon displayed as the trailing icon in the dropdown.
selectedIcon	Widget?	Custom icon displayed as the trailing icon when a value is selected.
dropdownMenuEntries	List<DropdownMenuEntry<T>>	The list of dropdown menu entries to display.
onSelected	void Function(T?)?	Callback function triggered when a value is selected.
focusNode	FocusNode?	The focus node for managing focus state.
controller	TextEditingController?	The text editing controller for managing the input value.
errorText	String?	The error text displayed below the dropdown input.
validator	String? Function(T?)?	Validator function for validating the selected value.
initialValue	T?	The initial value of the dropdown input.
inputDecorationTheme	InputDecorationTheme?	Custom input decoration theme for styling the dropdown input.