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

Table of Contents

• Resources
• Basic Usage
• Full Width Text Area
• Disabled Text Area
• Required Text Area
• Invalid Text Area
• Text Area with Character Counter

Resources

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

Basic Usage

import Material.TextArea
    exposing
        ( textArea
        , textAreaConfig
        )


type Msg
    = ValueChanged String


main =
    textArea
        { textAreaConfig
            | label = "My text area"
            , value = Just "hello world"
            , onInput = Just ValueChanged
            , rows = Just 4
            , columns = Just 20
        }

Full Width Text Area

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

textArea { textAreaConfig | fullWidth = True }

Full width text areas do not support label and will ignore this configuration field. You may set placeholder or provide an extraneous label for a full width text area.

Full width text areas do not support outlined and will ignore this configuration field.

Disabled Text Area

To disable a text area set its disabled configuration field to True.

textArea { textAreaConfig | disabled = True }

Required Text Area

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

textArea { textAreaConfig | required = True }

Invalid Text Area

To mark a text area as invalid, set its valid configuration field to False.

textArea { textAreaConfig | valid = False }

Outlined Text Area

Text areas may have a visible outlined around them by setting their outlined configuration field to True.

textArea { textAreaConfig | outlined = True }

Note that this does not have any effect for fullwidth text areas.

Text Area with Character Counter

To have a text area display a character counter, set its maxLength configuration field, and also add a characterCounter as a child of helperLine.

[ textArea
    { textAreaConfig
        | maxLength = Just 18
    }
, helperLine [] [ characterCounter [] ]
]