Morningstar Design System

Textareas

Variations Design Guidelines Code Reference Accessibility

Textareas
updated

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

    2.23.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 
<!-- Default -->
<textarea class="mds-form__textarea" id="textarea-id"></textarea>
<!-- With Placeholder Text -->
<textarea class="mds-form__textarea" id="textarea-id" placeholder="Tell us more here..."></textarea>
<!-- Disabled -->
<textarea class="mds-form__textarea" id="textarea-id" disabled></textarea>
<!-- Default -->
<mds-textarea id="textarea-id"></mds-textarea>
<!-- With Placeholder Text -->
<mds-textarea id="textarea-id" placeholder="Tell us more here..."></mds-textarea>
<!-- Disabled -->
<mds-textarea id="textarea-id" disabled></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.

<!-- HTML -->
<div class="mds-form__field-group">
    <label class="mds-form__label" for="comments">Comments</label>
    <textarea class="mds-form__textarea" id="comments"></textarea>
</div>
<!-- Web Component -->
<mds-field-group>
    <mds-label for="comments">Comments</mds-label>
    <mds-textarea id="comments"></mds-textarea>
</mds-field-group>

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"></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

When setting props as attributes on a custom HTML element, use kebab-case instead of camelCase.

Prop
Type
Validation
Default
Description

additionalClass

String

—

—

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

ariaDescribedby

String

—

—

A space-separated list of element id, often Microcopy or a Field Error, whose content contains additional information about the textarea.

ariaInvalid

Boolean

—

—

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

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

One of: small, medium, large

medium

Alters the size of the textarea.

text

String

—

—

The content for the textarea.

Usage Examples

Setting id, size, required , and placeholder via props:

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

Setting id, ariaInvalid, and minlength via props:

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

Setting id and text via props:

<mds-textarea id="textarea-id" 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.