Textareas

Variations

Default

Use when soliciting multiple lines of text.

Sizing

Sizing affects textarea size, text size and internal spacing. The default size is medium, and you can use a modifier class to make the textarea smaller (mds-form__textarea--small) or larger (mds-form__textarea--large).

Guidelines

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.

Related UI Components

• Checkboxes
• Field Errors
• Forms
• Inputs
• Labels
• Microcopy
• Radio Buttons
• Required Fields Key
• Selects

Related UX Patterns

• Errors
• Navigation
• Search

Accessibility

• 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.

Code Reference

• Always wrap grouped form elements in a mds-form__field-group container.

• 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.

CSS Class References