AvardaUi.Input

This component provides a styled input with support for floating labels, hints, error messages, and optional left/right children. 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 an Input

new :

String

-> { value : String

, msg : String -> msg

, label : String

}

-> Input msg

Create a new input with required fields: id, value, msg, and label.

This gives you a base input that you can configure further with withX functions.

AvardaUi.Input.new "username"
    { value = model.username
    , msg = InsertedUsername
    , label = "Username"
    }

view : Input msg -> Html msg

Render the configured input as HTML.

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

AvardaUi.Input.new "username" {...}
    |> AvardaUi.Input.withPlaceholder "Enter username"
    |> AvardaUi.Input.withIsRequired True
    |> AvardaUi.Input.view

Configuration

withPlaceholder : String -> Input msg -> Input msg

Add a placeholder to the input.

withIsRequired : Bool -> Input msg -> Input msg

Mark the input as required. This adds a * to the label and sets required=true.

withIsDisabled : Bool -> Input msg -> Input msg

Disable the input. Visually dims and prevents typing.

withInputType : String -> Input msg -> Input msg

Change the input type (e.g. "text", "password", "email").

withMaxLength : Int -> Input msg -> Input msg

Limit the maximum number of characters.

withBorderRadius : Float -> Input msg -> Input msg

Adjust the border radius of the input box.

withAutocomplete : String -> Input msg -> Input msg

Enable autocomplete with a given string like "username". It is set to "off" by default.

withAttributes : List (Attribute msg) -> Input msg -> Input msg

Attach additional HTML attributes to the underlying <input /> element. For example name or data-* attributes.

withOnKeyDown : List ( KeyboardKey, msg ) -> Input msg -> Input msg

Listen for key presses and map them to messages. It uses the KeyboardKey type from AvardaUi.Util.KeyPress module.

AvardaUi.Input.new "username" {...}
    |> AvardaUi.Input.withOnKeyDown [ ( KeyPressUtil.Enter, HandleSubmit ) ]

withMaybeError : Maybe String -> Input msg -> Input msg

Show an error message and mark the input invalid. Replaces any active hint text.

withHint : String -> Input msg -> Input msg

Add a hint text below the input.

withLeftChild : Html msg -> Input msg -> Input msg

Add a left-side child element, e.g. an icon.

withRightChild : Html msg -> Input msg -> Input msg

Add a right-side child element, e.g. a clear button.

avarda-ab/avarda-ui/2.2.0

AvardaUi.Input

Creating an Input

Configuration

Modules