Nri.Ui.TextArea.V5

Changelog

Changes from V4

Removes contentCreation view styles
Changes to a list-based API
Adds guidance and errorMessage support
Adds id, custom, nriDescription, testId, css, and noMargin
Adds disabled support

The next version of TextArea should:

update the disabled styles

Upgrading to V4

Adds field for onBlur

The Nri styleguide-specified textarea with overlapping label

Creating New Versions

When upgrading this module, we need to make sure to also include a new custom element, or else autosizing will break! This means doing the following:

Creating a new module in lib/TextArea
Requiring that module in lib/index.js

API

view : String -> List (Attribute msg) -> Html msg

generateId : String -> String

type Attribute msg

Customizations for the TextArea.

value : String -> Attribute msg

Event handlers

onInput : (String -> msg) -> Attribute msg

Produce the given msg when the field is focused.

onBlur : msg -> Attribute msg

Produce the given msg when the field is blurred.

Visual behavior

hiddenLabel : Attribute msg

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

visibleLabel : Attribute msg

Default behavior.

css : List Style -> Attribute msg

Adds CSS to the element containing the textarea.

noMargin : Bool -> Attribute msg

Remove default spacing from the Input.

standard : Attribute msg

Use the Standard theme for the TextArea. This is the default.

writing : Attribute msg

Use the Writing theme for the TextArea.

autoResize : Attribute msg

autoResizeSingleLine : Attribute msg

Other

custom : List (Attribute Never) -> Attribute 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 msg

id : String -> Attribute msg

Set a custom ID for this text area. If you don't set the id explicitly, we'll automatically generate one from the label you pass in, but this can cause problems if you have more than one textarea with the same label on the page. Use this to be more specific and avoid issues with duplicate IDs.

testId : String -> Attribute msg

placeholder : String -> Attribute msg

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

autofocus : Attribute msg

Sets the autofocus attribute of the textarea to true.

disabled : Attribute msg

This disables the textarea.

errorIf : Bool -> Attribute msg

Sets whether or not the field will be highlighted as having a validation error.

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.

guidance : String -> Attribute msg