AvardaUi.Select

This module provides a customizable accessible select dropdown. It uses the builder pattern:

Start with new to create a base input.
Chain configuration functions like withPlaceholder or withIsRequired.
Finish with view to render it.

Creating a Select

type alias Model a =

Model a

Model type for the Select component. Use this in your own model.

type alias DashboardModel =
    { languageSelectModel : AvardaUi.Select.Model Language }

init : String -> Model a

Initialize the Select model.

init : DashboardModel
init =
    { languageSelectModel = AvardaUi.Select.init "language" }

type alias Msg a =

Msg a

Msg type for the Select component. Use this for the wrap msg in your own Msg type.

type DashboardMsg
    = HandleLanguageSelect (AvardaUi.Select.Msg Language)
    | NoUpdate

update : (Msg a -> msg) -> Msg a -> Model a -> ( Model a, Cmd msg )

Update function for the Select component. Call this in your update function to handle Select's internal messages

update : Model -> Msg -> ( Model, Cmd Msg )
update model msg =
    case msg of
        HandleLanguageSelect selectMsg ->
            let
                ( updatedSelectModel, selectCmd ) =
                    AvardaUi.Select.update
                        HandleLanguageSelect
                        selectMsg
                        model.languageSelectModel
            in
            ( { model | languageSelectModel = updatedSelectModel }, selectCmd )

new :

{ label : String

, selectModel : Model a

, optionToString : a -> String

}

-> Select a msg

Create a new Select component.

AvardaUi.Select.new
    { label = "Choose a language"
    , selectModel = dashboardModel.languageSelectModel
    , optionToString = .name
    }

view : (Msg a -> msg) -> Select a msg -> Html msg

Render the Select as HTML.

Always call this after you've built up the input with new and chained settings.

AvardaUi.Select.new {...}
    |> AvardaUi.Select.withIsRequired True
    |> AvardaUi.Select.view

Update with extra options

You can pass extra options / callbacks to this component using updateWith

updateWith :

List (UpdateOption a msg)

-> (Msg a -> msg)

-> Msg a

-> Model a

-> ( Model a, Cmd msg )

update : Model -> Msg -> ( Model, Cmd Msg )
update model msg =
    case msg of
        HandleLanguageSelect selectMsg ->
            let
                ( updatedSelectModel, selectCmd ) =
                    AvardaUi.Select.updateWith [ AvardaUi.Select.onSelect SaveLanguageToStorage ]
                        HandleLanguageSelect
                        selectMsg
                        model.languageSelectModel
            in
            ( { model | languageSelectModel = updatedSelectModel }, selectCmd )

onSelect : (a -> msg) -> UpdateOption a msg

Use for triggering a message when an option is selected.

scrollOptionIntoView : ScrollOptionIntoViewCmd msg -> UpdateOption a msg

Use to fix issue with scrolling option into view when used in ShadowDOM. elm/browser cannot find the element ID when this component is used by an app which uses ShadowDOM

type alias ScrollOptionIntoViewCmd msg =
    String -> Cmd msg

Setting options

setSelectedOption : a -> Model a -> Model a

Set the selected option.

setOptions : List a -> Select a msg -> Select a msg

Provide a list of options to the Select. Note that this needs to be used as a builder, when you are creating a Select, not on init

Getting selected option

getSelectedOption : Model a -> Maybe a

Get the currently selected option. If none is selected, returns Nothing.

Getting component state

getIsOpen : Model a -> Bool

Get information if Select is open or not.

Configuration

withMaybeError : Maybe String -> Select a msg -> Select a msg

Show an error message and mark the Select as invalid.

withIsRequired : Select a msg -> Select a msg

Mark the Select as required.

withIsDisabled : Bool -> Select a msg -> Select a msg

Disable the select. Visually dims and prevents user actions.

withBorderRadius : Float -> Select a msg -> Select a msg

Change the border radius of the Select.

withTopPx : Float -> Select a msg -> Select a msg

Adjust the gap between the Select and the dropdown menu.

withMenuMaxHeight : Int -> Select a msg -> Select a msg

Set a maximum height for the dropdown menu.

withCustomOptionViewFn : (a -> Html msg) -> Select a msg -> Select a msg

Provide a custom view function for rendering options.

withCustomSelectedOptionViewFn : (a -> Html msg) -> Select a msg -> Select a msg

Provide a custom view function for the selected option.

withAdditionalWrapperStyles : List Style -> Select a msg -> Select a msg

Add additional styles.

withAdditionalMenuStyles : List Style -> Select a msg -> Select a msg

Add additional menu container styles.

withContainerPosition : Position {} -> Select a msg -> Select a msg

Set the CSS position of the Select container.

withAriaLabel : String -> Select a msg -> Select a msg

Set a custom ARIA label (instead of label element).

withFloatingLabelBackgroundColor : Color -> Select a msg -> Select a msg

Sets the background color of the floating label. This is useful when the color of the background behind the select is something else then #FFFFFF.

avarda-ab/avarda-ui/2.5.0