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 = ClickMsg
    , label = text "My Button"
    }

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

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)

If spell checking is available, this input will be spellchecked.

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.

• height fill and width (px someWidth) will cause the slider to be vertical.
• height (px someHeight) and width (px someWidth) where someHeight > someWidth will also do it.
• otherwise, the slider will be horizontal.

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

• set step to be Just 1, or some other whole value
• value = toFloat model.myInt
• And finally, round the value before making a message onChange = round >> AdjustValue

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")
        ]
    }

Same as radio, but displayed as a row

Add choices to your radio and select menus.

Every input has a required label.

Sometimes you may need to have a label which is not visible, but is still accessible to screen readers.

Seriously consider a visible label before using this.

The situations where a hidden label makes sense:

• A searchbar with a search button right next to it.
• A table of inputs where the header gives the label.

Basically, a hidden label works when there are other contextual clues that sighted people can pick up on.