mdgriffith/stylish-elephants/3.0.1

NOTE: this package is not compatible with Elm 0.19.1

Element.Input

Inputs

button : List (Attribute msg) -> Button msg -> Element msg

A standard button.

The onPress message will be sent on either onClick or when the enter key has been pressed.

The message will fire exactly once per enter key press when the key is lifted.

type alias Button msg =
{ onPress : Maybe msg
, label : Element msg
}
checkbox : List (Attribute msg) -> Checkbox msg -> Element msg

Your basic checkbox

type alias Checkbox msg =
{ onChange : Maybe (Bool -> msg)
, icon : Maybe (Element msg)
, checked : Bool
, label : Label msg
, notice : Maybe (Notice msg)
}
text : List (Attribute msg) -> Text msg -> Element msg
type alias Text msg =
{ onChange : Maybe (String -> msg)
, text : String
, placeholder : Maybe (Placeholder msg)
, label : Label msg
, notice : Maybe (Notice msg)
}
type Placeholder msg
placeholder : List (Attribute msg) -> Element msg -> Placeholder msg
username : List (Attribute msg) -> Text msg -> Element msg
newPassword : List (Attribute msg) -> Text msg -> Element msg

A password input that allows the browser to autofill.

It's newPassword instead of just password because it gives the browser a hint on what type of password input it is.

currentPassword : List (Attribute msg) -> Text msg -> Element msg
email : List (Attribute msg) -> Text msg -> Element msg
multiline : List (Attribute msg) -> Text msg -> Element msg
spellcheckedMultiline : List (Attribute msg) -> Text msg -> Element msg
radio : List (Attribute msg) -> Radio option msg -> Element msg
Input.radio
    [ padding 10
    , spacing 20
    ]
    { onChange = Just ChooseLunch
    , selected = Just model.lunch
    , label = Input.labelAbove (text "Lunch")
    , options =
        [ Input.styledChoice Burrito <|
            \selected ->
                Element.row
                    [ spacing 5 ]
                    [ el None [] <|
                        if selected then
                            text ":D"
                        else
                            text ":("
                    , text "burrito"
                    ]
        , Input.option Taco (text "Taco!")
        , Input.option Gyro (text "Gyro")
        ]
    }
radioRow : List (Attribute msg) -> Radio option msg -> Element msg

Same as radio, but displayed as a row

type alias Radio option msg =
{ onChange : Maybe (option -> msg)
, options : List (Option option msg)
, selected : Maybe option
, label : Label msg
, notice : Maybe (Notice msg)
}
type Option value msg

Add choices to your radio and select menus.

option : value -> Element msg -> Option value msg
select : List (Attribute msg) -> Select option msg -> Element msg
type alias Select option msg =
{ onChange : Maybe (option -> msg)
, menu : Menu option msg
, selected : Maybe option
, label : Label msg
, notice : Maybe (Notice msg)
}

Labels and Notices

type Label msg
labelAbove : List (Attribute msg) -> Element msg -> Label msg
labelBelow : List (Attribute msg) -> Element msg -> Label msg
labelLeft : List (Attribute msg) -> Element msg -> Label msg
labelRight : List (Attribute msg) -> Element msg -> Label msg
type Notice msg
warningAbove : List (Attribute msg) -> Element msg -> Notice msg
warningBelow : List (Attribute msg) -> Element msg -> Notice msg
warningLeft : List (Attribute msg) -> Element msg -> Notice msg
warningRight : List (Attribute msg) -> Element msg -> Notice msg
errorAbove : List (Attribute msg) -> Element msg -> Notice msg
errorBelow : List (Attribute msg) -> Element msg -> Notice msg
errorLeft : List (Attribute msg) -> Element msg -> Notice msg
errorRight : List (Attribute msg) -> Element msg -> Notice msg
type Placeholder msg
placeholder : List (Attribute msg) -> Element msg -> Placeholder msg