Nri.Ui.TextInput.V7

Changes from V6

custom takes a list of attributes and appends them to the end of the previous attributes, instead of prepending a single attr.
change view API so it only takes a list of attributes (meaning the value and input type are now passed in as attributes)
make the search icon and reset pattern the default for search
add "Show password" and "Hide password" as default behavior for password inputs
split password into newPassword and currentPassword to fix the autocomplete behavior

view : String -> List (Attribute value msg) -> 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)

Input types

number : (Maybe Int -> msg) -> Attribute (Maybe Int) msg

An input that allows integer entry

float : (Maybe Float -> msg) -> Attribute (Maybe 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 : Bool

, setShowPassword : Bool -> msg

}

-> 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 : Bool

, setShowPassword : Bool -> msg

}

-> Attribute String msg

An input that allows password entry with autocomplete value "current-password"

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.

Input content

value : value -> Attribute value msg

map : (a -> b) -> (b -> String) -> Attribute a msg -> Attribute b msg

Event handlers

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

Attributes

type Attribute value msg

Customizations for the TextInput.

placeholder : String -> Attribute value msg

If not explicit placeholder is given, the input label will be used as the placeholder.

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 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 (Attribute 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 : 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 : 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.

writing : Attribute value msg

Uses the "Writing" input style.

NoRedInk/noredink-ui/15.1.0