mdgriffith / stylish-elephants / Element.Input

button : List (Element.Attribute msg) -> { onPress : Maybe msg, label : Element msg } -> Element msg

A standard button.

The onPress handler will be fired either onClick or when the element is focused and the enter key has been pressed.

import Element.Input as Input

Input.button []
    { onPress = Just ClickMsg
    , label = text "My Button"
    }

onPress takes a Maybe msg. If you provide the value Nothing, then the button will be disabled.

checkbox : List (Element.Attribute msg) -> { onChange : Basics.Bool -> msg, icon : Basics.Bool -> Element msg, checked : Basics.Bool, label : Label msg } -> Element msg

defaultCheckbox : Basics.Bool -> Element msg

Text Input

text : List (Element.Attribute msg) -> { onChange : String -> msg, text : String, placeholder : Maybe (Placeholder msg), label : Label msg } -> Element msg


type Placeholder msg

placeholder : List (Element.Attribute msg) -> Element msg -> Placeholder msg

username : List (Element.Attribute msg) -> { onChange : String -> msg, text : String, placeholder : Maybe (Placeholder msg), label : Label msg } -> Element msg

newPassword : List (Element.Attribute msg) -> { onChange : String -> msg, text : String, placeholder : Maybe (Placeholder msg), label : Label msg, show : Basics.Bool } -> 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.

A password takes all the arguments a normal Input.text would, and also show, which will remove the password mask (e.g. **** vs pass1234)

currentPassword : List (Element.Attribute msg) -> { onChange : String -> msg, text : String, placeholder : Maybe (Placeholder msg), label : Label msg, show : Basics.Bool } -> Element msg

email : List (Element.Attribute msg) -> { onChange : String -> msg, text : String, placeholder : Maybe (Placeholder msg), label : Label msg } -> Element msg

search : List (Element.Attribute msg) -> { onChange : String -> msg, text : String, placeholder : Maybe (Placeholder msg), label : Label msg } -> Element msg

spellChecked : List (Element.Attribute msg) -> { onChange : String -> msg, text : String, placeholder : Maybe (Placeholder msg), label : Label msg } -> Element msg

Multiline Text

multiline : List (Element.Attribute msg) -> { onChange : String -> msg, text : String, placeholder : Maybe (Placeholder msg), label : Label msg, spellcheck : Basics.Bool } -> Element msg

Slider

slider : List (Element.Attribute msg) -> { onChange : Basics.Float -> msg, label : Label msg, min : Basics.Float, max : Basics.Float, value : Basics.Float, thumb : Thumb, step : Maybe Basics.Float } -> Element msg

A slider input, good for capturing float values.

Input.slider
    [ Element.height (Element.px 30)
    -- Here is where we're creating/styling the "track"
    , Element.behindContent
        (Element.el
            [ Element.width Element.fill
            , Element.height (Element.px 2)
            , Element.centerY
            , Background.color grey
            , Border.rounded 2
            ]
            Element.none
        )
    ]
    { onChange = AdjustValue
    , label = Input.labelAbove [] (text "My Slider Value")
    , min = 0
    , max = 75
    , step = Nothing
    , value = model.sliderValue
    , thumb =
        Input.defaultThumb
    }

The thumb is the icon that you can move around.

The slider can be vertical or horizontal depending on the width/height of the slider.

Note: If you want a slider for an Int value:


type Thumb

thumb : List (Element.Attribute Basics.Never) -> Thumb

defaultThumb : Thumb

Radio Buttons

radio : List (Element.Attribute msg) -> { onChange : option -> msg, options : List (Option option msg), selected : Maybe option, label : Label msg } -> Element msg

Input.radio
    [ padding 10
    , spacing 20
    ]
    { onChange = 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 (Element.Attribute msg) -> { onChange : option -> msg, options : List (Option option msg), selected : Maybe option, label : Label msg } -> Element msg

Same as radio, but displayed as a row


type Option value msg

Add choices to your radio and select menus.

option : value -> Element msg -> Option value msg

optionWith : value -> (OptionState -> Element msg) -> Option value msg


type OptionState
    = Idle
    | Focused
    | Selected

Labels


type Label msg

Every input has a required label.

labelAbove : List (Element.Attribute msg) -> Element msg -> Label msg

labelBelow : List (Element.Attribute msg) -> Element msg -> Label msg

labelLeft : List (Element.Attribute msg) -> Element msg -> Label msg

labelRight : List (Element.Attribute msg) -> Element msg -> Label msg

focusedOnLoad : Element.Attribute msg