NoRedInk / noredink-ui / Nri.Ui.TextInput.V8

Changes from V7

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)

Input types

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

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

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.