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.
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 of a select
config : Config a msg
Default configuration of a select
setOnChange : (a -> msg) -> Config a msg -> Config a msg
Specify a message when the user changes the select
setLabel : Maybe String -> Config a msg -> Config a msg
Specify a select's label
setSelected : Maybe a -> Config a msg -> Config a msg
Specify a select's selected value
setDisabled : Basics.Bool -> Config a msg -> Config a msg
Specify whether a select is disabled
Disabled selects cannot be interacted with an have no visual interaction effect.
setRequired : Basics.Bool -> Config a msg -> Config a msg
Specify whether a select is required
setValid : Basics.Bool -> Config a msg -> Config a msg
Specify whether a select is valid
setLeadingIcon : Maybe (Icon.Internal.Icon msg) -> Config a msg -> Config a msg
Specify a select's leading icon
setAttributes : List (Html.Attribute msg) -> Config a msg -> Config a msg
Specify additional attributes
filled : Config a msg -> Item.SelectItem a msg -> List (Item.SelectItem a msg) -> Html msg
Filled select view function
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"
]
outlined : Config a msg -> Item.SelectItem a msg -> List (Item.SelectItem a msg) -> Html msg
Outlined select view function
To disable a select, set its setDisabled
configuration option to True
.
Select.filled (Select.config |> Select.setDisabled True)
(SelectItem.selectItem (SelectItem.config { value = "" })
""
)
[]
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 = "" })
""
)
[]
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"
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"
]
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"
]