The list item that will be represented in the list-box.

The item property is the value representation of the list-box item that will be used in an Action.

The label is the text representation that will be shown in the drop-down list.

type Tool
    = Screwdriver
    | Hammer
    | Drill


toolItems : MenuItem Tool
toolItems =
    [ { item = Screwdriver, label = "Screwdriver" }
    , { item = Hammer, label = "Hammer" }
    , { item = Drill, label = "Drill" }
    ]


yourView model =
    view
        (single Nothing
            |> menuItems toolItems
            |> state model.selectState
        )
        (selectIdentifier "SingleSelectExample")

The select actions that your program can react to.

InputChange -> The value of the input has changed

Select -> There has been a selection of a MenuItem

DeselectMulti -> A multi variant selected tag has been deselected

ClearSingleSelectItem -> A single variant selected menu item has been deselected

An initial state for the State type.

The items that will appear in the menu list.

NOTE: When using the Multi select variant, selected items will be visually removed from the menu list.

  items =
      [ { item = SomeValue, label = "Some label" } ]


  yourView =
      view
          (Single Nothing |> menuItems items)
          (selectIdentifier "1234")

The text that will appear as an input placeholder.

    yourView model =
        view
            (single Nothing |> placeholder "some placeholder")
            (selectIdentifier "1234")

The ID for the rendered Select input

NOTE: It is important that the ID's of all selects that exist on a page remain unique.

yourView model =
    view
        (single Nothing)
        (selectIdentifier "someUniqueId")

Sets the state value.

Should be a persisted value that lives in your model.

    model : Model
    model =
        { selectState = initState }


    yourView : Model
    yourView model =
        view
            (single Nothing |> state model.selectState)
            (selectIdentifier "1234")

Handle all Msg events

yourUpdate msg model =
    case msg of
        SelectMsg selectMsg ->
            update selectMsg model.selectState

Renders the select

    yourView model =
        view
            (single Nothing)
            (selectIdentifier "SingleSelectExample")

Select a single item.

Allows a 'single' variant selected menu item to be deselected.

    yourView model =
        view
            (single Nothing |> clearable True)
            (selectIdentifier "SingleSelectExample")

Select multiple items.

yourView model =
    view
        (multi initMultiConfig [])
        (selectIdentifier "1234")

Limit the width of a multi select tag.

Handy for when the selected item text is excessively long. Text that breaches the set width will display as an ellipses.

Width will be in px values.

    yourView model =
        view
            (multi (initMultiConfig |> truncateMultitag 30) [])
            (selectIdentifier "1234")

Set the color for the multi select tag.

    yourView =
        view
            (multi (initMultiConfig |> multiTagColor (Css.hex "#E1E2EA") [])
            (selectIdentifier "1234")

Starting value for the 'multi' variant.

    yourView model =
        view
            (multi initMultiConfig)
            (selectIdentifier "1234")

Disable the the select input

    yourView model =
        view
            (single Nothing |> disabled True)
            (selectIdentifier "SingleSelectExample")

Opt in to JS optimizations for the best performance.

    model : Model model =
        { selectState = initState |> jsOptimize True }

Install the JS package:

npm

npm install @confidenceman02/elm-select

github packages

add to projects .npmrc

@confidenceman02:registry=<https://npm.pkg.github.com/>

install

npm install @confidenceman02/elm-select

Import script

In the Elm init file

import { Elm } from "./src/Main";
import "@confidenceman02/elm-select/dynamic"


Elm.Main.init({node, flags})

Alternatively, you can import the minified JS in the index.html file

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Viewer</title>


        <script src="/node_modules/@confidenceman02/elm-select/dist/dynamic.min.js"></script>
      </head>
      <body>
        <main></main>
        <script src="index.js"></script>
      </body>
    </html>

The ID for the label that describes the select. It is best practice to render the select with a label.

    yourView model =
        view
            (single Nothing |> labelledBy "selectLabelId")
            (selectIdentifier "SingleSelectExample")

Displays the animated loading icon. This would be useful if you are loading menu options asynchronously, like from a server.

    yourView model =
        view
            (single Nothing |> loading True)
            (selectIdentifier "SingleSelectExample")