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.Option.

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.Option as SelectOption


type Msg
    = ValueChanged String


main =
    Select.filled
        (Select.config
            |> Select.setLabel (Just "Fruit")
            |> Select.setValue (Just "")
            |> Select.setOnChange ValueChanged
        )
        [ SelectOption.selectOption
            (SelectOption.config |> SelectOption.setValue (Just ""))
            [ text "" ]
        , SelectOption.selectOption
            (SelectOption.config
                |> SelectOption.setValue (Just "Apple")
            )
            [ text "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
    [ SelectOption.selectOption
        (SelectOption.config
            |> SelectOption.setValue (Just "")
        )
        [ text "" ]
    ]

Disabled Select

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

Select.filled (Select.config |> Select.setDisabled True) []

Required Select

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

Select.filled (Select.config |> Select.setRequired True) []

Select with helper text

TODO(select-with-helper-text)

Select with leading icon

TODO(select-with-leading-icon)

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