primait / pyxis-components / Prima.Pyxis.Form.Input

Configuration


type Input model msg

Represent the opaque Input configuration.

Configuration Methods

text : (model -> Maybe String) -> (String -> msg) -> Input model msg

Create an input[type="text"].

password : (model -> Maybe String) -> (String -> msg) -> Input model msg

Create an input[type="password"].

date : (model -> Maybe String) -> (String -> msg) -> Input model msg

Create an input[type="date"].

number : (model -> Maybe String) -> (String -> msg) -> Input model msg

Create an input[type="number"].

email : (model -> Maybe String) -> (String -> msg) -> Input model msg

Create an input[type="email"].

Rendering

render : model -> Input model msg -> List (Html msg)

Renders the Input.

import Html
import Prima.Pyxis.Form.Input as Input
import Prima.Pyxis.Form.Validation as Validation

...

type Msg =
    OnInput String

type alias Model =
    { username : Maybe String
    , isSubmitted : Bool
    }

...

view : Html Msg
view =
    Html.div
        []
        (Input.email .username OnInput
            |> Input.withClass "my-custom-class"
            |> Input.withValidation (Maybe.andThen validate << .username)
            |> Input.withIsSubmitted .isSubmitted
        )

validate : String -> Validation.Type
validate str =
    if String.isEmpty str then
        Just <| Validation.ErrorWithMessage "Username is empty".
    else
        Nothing

Options

withAttribute : Html.Attribute msg -> Input model msg -> Input model msg

Adds a generic Html.Attribute to the Input.

withClass : String -> Input model msg -> Input model msg

Adds a class to the Input.

withDefaultValue : Maybe String -> Input model msg -> Input model msg

Adds a default value to the Input. Useful to teach the component about it's pristine/touched state.

withDisabled : Basics.Bool -> Input model msg -> Input model msg

Adds a disabled Html.Attribute to the Input.

withId : String -> Input model msg -> Input model msg

Adds an id Html.Attribute to the Input.

withName : String -> Input model msg -> Input model msg

Adds a name Html.Attribute to the Input.

withMediumSize : Input model msg -> Input model msg

Adds a size of Medium to the Input.

withSmallSize : Input model msg -> Input model msg

Sets a size of Small to the Input.

withLargeSize : Input model msg -> Input model msg

Adds a size of Large to the Input.

withPlaceholder : String -> Input model msg -> Input model msg

Adds a placeholder Html.Attribute to the Input.

withOverridingClass : String -> Input model msg -> Input model msg

Adds a class to the Input which overrides all the previous.

withIsSubmitted : (model -> Basics.Bool) -> Input model msg -> Input model msg

Adds an isSubmitted predicate to the Input.

Group Options

withPrependGroup : List (Html msg) -> Input model msg -> Input model msg

Prepends an InputGroup with custom Html.

withAppendGroup : List (Html msg) -> Input model msg -> Input model msg

Appends an InputGroup with custom Html.

withGroupClass : String -> Input model msg -> Input model msg

Adds a class to the InputGroup which wraps the Input.

Event Options

withOnBlur : msg -> Input model msg -> Input model msg

Attaches the onBlur event to the Input.

withOnFocus : msg -> Input model msg -> Input model msg

Attaches the onFocus event to the Input.

Validation

withValidation : (model -> Maybe Prima.Pyxis.Form.Validation.Type) -> Input model msg -> Input model msg

Adds a Validation rule to the Input.