PaackEng / paack-ui / 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:

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

setPasswordVisible : Basics.Bool -> TextField msg -> TextField msg

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

Search

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

Wrapper around Element.Input.search .

TextField.search Msg.OnTextFieldChanged
    "Search something"
    model.value

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 : UI.Size.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


type TextFieldWidth

Describes a compatible width.

withWidth : TextFieldWidth -> TextField msg -> TextField msg

TextField.withWidth changes the width of the field.

TextField.withWidth TextField.widthFull someTextField

widthFull : TextFieldWidth

The field's width will fill its container.

widthRelative : TextFieldWidth

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

NOTE: Default behaviour.

Accessibility

setLabelVisible : Basics.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

withIcon : UI.Icon.Icon -> TextField msg -> TextField msg

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 : UI.Utils.Focus.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

withOnEnterPressed : msg -> TextField msg -> TextField msg

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 : UI.RenderConfig.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.