NoRedInk/noredink-ui/9.5.1

NOTE: the latest version is 35.9.3

Unavailable. Nobody can download this version any more, with elm or with the Lamdera compiler: Software Heritage not asked yet (this run's --swh-calls were used up); no fork with tag 9.5.1 found (15 same-name repos checked); no cached copy. Use another version.

Details

Nri.Ui.TextInput.V6

Changes from V5

  • new Attributes-style API
String
-> InputType value msg
-> List (Attribute msg)
-> value
-> Html msg

Render the TextInput as HTML. The input's label, InputType, and current value are all required. Other attributes are all optional.

generateId : String -> String

Gives you the 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

type InputType value msg
number : (Maybe Int -> msg) -> InputType (Maybe Int) msg

An input that allows integer entry

float : (Maybe Float -> msg) -> InputType (Maybe Float) msg

An input that allows float entry

text : (String -> msg) -> InputType String msg

An input that allows text entry

password : (String -> msg) -> InputType String msg

An input that allows password entry

email : (String -> msg) -> InputType 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.

Attributes

type Attribute msg

An optional customization of a TextInput.

placeholder : String -> Attribute msg

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

Hides the visible label. (There will still be an invisible label for screen readers.)

onBlur : msg -> Attribute msg

Causes the TextInput to produce the given msg when the field is blurred.

Sets the autofocus attribute of the resulting HTML input.

css : List Style -> Attribute msg

Adds CSS to the input container. This is meant to be used for margin, and child node attributes for display:flex, display:grid, etc. If you want to customize colors, borders, font sizes, etc, you should instead add to the TextInput API to support what you need.

custom : Attribute msg -> Attribute msg

Add any attribute to the input.

NOTE: This is meant for short-term workarounds, and if you use this, consider adding to the TextInput API to support what you need.

This disables the input

Use this while the form the input is a part of is being submitted.

errorIf : Bool -> Attribute msg

Sets whether or not the field will be highlighted as having a validation error. If you are always passing True, then you don't need to use this attribute.

errorMessage : Maybe String -> Attribute msg

If Just, the field will be highlighted as having a validation error, and the given error message will be shown.

Uses the "Writing" input style. See Nri.Ui.InputStyles.V2.Theme.