Form Elements

To include in your project, add FormElements.css to your document.

To change variables in these styles, go into styl/Variables.styl, edit the appropriate variables, and run npm install && npm run build-styles to get an updated FormFields.css file.

TEA

Elm doesn't have a traditional concept of "components": stateful mutable bits in your UI that change over time, like you have in libraries such as React. Instead Elm encourages reusable functions.

Every module here is some group of related helpers that allow you to represent a certain form control in your application. Some form controls require a decent number of functions to maintain a working element- like the "Super Select". Others like the simple "Checkbox" just need a single view function.

Important
The best way to figure out how to use these elements is probably just to check out the demonstration source code.

Config

If a form element's module exports a type called Config then it expects this to be passed as an argument to the view function. If you are coming from React, than you can think of Config as something very similar to props. The purpose of this type is pretty straight forward. Any configuration parameters useful to the view are here. Like what the text input's "value" should be, or what message the radio button group should send out to the Elm runtime when an option is selected.

Model

In addition to a Config, a form element might export a type called Model. While the Config object contains much of the dynamic data that the view function uses to display- there's some data that is inconvenient to k.

You might wonder, why not extend this convenience to data in the Config as well? Why must I manually update the text input's value when things like a text inputs hover state

view

The view function returns type Html Msg or Html a depending on whether the element's module also includes an update that handles specific types of messages unique to that element.

Views also take an associated Config record which has parameters that tell it to display or certain way, or emit certain messages in response to an event.

The RadioButtonGroup.view for example, returns Html a where the onSelect field in the Config record is type b -> a and the options field is a list of type (String, b)

RadioButton.view
  { options =
      [ ( "Senate", Senate )
      , ( "House", House )
      ]
  , onSelect = SelectChamber
  , selected = model.chamber
  }

The TextInput.view on the other hand returns Html TextInput.Msg as the views Html emits certain TextInput.Msg events which the TextInput.update function needs to handle.

You will need to use Html.map

TextInput.view
    model.textInputData
    (textInputSettings model props)
    |> Html.map TextInputMsg