Awesome Open Source
Awesome Open Source

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: everything is safely tied together with compiler guarantees.
  • 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 write custom view code.

Here is an example that defines a login form:

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

import EmailAddress exposing (EmailAddress)
import Form exposing (Form)


type alias Values =
    { email : String
    , password : String
    , rememberMe : 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 }
                , error = always Nothing
                , attributes =
                    { label = "E-Mail"
                    , placeholder = "[email protected]"
                    }
                }

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

        rememberMeCheckbox =
            Form.checkboxField
                { parser = Ok
                , value = .rememberMe
                , update = \value values -> { values | rememberMe = value }
                , error = always Nothing
                , 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.

Also, feel free to play with the package using this Ellie snippet.

Contributing / Feedback

Feel free to fork and open issues or pull requests. You can also come to chat in the #forms channel on the Elm Slack, feel free to contact me (@hecrj) there!


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
elm (368
form (178
forms (170
form-validation (63
type-safe (22