AvardaUi.Input

Input field component for Avarda design system.

This module 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.

Input.new "username"
    { value = model.username
    , msg = UsernameChanged
    , 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.

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

Configuration

withPlaceholder : String -> Input msg -> Input msg

Add a placeholder to the input. Chain after new.

Input.new "username" {...}
    |> Input.withPlaceholder "Enter username"

withIsRequired : Bool -> Input msg -> Input msg

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

Input.new "username" {...}
    |> Input.withIsRequired True

withIsDisabled : Bool -> Input msg -> Input msg

Disable the input. Visually dims and prevents typing.

Input.new "username" {...}
    |> Input.withIsDisabled True

withInputType : String -> Input msg -> Input msg

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

Input.new "password" {...}
    |> Input.withInputType "password"

withMaxLength : Int -> Input msg -> Input msg

Limit the maximum number of characters.

Input.new "username" {...}
    |> Input.withMaxLength 20

withBorderRadius : Float -> Input msg -> Input msg

Adjust the border radius of the input box.

Input.new "username" {...}
    |> Input.withBorderRadius 12

withAutocomplete : String -> Input msg -> Input msg

Enable autocomplete with a given string like "username" or "off".

Input.new "username" {...}
    |> Input.withAutocomplete "username"

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

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

Input.new "username" {...}
    |> Input.withAttributes [ Attributes.name "username" ]

withAdditionalWrapperStyles : List Style -> Input msg -> Input msg

Add custom CSS styles to the outer wrapper element.

Input.new "username" {...}
    |> Input.withAdditionalWrapperStyles [ Css.marginTop (Css.px 16) ]

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

Listen for key presses and map them to messages. Useful for handling Enter/Escape in forms.

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

Validation and Messaging

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

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

Input.new "username" {...}
    |> Input.withMaybeError (Just "This field is required")

withHint : String -> Input msg -> Input msg

Add a hint text below the input (shown when there is no error).

Input.new "username" {...}
    |> Input.withHint "Must be at least 8 characters"

Children

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

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

Input.new "username" {...}
    |> Input.withLeftChild (Icons.user [])

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

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

Input.new "username" {...}
    |> Input.withRightChild (Icons.clear [ onClick Clear ])

Modules

AvardaUi.Input