Your basic checkbox

Input.checkbox Checkbox
    []
    { onChange = Check
    , checked = model.checkbox
    , label = el None [] (text "hello!")
    , options = []
    }

A checkbox that allows you to style the actual checkbox:

Input.styledCheckbox Checkbox
    []
    { onChange = Check
    , checked = model.checkbox
    , label = el None [] (text "hello!")
    , options = []
    , icon =
        -- A function which receives a checked bool
        -- and returns the element that represents the checkbox
        \checked ->
            let
                checkboxStyle =
                    if on then
                        CheckboxChecked
                    else
                        Checkbox
            in
            el checkboxStyle [] 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 20
    ]
    { onChange = ChooseLunch
    , selected = Just model.lunch
    , label = Input.labelAbove (text "Lunch")
    , options = []
    , choices =
        [ Input.styledChoice Burrito <|
            \selected ->
                Element.row None
                    [ spacing 5 ]
                    [ el None [] <|
                        if selected then
                            text ":D"
                        else
                            text ":("
                    , text "burrito"
                    ]
        , Input.choice Taco (text "Taco!")
        , Input.choice Gyro (text "Gyro")
        ]
    }

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

Add choices to your radio and select menus.

Add a key string to a radio option.

This is used to differentiate between separate radio menus.

It's not needed if the text of the labels are unique.

This function needs to be paired with either Input.autocomplete or Input.dropMenu.

Input.select Field
    [ padding 10
    , spacing 20
    ]
    { label = Input.labelAbove <| text "Lunch"


    -- model.selection is some state(value, a Msg constructor, and the focus) we store in our model.
    -- It can be created using Input.autocomplete or Input.dropMenu
    -- Check out the Form.elm example to see a complete version.
    , with = model.selection
    , max = 5
    , options = []
    , menu =
        Input.menuAbove SubMenu
            []
            [ Input.choice Taco (text "Taco!")
            , Input.choice Gyro (text "Gyro")
            , Input.styledChoice Burrito <|
                \selected ->
                    Element.row None
                        [ spacing 5 ]
                        [ el None [] <|
                            if selected then
                                text ":D"
                            else
                                text ":("
                        , text "burrito"
                        ]
            ]
    }

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.

Once you have this in your model, you can extract the current selected value from it using Input.selected model.autocompleteState.

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!

Once you have this in your model, you can extract the current selected value from it using Input.selected model.dropMenuState.

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.

Clear a selection.

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.