Add a Input.Model to your model.

type alias MyModel =
    { myInput : Input.Model
    }

Add a Input.Model to your model.

myInitialModel : MyModel
myInitialModel =
    { myInput = Input.init -- optionally pipe into State Setters
    }

Add a Input.Msg to your Msg.

type MyMsg
    = UpdateMyInput Input.Msg

Use in your update function.

myUpdate : Msg -> Model -> (Model, Cmd Msg)
myUpdate msg model =
    case msg of
        UpdateMyInput inputMsg ->
            { model | myInput = Input.update inputMsg model.myInput } ! []

Transform an Input.Model into an Input.View, which allows us to pipe View Setters on it.

myView : Model -> Html Msg
myView model =
    div
        []
        [ Input.view model.myInput -- pipe view setters here, for example |> setIsLocked 'your logic here'
        ]

Transforms an Input.View into Html Input.Msg

myView : Model -> Html Msg
myView model =
    div
        []
        [ Input.view model.myInput
            |> Input.render
            |> Html.map UpdateMyInput
        ]

ReInitialise your Input.Model.

Reset your Input.Model.

Set the initial value of your Input.Model.

Change the value of your Input.Model.

Set a placeholder for your input.

Set the max length for your input string.

Set whether your input is in error mode (red border).

Set whether your input is locked (disabled).

Give your input an id. Can be useful for DOM selectors (focus, WebComponents etc.)

Get the initial value of your input.

Get the current value of your input. This is what you'd use to display the data somewhere outside of your input, or to send the data to the backend for example etc.

Whether your input was changed. Useful if you want to disable save buttons unless there were changes etc.

Useful if you need the id of the input in your update function, so set focus etc.