Add a MultiSelect.Model to your model.

type MusicGenre
    = Rock
    | Jazz
    | Blues
    | Metal


type alias MyModel =
    { myMultiSelect : MultiSelect.Model MusicGenre
    }

Add a MultiSelect.Model to your model.

myInitialModel : MyModel
myInitialModel =
    { myMultiSelect = MultiSelect.init <| Nonempty Rock [ Jazz, Blues, Metal ]
    }

Add a MultiSelect.Msg to your Msg.

type MyMsg
    = UpdateMyMultiSelect MultiSelect.Msg

Use in your update function.

myUpdate : Msg -> Model -> ( Model, Cmd Msg )
myUpdate msg model =
    case msg of
        UpdateMyMultiSelect selectMsg ->
            let
                ( newSelect, cmd ) =
                    MultiSelect.update selectMsg mode.myMultiSelect
            in
            { model | myMultiSelect = newSelect } ! [ cmd ]

Transform an MultiSelect.Model into an MultiSelect.View, which allows us to pipe View Setters on it.

myView : Model -> Html Msg
myView model =
    div
        []
        [ MultiSelect.view model.myMultiSelect -- pipe view setters here, for example |> setIsLocked 'your logic here'
        ]

Transforms an MultiSelect.View into Html MultiSelect.Msg

myView : Model -> Html Msg
myView model =
    div
        []
        [ MultiSelect.view model.myMultiSelect
            |> MultiSelect.render
            |> Html.map UpdateMyMultiSelect
        ]

ReInitialise your MultiSelect.Model.

Reset your MultiSelect.Model.

Set the initial option of your MultiSelect.Model.

Change the option of your MultiSelect.Model.

This function allows you to disable specific options.

Set whether your select is in error mode (red border).

Set whether your select is locked (disabled).

Set whether your select is clearable (x icon).

Set the default label, for example (-- NOTHING SELECTED --).

Give your select an id. Can be useful for DOM selectors (focus, WebComponents etc.)

Whether your select was changed. Useful if you want to disable save buttons unless there were changes etc.

Whether this select is currently open.

Get the initial option of your select.

Get the current option of your select. This is what you'd use to display the data somewhere outside of your select, or to send the data to the backend for example etc.

Useful if you need the id of the select in your update function, to set focus etc.