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.

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.

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

Same as radio, but displayed as a row

Add choices to your radio and select menus.

Every input has a required label.

As well, for every input except buttons, you can optionally add a warning or an error.

The proper accessibility markup is applied in both cases so that screen readers can see the error state.