View Source Moon.Design.Dropdown (Moon v2.77.0)

Component for rendering dropdown info, mostly lists


  • id :string, required: true - The id of the live component (required by LiveView for stateful components).

  • value :any - Value(s) of the options to be marked as selected

  • is_open :boolean - Put true here if you want dropdown to be shown by default

  • class :css_class - Addictional classes to be added to a dropdown

  • testid :string - Data-testid attribute for HTML tag

  • autoclose :boolean, default: true - Dropdown autoclose on click away

  • hook :string - Attribute phx-hook. Used for dependant components

  • as_dropdown_on :string, values: ~w(sm md lg xl 2xl) - Experimental: makes BottomSheet behave as Modal on some screen widths, please reffer to

  • side_values :map, default: %{} - Additional values to be passed


  • trigger, required: true - Slot for triggering the open/closing state
  • default - Content to be showable
  • backdrop - Backdrop of Dropdown as BottomSheet on small screens, see Dropdown.Backdrop


  • on_trigger - Event fired when trigger is clicked
  • on_close - Event fired to close Dropdown.BottomOptions
  • on_change - Event fired when option is selected



Link to this function

handle_event(binary, arg2, socket)

View Source

Callback implementation for Phoenix.LiveComponent.handle_event/3.

Callback implementation for Phoenix.LiveComponent.mount/1.

Callback implementation for Phoenix.LiveComponent.render/1.

Callback implementation for Phoenix.LiveComponent.update/2.