Select provides a single-option select menus.

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

Table of Contents

• Resources
• Basic Usage
• Configuration
  • Configuration Options
• Select Option
• Disabled Select Option

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

Select Option

Disabled Select Option

To disable one select's option, set its setDisabled configuration option to True.

SelectOption.selectOption
    (SelectOption.config |> SelectOption.setDisabled True)
    [ text "" ]

This is particularly useful on the first emply option if you have a select that must be filled but is not initially filled.