dillonkearns/elm-pages/12.3.0

Tui.Input

Text input primitive for TUI applications.

Handles character insertion, deletion, cursor movement, and renders with an inverse-video cursor indicator (the standard TUI convention).

import Tui.Input as Input


type alias Model =
    { input : Input.State }


-- In update:
case event.key of
    Tui.Sub.Escape -> dismissModal
    Tui.Sub.Enter -> submit (Input.text model.input)
    _ -> { model | input = Input.update event model.input }


-- In view:
Input.view { width = 40 } model.input
type State

Opaque state for a text input. Tracks content and cursor position.

init : String -> State

Create an input with initial text. Cursor starts at the end.

update : KeyEvent -> State -> State

Handle a key event. Returns updated state.

Handles: character insertion, Backspace, Delete, Arrow Left/Right, Home, End, Ctrl+A (home), Ctrl+E (end), Ctrl+K (kill to end), Ctrl+U (kill to start).

Keys the input doesn't handle (Escape, Enter, Tab, etc.) return the state unchanged. Match those keys before calling this:

case event.key of
    Tui.Sub.Escape ->
        ( closeInput model, Effect.none )


    Tui.Sub.Enter ->
        ( submit model, Effect.none )


    _ ->
        ( { model | input = Input.update event model.input }, Effect.none )
insertText : String -> State -> State

Insert a string at the cursor position. Useful for handling paste events: when bracketed paste delivers a chunk of text, insert it all at once.

case msg of
    GotPaste pastedText ->
        { model | input = Input.insertText pastedText model.input }
view : { width : Int } -> State -> Screen

Render the input as a Screen with an inverse-video cursor.

The width constrains how wide the input renders.

viewMasked : { width : Int } -> State -> Screen

Render the input as a Screen with masked characters and an inverse-video cursor.

Useful for password-style prompts where you still want users to see the cursor position while hiding the actual text.

text : State -> String

Extract the current text value.