Create a basic configuration. This takes:

• itemsFromModel: The list of items to display in the dropdown (as a function of the model)
• selectionFromModel: The function to get the selected item from the model
• dropdownMsg: The message to wrap all the internal messages of the dropdown
• onSelectMsg: A message to trigger when an item is selected
• itemToPrompt: A function to get the Element to display from an item, to be used in the select part of the dropdown
• itemToElement: A function that takes a bool for whether the item is selected followed by a bool for whether the item is highlighted, followed by the item and returns the Element to display, to be used in the list part of the dropdown

Create a filterable configuration. This takes:

• itemsFromModel: The list of items to display in the dropdown (as a function of the model)
• selectionFromModel: The function to get the selected item from the model
• dropdownMsg: The message to wrap all the internal messages of the dropdown
• onSelectMsg: A message to trigger when an item is selected
• itemToPrompt: A function to get the Element to display from an item, to be used in the select part of the dropdown
• itemToElement: A function that takes a bool for whether the item is selected followed by a bool for whether the item is highlighted, followed by the item and returns the Element to display, to be used in the list part of the dropdown
• itemToText: A function to get the text representation from an item, to be used when filtering elements in the list

Create a multiselect configuration. This takes:

• itemsFromModel: The list of items to display in the dropdown (as a function of the model)
• selectionFromModel: The function to get the selected items from the model
• dropdownMsg: The message to wrap all the internal messages of the dropdown
• onSelectMsg: A message to trigger when an item is selected
• itemsToPrompt: A function to get the Element to display from the list of selected items, to be used in the select part of the dropdown
• itemToElement: A function that takes a bool for whether the item is selected followed by a bool for whether the item is highlighted, followed by the item and returns the Element to display, to be used in the list part of the dropdown

Create a configuration which can be used as an autocomplete. It emits a message on every filter change which can be handled in parent application to fetch predictions. This takes:

• itemsFromModel: The list of items to display in the dropdown (as a function of the model)
• selectionFromModel: The function to get the selected item from the model
• dropdownMsg: The message to wrap all the internal messages of the dropdown
• onSelectMsg: A message to trigger when an item is selected
• onFilterChangeMsg: A message emitted when text in the search input changes, this message can be used to fetch predictions from a remote server to be rendered in the dropdown
• itemToPrompt: A function to get the Element to display from an item, to be used in the select part of the dropdown
• itemToElement: A function that takes a bool for whether the item is selected followed by a bool for whether the item is highlighted, followed by the item and returns the Element to display, to be used in the list part of the dropdown
• itemToText: A function to get the text representation from an item, to be used when filtering elements in the list

Opaque type that holds the current config

dropdownConfig =
    Dropdown.basic
        { allItems = always [ "apples", "bananas", "oranges" ]
        , selectedItem = .selectedFruit
        , dropdownMsg = DropdownMsg
        , onSelectMsg = FruitPicked
        , itemToPrompt = Element.text
        , itemToElement = \selected -> \highlighted -> Element.text
        }

Opaque type that holds the current state

type alias Model =
    { dropdownState : Dropdown.State
    }

Opaque type for the internal dropdown messages

Create a new state. You must pass a unique identifier for each dropdown component.

{
    ...
    dropdownState = Dropdown.init "country-dropdown"
}

Update the component state

DropdownMsg subMsg ->
    let
        ( updated, cmd ) =
            Dropdown.update dropdownConfig subMsg model model.dropdownState model.items
    in
        ( { model | dropdownState = updated }, cmd )

Render the view

Dropdown.view dropdownConfig model model.dropdownState model.items

Allows tests with elm-program-test

Same as Cmd.map, but for an Effect.

Resolves Effect as Elm's Cmds. If you plan to implement this yourself, it looks like this:

performEffect : Effect msg -> Cmd msg
performEffect effect =
    case effect of
        Loopback msg ->
            Task.perform identity <| Task.succeed msg


        DomFocus msg id ->
            Task.attempt msg (Dom.focus id)

Same as update but returning a list of Effect.

Serves as a subscription to know when the user has clicked outside a certain dropdown

• dropdownState: State of the dropdown we want to subscribe to

• dropdownMsg: The message to wrap all the internal messages of the dropdown

subscriptions : Model -> Sub Msg
subscriptions model =
    Dropdown.onOutsideClick model.dropdownState DropdownMsg

Sets the container visual attributes, default is empty

Dropdown.withContainerAttributes [ width (px 300) ] config

When the list is empty, show this element instead.

Most useful in filterable, it shows up when nothing matches the filter value.

Sets the placeholder of the Filterable dropdown, default is "Filter values"

Dropdown.withFilterPlaceholder "Type here..." config

Sets the item list visual attributes, default is empty

Dropdown.withListAttributes [ Border.width 1, Border.rounded ] config

Sets the open and close buttons' visual attributes, default is empty

Dropdown.withOpenCloseButtons { openButton = text "+", closeButton = "-" } config

Sets the content of the Select, default is "-- Select --"

Dropdown.withPromptElement (el [ Font.color (rgb255 123 123 123) ] <| text "Pick one") config

Sets the search visual attributes, default is empty

Dropdown.withSearchAttributes [ Border.width 0, padding 0 ] config

Sets the select visual attributes, default is empty

Dropdown.withSelectAttributes [ Border.width 1, Border.rounded 5, paddingXY 16 8 ] config