https://github.com/hecrj/composable-form

Build type-safe composable forms in Elm
https://github.com/hecrj/composable-form

composable elm form form-validation forms type-safe

Last synced: 4 days ago
JSON representation

Build type-safe composable forms in Elm

• Host: GitHub
• URL: https://github.com/hecrj/composable-form
• Owner: hecrj
• License: bsd-3-clause
• Created: 2018-04-13T21:52:27.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-08-21T22:31:35.000Z (over 2 years ago)
• Last Synced: 2024-12-07T19:11:45.389Z (15 days ago)
• Topics: composable, elm, form, form-validation, forms, type-safe
• Language: Elm
• Homepage: http://package.elm-lang.org/packages/hecrj/composable-form/latest
• Size: 849 KB
• Stars: 199
• Watchers: 12
• Forks: 20
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# composable-form [![Build Status](https://travis-ci.org/hecrj/composable-form.svg?branch=master)](https://travis-ci.org/hecrj/composable-form)

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:

```elm

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][form-docs] to understand how this code works.

[form-docs]: http://package.elm-lang.org/packages/hecrj/composable-form/latest/Form

[ellie-example]: https://ellie-app.com/3Q3ydLznQRra1

## Demo / Examples

Try out the [live demo](https://hecrj.github.io/composable-form) and/or

[check out the examples](https://github.com/hecrj/composable-form/tree/master/examples/src/Page).

Also, feel free to play with the package using [this Ellie snippet][ellie-example].

## 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][elm-slack], feel free to contact me (@hecrj) there!

[elm-slack]: https://elmlang.herokuapp.com