visibilityToggleId
to password inputs to enable blurring and refocusing on the toggle button, ensuring that screen readers announce the label change.view : String -> List (Attribute value msg) -> Html.Styled.Html msg
Render the TextInput as HTML.
generateId : String -> String
Gives you the default DOM element id that will be used by a TextInput.view
with the given label.
This is for use when you need the DOM element id for use in javascript (such as trigger an event to focus a particular text input)
number : (Maybe Basics.Int -> msg) -> Attribute (Maybe Basics.Int) msg
An input that allows integer entry
float : (Maybe Basics.Float -> msg) -> Attribute (Maybe Basics.Float) msg
An input that allows float entry
text : (String -> msg) -> Attribute String msg
An input that allows text entry
newPassword : { onInput : String -> msg, showPassword : Basics.Bool, setShowPassword : Basics.Bool -> msg, visibilityToggleId : String } -> Attribute String msg
An input that allows password entry with autocomplete value "new-password"
If the user types at least one character into the input box, a floating control "Show password" will appear. When clicked, the input type will change from "password" to "text", in order to enable the user to check what they've typed.
currentPassword : { onInput : String -> msg, showPassword : Basics.Bool, setShowPassword : Basics.Bool -> msg, visibilityToggleId : String } -> Attribute String msg
An input that allows password entry with autocomplete value "current-password"
If the user types at least one character into the input box, a floating control "Show password" will appear. When clicked, the input type will change from "password" to "text", in order to enable the user to check what they've typed.
email : (String -> msg) -> Attribute String msg
An input that is optimized for email entry
NOTE: this uses inputmode="email"
so that mobile devices will use the email keyboard,
but not type="email"
because that would enable browser-provided validation which is inconsistent and at odds
with our validation UI.
search : (String -> msg) -> Attribute String msg
An input with "search" type specified.
addressLevel2 : (String -> msg) -> Attribute String msg
An input that allows address-level2 entry
addressLine1 : (String -> msg) -> Attribute String msg
An input that allows address-line1 entry
countryName : (String -> msg) -> Attribute String msg
An input that allows country-name entry
familyName : (String -> msg) -> Attribute String msg
An input that allows family-name entry
givenName : (String -> msg) -> Attribute String msg
An input that allows given-name entry
username : (String -> msg) -> Attribute String msg
An input that allows username entry
organization : (String -> msg) -> Attribute String msg
An input that allows organization entry
organizationTitle : (String -> msg) -> Attribute String msg
An input that allows organization-title entry
postalCode : (String -> msg) -> Attribute String msg
An input that allows postal-code entry
sex : (String -> msg) -> Attribute String msg
An input that allows sex entry
tel : (String -> msg) -> Attribute String msg
An input that allows tel entry
date : (Maybe Time.Posix -> msg) -> Attribute (Maybe Time.Posix) msg
An input that allows date entry. The date is represented as a Maybe Time.Posix
value, where Nothing
represents an empty date field. The date is formatted as
an ISO8601 date string, with the time portion removed.
Format for a date input field is YYYY-MM-DD
. Iso8601.fromTime generates a string in
the format YYYY-MM-DDThh:mmZ
so we slice to only use the first 10 characters.
datetime : (Maybe Time.Posix -> msg) -> Attribute (Maybe Time.Posix) msg
An input that allows datetime entry. The datetime is represented as a Maybe Time.Posix
value, where Nothing
represents an empty datetime field. The datetime is formatted as
an ISO8601 datetime string, with the time zone removed.
Format for a datetime input field value should be YYYY-MM-DDThh:mm
.
From MDN:
There are several methods provided by JavaScript's Date that can be used to convert numeric date information into a properly-formatted string. For example, the Date.toISOString() method returns the date/time in UTC with the suffix "Z" denoting that timezone; removing the "Z" would provide a value in the format expected by a datetime-local input.
Iso8601.fromTime generates the same string as Date.toISOString, so we need to drop the "Z" suffix.
readOnlyText : Attribute String msg
A read-only input for text values
value : value -> Attribute value msg
map : (a -> b) -> (b -> String) -> Attribute a msg -> Attribute b msg
onFocus : msg -> Attribute value msg
Causes the TextInput to produce the given msg
when the field is focused.
onBlur : msg -> Attribute value msg
Causes the TextInput to produce the given msg
when the field is blurred.
onEnter : msg -> Attribute value msg
Customizations for the TextInput.
placeholder : String -> Attribute value msg
autofocus : Attribute value msg
Sets the autofocus
attribute of the resulting HTML input.
hiddenLabel : Attribute value msg
Hides the visible label. (There will still be an invisible label for screen readers.)
visibleLabel : Attribute value msg
Default behavior.
css : List Css.Style -> Attribute value msg
Adds CSS to the element containing the input.
If you want to customize colors, borders, font sizes, etc, you should instead add to the TextInput API to support what you need.
custom : List (Html.Styled.Attribute Basics.Never) -> Attribute value msg
Use this helper to add custom attributes.
Do NOT use this helper to add css styles, as they may not be applied the way
you want/expect if underlying styles change.
Instead, please use the css
helper.
nriDescription : String -> Attribute value msg
id : String -> Attribute value msg
Set a custom ID for this text input and label. If you don't set this, we'll automatically generate one from the label you pass in, but this can cause problems if you have more than one text input with the same label on the page. Use this to be more specific and avoid issues with duplicate IDs!
testId : String -> Attribute value msg
noMargin : Basics.Bool -> Attribute value msg
Remove default spacing from the Input.
disabled : Attribute value msg
This disables the input
loading : Attribute value msg
Use this while the form the input is a part of is being submitted.
errorIf : Basics.Bool -> Attribute value msg
Sets whether or not the field will be highlighted as having a validation error.
errorMessage : Maybe String -> Attribute value msg
If Just
, the field will be highlighted as having a validation error,
and the given error message will be shown.
guidance : String -> Attribute value msg
A guidance message shows below the input, unless an error message is showing instead.
guidanceHtml : List (Html.Styled.Html msg) -> Attribute value msg
A guidance message (HTML) shows below the input, unless an error message is showing instead.
writing : Attribute value msg
Uses the "Writing" input style.