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.
The TextField msg
type is used for describing the component for later rendering.
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
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
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 : (String -> msg) -> String -> String -> TextField msg
Wrapper around Element.Input.search
.
TextField.search Msg.OnTextFieldChanged
"Search something"
model.value
static : String -> String -> TextField msg
Simulate a TextField.singlelineText
visually, but the content isn't changeable.
TextField.static
"Not changeable"
"Any constant value"
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
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.
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.
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
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.