MDC Select provides Material Design single-option select menus. It supports using the browser's native <select> element, or a MDC Menu. It is fully accessible, and fully RTL-aware.

Table of Contents

• Resources
• Basic Usage
• Outlined Select
• Disabled Select
• Required Select
• Disabled Option
• Select with helper text
• Select with leading icon

Resources

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

Basic Usage

import Material.Select
    exposing
        ( select
        , selectConfig
        , selectOption
        , selectOptionConfig
        )


type Msg
    = ValueChanged String


main =
    filledSelect
        { selectConfig
            | label = "Fruit"
            , value = Just ""
            , onChange = Just ValueChanged
        }
        [ selectOption
            { selectOptionConfig | value = "" }
            [ text "" ]
        , selectOption
            { selectOptionConfig | value = "Apple" }
            [ text "Apple" ]
        ]

Outlined Select

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

outlinedSelect selectConf
    [ selectOption selectOptionConf "" ]

Disabled Select

To disable a select, set its disabled configuration field to True.

filledSelect
    { selectConfig | disabled = True }
    [ selectOption { selectOptionConfig | value = "" }
        [ text "" ]
    ]

Required Select

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

filledSelect
    { selectConfig | required = True }
    [ selectOption { selectOptionConfig | value = "" }
        [ text "" ]
    ]

Disabled Option

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

selectOption { selectOptionConfig | disabled = 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.

Select with helper text

TODO

Select with leading icon

TODO