abadi199/elm-input-extra/4.0.1

NOTE: this package is not compatible with Elm 0.19.1

MultiSelect

MultiSelect

<select> element with multiple selection.

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
    ]