This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
Build type-safe composable forms in Elm
version 1.0.1
license BSD3
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 1.0.1
Committed At 2018-06-26 07:01:58 UTC
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.1.1 <= v < 6.0.0 5.1.1

README

composable-form Build Status

This package allows you to build forms that are

  • Composable: they can be extended and embedded in other forms.
  • Type-safe: they can produce any kind of type when submitted.
  • Maintainable: you do not need view code nor a msg for each form field.
  • Concise: field validation and update logic are defined in a single place.
  • Consistent: validation errors are always up-to-date with the current field values.
  • Extensible: you can create your own custom fields and custom form renderers.

Here is an example that defines a login form:

module Form.Login exposing (Output, Values, form)

import Data.EmailAddress as EmailAddress exposing (EmailAddress)
import Form exposing (Form)
import Form.Value exposing (Value)


type alias Values =
    { email : Value String
    , password : Value String
    , rememberMe : Value Bool
    }


type alias Output =
    { email : EmailAddress
    , password : String
    , rememberMe : Bool
    }


form : Form Values Output
form =
    let
        emailField =
            Form.emailField
                { parser = EmailAddress.parse
                , value = .email
                , update = \value values -> { values | email = value }
                , attributes =
                    { label = "E-Mail"
                    , placeholder = "some@email.com"
                    }
                }

        passwordField =
            Form.passwordField
                { parser = Ok
                , value = .password
                , update = \value values -> { values | password = value }
                , attributes =
                    { label = "Password"
                    , placeholder = "Your password"
                    }
                }

        rememberMeCheckbox =
            Form.checkboxField
                { parser = Ok
                , value = .rememberMe
                , update = \value values -> { values | rememberMe = value }
                , attributes =
                    { label = "Remember me" }
                }
    in
    Form.succeed Output
        |> Form.append emailField
        |> Form.append passwordField
        |> Form.append rememberMeCheckbox

Read the Form module documentation to understand how this code works.

Demo / Examples

Try out the live demo and/or check out the examples.

Contributing / Feedback

Feel free to fork and open issues or pull requests. You can also contact me (@hecrj) on the Elm Slack.