Text areas allow users to input, edit, and select multiline text.

Table of Contents

• Resources
• Basic Usage
• Configuration
  • Configuration Options
• Filled Text Area
• Outlined Text Area
• Full Width Text Area
• Disabled Text Area
• Required Text Area
• Valid Text Area
• Text Area with Character Counter
• Focus a Text Area

Resources

• Demo: Text Areas
• Material Design Guidelines: Menus
• MDC Web: Menu
• Sass Mixins (MDC Web)

Basic Usage

import Material.TextArea as TextArea


type Msg
    = ValueChanged String


main =
    TextArea.filled
        (TextArea.config
            |> TextArea.setLabel (Just "My text area")
            |> TextArea.setValue (Just "hello world")
            |> TextArea.setOnInput ValueChanged
            |> TextArea.setRows (Just 4)
            |> TextArea.setCols (Just 20)
        )

Configuration

Configuration Options

Filled Text Area

TextArea.filled TextArea.config

Outlined Text Area

Text areas may have a visible outlined around them by using their outlined variant.

TextArea.outlined TextArea.config

Note that setFullwidth does not have any effect on an outlined text area.

Full Width Text Area

To make a text area span all of its available width, set its setFullwidth configuration option to True.

TextArea.filled
    (TextArea.config |> TextArea.setFullwidth True)

Full width text areas do not support labels and will ignore the setLabel configuration option. You may use setPlaceholder or provide an extraneous label for a full width text area.

Outlined text areas do not support setFullwidth and will ignore this configuration option.

Disabled Text Area

To disable a text area, set its setDisabled configuration option to True.

TextArea.filled
    (TextArea.config |> TextArea.setDisabled True)

Required Text Area

To mark a text area as required, set its setRequired configuration option to True.

TextArea.filled
    (TextArea.config |> TextArea.setRequired True)

Valid Text Area

To mark a text area as valid, set its setValid configuration option to True.

TextArea.filled (TextArea.config |> TextArea.setValid True)

Text Area with Character Counter

To have a text area display a character counter, specify its setMaxLength configuration option, and also add a HelperText.characterCounter as a child of HelperText.helperLine.

[ TextArea.filled
    (TextArea.config |> TextArea.setMaxLength (Just 18))
, HelperText.helperLine [] [ HelperText.characterCounter [] ]
]

Focus a Text Area

You may programatically focus a text area by assigning an id attribute to it and use Browser.Dom.focus.

TextArea.filled
    (TextArea.config
        |> TextArea.setAttributes
            [ Html.Attributes.id "my-text-area" ]
    )