Your basic checkbox

Input.checkbox CheckBoxStyle [ ]
    { checked = True
    , onChange = ChangeMsg
    , label = Input.labelAbove (text "hello!")
    , options =
        -- Options are where we can add error messages
        -- or disable input for this element
        []
    }

-- For more involved checkbox styling

Input.checkboxWith CheckBoxStyle [ ]
    { onChange = Check
    , checked = model.checkbox
    , label = text "hello!"
    , options = []
    , icon =
        \on ->
            el
                (if on then
                    CheckboxChecked
                 else
                    Checkbox
                )
                []
                empty
    }

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 Field
    [ padding 10
    , spacing 5
    ]
    { onChange = ChooseLunch
    , selected = Just model.lunch
    , label = Input.labelAbove <| text "Lunch"
    , errors = Input.noErrors
    , disabled = Input.enabled
    , options =
        [ Input.optionWith None
            []
            { value = Burrito
            , icon =
                (\selected ->
                    if selected then
                        text ":D"
                    else
                        text ":("
                )
            , label = Input.labelRight <| text "burrito"
            }
        , Input.option Taco (text "Taco!")
        , Input.option Gyro (text "Gyro")
        ]
    }

Same as radio, but arranges the options in a row instead of a column

Add choices to your radio and select menus.

Create a select menu which shows options that are filtered by the text entered.

This is the part which goes in your model.

You'll need to update it using Input.updateSelection.

Create a select menu which shows all options and allows the user to select one.

Use this if you only have 3-5 options. If you have a ton of options, use Input.autocomplete instead!

Create a dropdown menu.

This is used with Input.select

A dropdown menu that goes up! A dropup!

Get the selected value from an autocomplete or a dropMenu type that is used for your Input.select element.

Disable an input. This means that the input will not receive focus and can't be changed by the user.

Does not change the styling of the inputs unless they're controlled by the browser like a basic checkbox or standard radio button.

Put the focus on this input when the page loads.

Only one input should ahve this option turned on.

Give a hint to the browser on what data can be used to autofill this input.

This can be very useful to allow the browser to autofill address and credit card forms.

For more general information check out the autocomplete attribute of input elements

Allow spellcheck for this input. Only works on text based inputs.