aforemny / material-components-web-elm / Material.Select

Select provides a single-option select menus.

This module concerns the container select. If you are looking for information about select options, refer to Material.Select.Item.

Table of Contents

Resources

Basic Usage

import Material.Select as Select
import Material.Select.Item as SelectItem

type Msg
    = ValueChanged String

main =
    Select.filled
        (Select.config
            |> Select.setLabel (Just "Fruit")
            |> Select.setSelected (Just "")
            |> Select.setOnChange ValueChanged
        )
        (SelectItem.selectItem
            (SelectItem.config { value = "" })
            ""
        )
        [ SelectItem.selectItem
            (SelectItem.config { value = "Apple" })
            "Apple"
        ]

Configuration


type Config a msg

Configuration of a select

config : Config a msg

Default configuration of a select

Configuration Options

setOnChange : (a -> msg) -> Config a msg -> Config a msg

Specify a message when the user changes the select

setLabel : Maybe String -> Config a msg -> Config a msg

Specify a select's label

setSelected : Maybe a -> Config a msg -> Config a msg

Specify a select's selected value

setDisabled : Basics.Bool -> Config a msg -> Config a msg

Specify whether a select is disabled

Disabled selects cannot be interacted with an have no visual interaction effect.

setRequired : Basics.Bool -> Config a msg -> Config a msg

Specify whether a select is required

setValid : Basics.Bool -> Config a msg -> Config a msg

Specify whether a select is valid

setLeadingIcon : Maybe (Icon.Internal.Icon msg) -> Config a msg -> Config a msg

Specify a select's leading icon

setAttributes : List (Html.Attribute msg) -> Config a msg -> Config a msg

Specify additional attributes

Filled Select

filled : Config a msg -> Item.SelectItem a msg -> List (Item.SelectItem a msg) -> Html msg

Filled select view function

Outlined Select

Instead of a filled select, you may choose a select with a outline by using the outlined view function.

Select.outlined Select.config
    (SelectItem.selectItem
        (SelectItem.config { value = "" })
        ""
    )
    [ SelectItem.selectItem
        (SelectItem.config { value = "Apple" })
        "Apple"
    ]

outlined : Config a msg -> Item.SelectItem a msg -> List (Item.SelectItem a msg) -> Html msg

Outlined select view function

Disabled Select

To disable a select, set its setDisabled configuration option to True.

Select.filled (Select.config |> Select.setDisabled True)
    (SelectItem.selectItem (SelectItem.config { value = "" })
        ""
    )
    []

Required Select

To mark a select as required, set its setRequired configuration option to True.

Select.filled (Select.config |> Select.setRequired True)
    (SelectItem.selectItem (SelectItem.config { value = "" })
        ""
    )
    []

Select with Helper Text

TODO(select-with-helper-text)

-- import Select.HelperText as SelectHelperText
main =
    --Html.div []
    --    [ Select.filled Select.config
    --        (SelectItem.item
    --            (SelectItem.config { value = "" })
    --            ""
    --        )
    --        [ SelectItem.item
    --            (SelectItem.config { value = "Apple" })
    --            ""
    --        ]
    --    , SelectHelperText.helperText
    --        (SelectHelperText.config
    --            |> SelectHelperText.setValid False
    --            |> SelectHelperText.setPersistent True
    --        )
    --        [ text "Helper text" ]
    --    ]
    text "TODO"

Select with Leading Icon

To have a select display a leading icon, use its setLeadingIcon configuration option to specify a value of Icon.

This library natively supports Material Icons. However, you may also include SVG or custom icons such as FontAwesome.

See Material.Select.Icon for more information.

Select.filled
    (Select.config
        |> Select.setLeadingIcon
            (Just (SelectIcon.icon "favorite"))
    )
    (SelectItem.selectItem
        (SelectItem.config { value = "" })
        ""
    )
    [ SelectItem.selectItem
        (SelectItem.config { value = "Apple" })
        "Apple"
    ]

Focus a Select

You may programatically focus a select by assigning an id attribute to it and use Browser.Dom.focus.

Select.filled
    (Select.config
        |> Select.setAttributes
            [ Html.Attributes.id "my-select" ]
    )
    (SelectItem.selectItem
        (SelectItem.config { value = "" })
        ""
    )
    [ SelectItem.selectItem
        (SelectItem.config { value = "Apple" })
        "Apple"
    ]