Quickstart Elm 0.19, part 11

In this article, we’ll see how to work with input fields in Elm 0.19.

Note: Examples in this article use Elm 0.19.

Adding a dynamic input in Elm 0.19

Here’s the app we’re starting with:

module Main exposing (main)

import Browser exposing (sandbox)
import Html exposing (Html, div, input, text, p)
import Html.Attributes exposing (class, value)
import Html.Events exposing (onInput)

type alias Model =
    { text : String }

view : Model -> Html Msg
view model =
    div [ class "text-center" ]
        [ input [ onInput UpdateText, value model.text ] []
        , div [] [ text model.text ]
        ]

type Msg
    = UpdateText String


update : Msg -> Model -> Model
update msg model =
    case msg of
        UpdateText newText ->
            { model | text = newText }



main : Program () Model Msg
main =
    sandbox
        { init = { text = "" }
        , view = view
        , update = update
        }

This app is available live here.

Here’s the embedded app:

Note that the code for the above example has been copied from here.

Here’s the above app, slightly updated.

And here it is embedded:

Exposing the value attribute

We begin the code by exposing the value attribute.

In regular HTML, this attribute in an input looks as follows. For button, input and option elements, the value attribute specifies the initial value of the element.

For example:

<input type="checkbox" name="foo" value="bar">

Exposing the onInput event type

We’re also exposing the onInput event type on this line of our app:

import Html.Events exposing (onInput)

Making our model type a Record and setting its initial value

We’re making our model type a Record that has a property called text:

type alias Model = 
    { text : String }

Next we set it’s initial value to an empty String:

initialModel =
    { text = "" }

Listening for an onInput event in our view

We have an input field, and it listens for an onInput event:

view model =
    div [ class "text-center" ]
        [ input [ onInput UpdateText, value model.text ] []
        , div [] [ text model.text ]
        ]

When a user types into the input field, an onInput event will get triggered and the input field’s text value will get passed with the UpdateText as a String. That’s why the Msg type has the value (UpdateText String).

The String that gets passed along with the message to the update function is the string of text that’s in the input field.

We display the model.text value in a div element underneath the input field.

Handling the UpdateText String message

We need to handle just a single case for our message. All we do is set the text property in the model to the String that is currently in the input field.

Let’s now improve the output of the String that gets typed in into the input field:

view model =
    div [ class "text-center" ]
        [ input [ onInput UpdateText, value model.text ] []
        , div [] 
                [ String.concat [ "You typed in the following: "
                                , model.text
                                ]
                |> text
                ]
        ]

The updated app is available on Ellie.

Here’s the updated embedded app:

That’s it for this article.

In the next one, we’ll add text from an input with a button click in Elm 0.19.