Morningstar Design System

Textareas

Variations Design Guidelines Code Reference Accessibility

Textareas
updated

  • HTML/CSS Available
  • Web Component Beta
  • Last Updated

    2.11.0

Textareas allow a user to input multiple lines of text.

See Forms for guidance on composing full forms.

Variations Design Guidelines Code Reference Accessibility

Variations

Default

Use when soliciting multiple lines of text.

Default
Default
HTML Web Component 
<textarea class="mds-form__textarea"></textarea>
<mds-textarea></mds-textarea>
Disabled
Disabled
HTML Web Component 
<textarea class="mds-form__textarea" disabled></textarea>
<mds-textarea disabled></mds-textarea>
With Placeholder
With Placeholder
HTML Web Component 
<textarea class="mds-form__textarea" placeholder="Tell us more here..."></textarea>
<mds-textarea placeholder="Tell us more here..."></mds-textarea>

Always wrap grouped form elements in a mds-form__field-group container. See the Forms composition section for more guidelines on constructing forms.

<div class="mds-form__field-group">
    <label class="mds-form__label" for="comments">Comments</label>
    <textarea class="mds-form__textarea" id="comments"></textarea>
</div>

Sizing

Sizing affects textarea size, text size and internal spacing. The default size is medium, and you can use modifier classes or props to make the textarea smaller or larger.

Small
Medium (Default)
Large
Small
Medium (Default)
Large
HTML Web Component 
<textarea class="mds-form__textarea mds-form__textarea--small" id="small-textarea" placeholder="Textarea"></textarea>
<mds-textarea placeholder="Textarea" size="small" id="small-textarea-wc"></mds-textarea>

Don’t Use When

  • Gathering short, single lines of text. Instead, use an Input.

Behaviors

  • Include placeholder text to indicate what information belongs in the textarea. Placeholder text disappears when the user types in the textarea. If the user doesn’t enter a value and moves to another part of a form, the placeholder text reappears in the former text box.
  • In IE11, placeholder text is cleared on focus. This is default behavior and a known issue, teams are still encouraged to use textareas in production.

Editorial

  • Placeholder text in textareas should be full sentences with punctuation.
  • Don’t use title case here.

CSS

Class References

Class
Applies to
Outcome

mds-form__textarea--small

mds-form__textarea

Adjusts styling to render a small textarea.

mds-form__textarea--large

mds-form__textarea

Adjusts styling to render a large textarea.

Web Component

Props

Prop
Type
Validation
Default
Description

ariaDescribedby

String

—

—

A space-separated list of element id, like microcopy or a field errors, whose content contains information about the textarea.

ariaInvalid

Boolean

—

—

Adds the aria-invalid attribute if the value is either false or true.

autocapitalize

String

Enum: ["none", "sentences", "words", "characters"]

—

Sets whether text should be automatically capitalized. Note: non-standard attribute and applies for iOS devices only.

autocomplete

String

Enum: ["on", "off"]

—

Adds autocomplete attribute with a value of either "on" or "off".

class

String

—

—

A space-separated list of class names that will be appended to the default mds-form__textarea element.

disabled

Boolean

—

false

If true, sets the disabled attribute on the textarea, rendering it non-interactive, and applies disabled styling.

id

String

Required

—

The id attribute for the HTML element.

maxlength

Number

—

—

If provided, sets the maximum number of characters allowed.

minlength

Number

—

—

If provided, sets the minimum number of characters allowed.

name

String

—

—

Adds the name attribute to the textarea element.

placeholder

String

—

—

Adds placeholder text.

readonly

Boolean

—

false

Adds the readonly attribute.

required

Boolean

—

false

If true, adds the required attribute.

rows

Number

—

—

Sets the number of visible text lines.

size

String

Enum: ["small", "medium", "large"]

—

Alters the size of the textarea.

spellcheck

String

Enum: ["true", "false", "default"]

—

Specifies whether the textarea is subject to spell checking by the underlying browser/OS.

text

String

—

—

The content for the textarea.
  • Use kebab-case when setting props in HTML. For example, ariaDescribedby would be written as aria-describedby.

Usage Examples

Setting size, required status, and placeholder text:

<mds-textarea size="small" placeholder="Comments" required="true"></mds-textarea>

Setting aria-invalid and minlength:

<mds-textarea aria-invalid="true" minlength="40"></mds-textarea>

Setting the text content:

<mds-textarea text="Text area content."></mds-textarea>

Browser Support

  • This component uses a box-shadow property to create an outline. Internet Explorer and Safari have known issues rendering these outlines when using the browser's zoom functionality. This visual defect doesn't affect the functionality of the component.
  • When using the minlength property in Edge v17+, if required isn’t set, and the user didn’t specify a value, minlength has no affect.

Implementation

  • Include an aria-describedby attribute on each textarea that has an .mds-form__microcopy or an .mds-form__field-error component providing additional information. The value of the aria-describedby attribute must match the id attribute on the .mds-form__microcopy or .mds-form__field-error component.
  • Always pair a Label with a textarea. Include a for attribute on each label with a value matching the id attribute on the corresponding textarea.