MultiSelect

<select> element with multiple selection. This will properly give you the selected values for onChange event since the core onChange on select doesn't.

Options

type alias Item =

{ value : String

, text : String

, enabled : Bool

}

Item is the individual content of the dropdown.

value is the item value or id
text is the display text of the multi-select item.
enabled is a flag to indicate whether the item is enabled or disabled.

type alias Options msg =

{ items : List Item

, onChange : List String -> msg

}

Options for the dropdown.

items is content of the dropdown.
onChange is the message for when the selected value in the multi-select is changed.

defaultOptions : (List String -> msg) -> Options msg

Default Options, will give you empty multi-select with no empty item

View

multiSelect : Options msg -> List (Attribute msg) -> List String -> Html msg

Html element.

Put this in your view's Html content. Example:

type Msg = MultiSelectChanged (List String)


Html.div []
    [ multiSelect
        (defaultOptions MultiSelectChanged)
        [ class "my-multiSelect" ]
        model.selectedValues
    ]

indicatrix/elm-input-extra/1.0.1

MultiSelect

View

Modules