AvardaUi.SelectNative

A native styled HTML <select> without custom dropdown menu. 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 SelectNative

new :

String

-> { label : String

, optionToStringValue : a -> String

, stringValueToOption : String -> a

, onChange : a -> msg

, placeholder : String

, selectedOption : Maybe a

}

-> Select a msg

Create a new SelectNative.

SelectNative.new "country"
    { label = "Country"
    , optionToStringValue = .code
    , stringValueToOption = countryToString
    , onChange = SelectedCountry
    , placeholder = "Choose country"
    , selectedOption = Nothing
    }

view : Select a msg -> Html msg

Render the SelectNative as HTML.

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

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

Configuration

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

Set a custom ARIA label.

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

Adjust the border radius.

withCustomOptionSorting : (List a -> List a) -> Select a msg -> Select a msg

Provide a custom sort function for the option list(s).

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

Disable the input. Visually dims and prevents user actions.

withIsRequired : Bool -> Select a msg -> Select a msg

Mark the select as required.

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

Show an error message and mark the select as invalid.

withOptionToLabel : (a -> String) -> Select a msg -> Select a msg

Provide a custom label function for options.

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.

Setting Options

setBasicOptions : List a -> Select a msg -> Select a msg

Set a flat list of options.

setOptionGroups : List (List a) -> Select a msg -> Select a msg

Set a grouped list of options. Each inner list will render as an <optgroup>.

avarda-ab/avarda-ui/3.1.0

AvardaUi.SelectNative

Creating a SelectNative

Configuration

Setting Options

Modules