Select

Dropdown select with string or object options

Select

Select renders a dropdown control and sends a payload with value to Lua when the user chooses an option.

local tone, setTone = track.state('tone', 'success')

lui.page('filters', function(ui)
  ui.select({
    value = tone,
    options = {
      { label = 'Success', value = 'success' },
      { label = 'Warning', value = 'warning' },
      { label = 'Error', value = 'error' }
    },
    onChange = function(payload)
      setTone(payload.value)
    end
  })
end)

API

Builder

ui.select(props)

Props

Prop	Type	Description
value	string | reactive getter	Selected value.
options	string[] | object option[] | reactive getter	Options. Object options use label and value. Strings become both label and value.
onChange	function(payload)	Receives a payload with value = string.
icon, iconComponent	icon	Default open/closed icon.
closedIcon, closedIconComponent	icon	Icon while closed.
openIcon, openIconComponent, activeIcon, activeIconComponent	icon	Icon while open.
triggerClassName	string	Trigger button class.
valueClassName, labelClassName	string	Selected value text class.
menuClassName, contentClassName	string	Dropdown menu class.
optionClassName	string	Every option row class.
optionActiveClassName, optionSelectedClassName	string	Active option row classes.
optionLabelClassName, optionActiveLabelClassName	string	Option label classes.

Select keeps a local selected value for immediate UI feedback, then syncs back to reactive Lua state through onChange.