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
• Configuration
  • Configuration Options
• Outlined Select
• Disabled Select
• Required Select
• Disabled Option
• Select with Helper Text
• Select with Leading Icon
• Focus a Select

Resources

• Demo: Selects
• Material Design Guidelines: Text Fields
• MDC Web: Select
• Sass Mixins (MDC Web)

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

Configuration Options

Filled Select

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"
    ]

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"
    ]