Select

Displays a list of options for the user to pick from—triggered by a button.

Basic Usage

Pass a List<String> to options — the string overload needs no label converter. The dropdown width matches the trigger, and the selected item is highlighted with a checkmark.

API Reference

Select<T> (generic overload)

ParameterTypeDefaultDescription
optionsList<T>—The list of options to display in the dropdown.
selectedOptionT?—The currently selected item. Pass null when nothing is selected.
onOptionSelected(T) -> Unit—Callback invoked with the chosen item when the user makes a selection.
label(T) -> String—Converts an item of type T to the string shown in the trigger and dropdown list.
modifierModifierModifierModifier applied to the outer Column container. Use Modifier.width(...) to size the trigger.
enabledBooleantrueWhen false, the component is non-interactive and rendered at 50% opacity.
placeholderString"Select option..."Text shown in the trigger when selectedOption is null.

Select (String overload)

Convenience overload for List<String> — identical to the generic overload but without the label parameter (items are used as their own display text).

ParameterTypeDefaultDescription
optionsList<String>—The list of string options to display.
selectedOptionString?—The currently selected string, or null.
onOptionSelected(String) -> Unit—Callback invoked with the selected string.
modifierModifierModifierModifier applied to the outer container.
enabledBooleantrueWhen false, the component is non-interactive.
placeholderString"Select option..."Placeholder text shown when no option is selected.

Behaviour notes

  • The dropdown is rendered in a Popup with focusable = true, so tapping outside dismisses it automatically.
  • The dropdown width matches the trigger width exactly via onGloballyPositioned.
  • The dropdown list is scrollable with a maximum height of 200 dp (LazyColumn + heightIn(max = 200.dp)).
  • The selected item receives an accent background and a trailing checkmark icon.
  • The trigger arrow icon rotates 180° when the dropdown opens (200 ms tween).
  • The border color animates between styles.border and styles.ring on focus, press, or when the dropdown is open.
Edit this page on GitHub