The type for a Field that can be rendered using input or inputStyled.

The type for a Field that represents a set of options.

Can be rendered as a dropdown:

• select
• selectStyled

Or as a set of radio buttons:

• radio
• radioStyled

Renders the Field to Html.

These Fields are defined using Form.Field using functions like Form.Field.text, Form.Field.textarea, Form.Field.int, and Form.Field.date.

This will render a form field HTML element with all of the appropriate attributes.

Often it's convenient to create a helper function that adds labels and renders the field's error messages with any styles and layout conventions in your application.

fieldView :
    Form.Context String input
    -> String
    -> Validation.Field String parsed FieldView.Input
    -> Html msg
fieldView context label field =
    Html.div []
        [ Html.label []
            [ Html.text (label ++ " ")
            , FieldView.input [] field
            , errorsView context field
            ]
        ]


errorsView :
    Form.Context String input
    -> Validation.Field String parsed kind
    -> Html msg
errorsView { submitAttempted, errors } field =
    if submitAttempted || Validation.statusAtLeast Validation.Blurred field then
        errors
            |> Form.errorsForField field
            |> List.map (\error -> Html.li [ Html.Attributes.style "color" "red" ] [ Html.text error ])
            |> Html.ul []


    else
        Html.ul [] []

Render an Options Field as a set of radio elements.

Radio buttons are highly customizable. Even more so than dropdowns (<select> elements) because you can render HTML for each entry rather than just text.

To render using this radio function, you pass in

• list of HTML attributes to add to the top-level <fieldset> that is rendered around the radio inputs.
• A function that gives you the option render, and a function to render the radio element itself given a list of HTML attributes.
• The Options Field to render the radio buttons for

Example:

import Form.FieldView as FieldView
import Html


type Size
    = Small
    | Medium
    | Large


dropdownView field =
    Html.div []
        [ FieldView.radio []
            (\size toRadio ->
                Html.div []
                    [ Html.label []
                        [ Html.text (sizeToString size)
                        , toRadio []
                        ]
                    ]
            )
            field
        ]


sizeToString : Size -> String
sizeToString size =
    case size of
        Small ->
            "Small"


        Medium ->
            "Medium"


        Large ->
            "Large"

There are no render helpers for hidden fields because the Form.renderHtml helper functions automatically render hidden fields for you.

Render an Options field as a select element.

import Form.FieldView as FieldView


type Size
    = Small
    | Medium
    | Large


dropdownView field =
    FieldView.select []
        (\size ->
            ( -- we can optionally add HTML attributes here
              []
            , sizeToString size
            )
        )
        field


sizeToString : Size -> String
sizeToString size =
    case size of
        Small ->
            "Small"


        Medium ->
            "Medium"


        Large ->
            "Large"

Gives you a submit button that will submit the form with a specific value for the given Field.

Same as radio, but renders to Html.Styled.

Same as select, but renders to Html.Styled.

Same as input, but renders to Html.Styled.

Gives you a submit button that will submit the form with a specific value for the given Field.