PackagesReroutesAboutlamdera.com

PaackEng/paack-ui/7.23.0

READMEAboutVersionsSourceModules

UI.TextField

UI.TextField is an accessible and customizable interface for text inputs. Indicating the type of input data unlocks specific features like mobile's autocompleting, browser's spell-checking, and password-related.

Different from Element.Input, style is pre-applied following the design documents, and not customizable.

TextField.email Msg.OnTextFieldChanged
    "Enter your email"
    model.emailValue
    |> TextField.setLabelVisible True
    |> TextField.renderElement renderConfig

Notes:

  • Every input must have a label value, even if hidden, for accessibility purposes.

  • Username, email, current password, and search activates in-browser autocomplete capabilities.

  • Username and email content-types may have the same use case scenario (e.g., login, sign up), but the email has an in-browser mask checking.

Building

type TextField msg

The TextField msg type is used for describing the component for later rendering.

Text

singlelineText : (String -> msg) -> String -> String -> TextField msg

Wrapper around Element.Input.text .

TextField.singlelineText Msg.OnTextFieldChanged
    "My cool input"
    model.value
multilineText : (String -> msg) -> String -> String -> TextField msg

Wrapper around Element.Input.multiline .

TextField.multiline Msg.OnTextFieldChanged
    "My cool textarea"
    model.value
spellChecked : (String -> msg) -> String -> String -> TextField msg

Wrapper around Element.Input.spellChecked .

TextField.spellChecked Msg.OnTextFieldChanged
    "Spell checking"
    model.value

Password

newPassword : (String -> msg) -> String -> String -> TextField msg

Wrapper around Element.Input.newPassword .

TextField.newPassword Msg.OnTextFieldChanged
    "New password"
    model.value
currentPassword : (String -> msg) -> String -> String -> TextField msg

Wrapper around Element.Input.currentPassword .

TextField.currentPassword Msg.OnTextFieldChanged
    "Current password"
    model.value

Make the password on newPassword and currentPassword visible to the user.

TextField.setPasswordVisible True someTextField

Login

username : (String -> msg) -> String -> String -> TextField msg

Wrapper around Element.Input.username .

TextField.username Msg.OnTextFieldChanged
    "Username"
    model.value
email : (String -> msg) -> String -> String -> TextField msg

Wrapper around Element.Input.email .

TextField.email Msg.OnTextFieldChanged
    "Email"
    model.value
    |> TextField.setLabelVisible True

Static

static : String -> String -> TextField msg

Simulate a TextField.singlelineText visually, but the content isn't changeable.

TextField.static
    "Not changeable"
    "Any constant value"

Size

withSize : Size -> TextField msg -> TextField msg

With TextField.withSize, you'll be able to scale the field between the standard sizes.

The sizes (in height) are: Large - 60px; Medium - 48px; Small - 36px; Extra Small - 28px.

TextField.withSize Size.large someField

NOTE: TextField's default size is Size.medium

Width

Describes a compatible width.

TextField.withWidth changes the width of the field.

TextField.withWidth TextField.widthFull someTextField

The field's width will fill its container.

The field will have the exact width to fit its contents.

NOTE: Default behaviour.

Accessibility

setLabelVisible : Bool -> TextField msg -> TextField msg

Show or hide the text field's label.

TextField.setLabelVisible True someTextField
withPlaceholder : String -> TextField msg -> TextField msg

Place-holds the text field with text.

TextField.withPlaceholder "Enter your personal email" someTextField

Append an icon to the end of the text field.

TextField.search Msg.OnTextFieldChanged
    "Search something"
    model.value
    |> TextField.withIcon
        (Icon.search "Search")

NOTE: Not ready.

Interactive

withFocus : Focus msg -> TextField msg -> TextField msg

Listen to focus events, add tab-indexing and enforce focus state.

TextField.withFocus
    { onEnter = Msg.FocusOnThisField
    , tabIndex = 1
    , hasFocus = True
    }
    someTextField

Trigger message when the users press return-key while editing the text field.

TextField.withOnEnterPressed Msg.SubmitField someTextField
withError : String -> TextField msg -> TextField msg

Replaces the text with an error message and make the border red.

TextField.withError "Minimum eight caracters." someTextField

Rendering

renderElement : RenderConfig -> TextField msg -> Element msg

End of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.

Modules

About this package serverReroutesreroutes.json
Pages and docs rendering from package.elm-lang.org, © 2012-2020 Evan Czaplicki. © 2026 Lamdera