Select provides a single-option select menus.

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

Table of Contents

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

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 = "" })
            [ text "" ]
        )
        [ SelectItem.selectItem
            (SelectItem.config { value = "Apple" })
            [ text "Apple" ]
        ]

Configuration

Configuration Options

Select Item

Disabled Select Item

Select items may be disabled by setting their setDisabled configuration option to True.

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