NoRedInk / noredink-ui / Nri.Ui.TextArea.V5

Changelog

Patch changes

Changes from V4

The next version of TextArea should:

Upgrading to V4

The Nri Component-Catalog-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:

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

API

view : String -> List (Attribute msg) -> Html.Styled.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 input is changed.

onBlur : msg -> Attribute msg

Produce the given msg when the field is blurred.

onFocus : msg -> Attribute msg

Produce the given msg when the field is focused.

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 Css.Style -> Attribute msg

Adds CSS to the element containing the textarea.

noMargin : Basics.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 (Html.Styled.Attribute Basics.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

autofocus : Attribute msg

Sets the autofocus attribute of the textarea to true.

disabled : Attribute msg

This disables the textarea.

errorIf : Basics.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

A guidance message shows below the input, unless an error message is showing instead.

guidanceHtml : List (Html.Styled.Html msg) -> Attribute msg

A guidance message (HTML) shows below the input, unless an error message is showing instead.