Version
has been released! Read the upgrade guide

Textarea

The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.

Overview

The textarea component lets users enter and edit multiple lines of text.

1Usage

The Textarea component should be used to let users enter multiple lines of text. It typically appears in Forms and Modals, however can be used wherever the requirement for multiple lines of text exists. If you require the user to enter a single line of text, use the Text Input component instead.

The textarea should contain a concise message, communicating to the user the expected content. To ensure there is appropriate readability of the entered content, try to make the Text area container stretch to the full width of its parent.

2Anatomy

  1. Label. The Label should be used to describe to the user what the desired input should be. Every textarea should have a text label.

  2. User Input. The User Input is the text the user has entered into the Textarea.

  3. Container. The Container wraps the entire component.

3States

The Textarea has 3 states - default, active, and filled.

4Variations

The textarea comes in two variations - fixed and resizable. The fixed version of the Textarea cannot be resized by the user, whereas the resizable one can. Note: Whilst the resizable Textarea can be resized by the user, it can only be changed on the y-axis. This is to prevent the interface breaking when the textarea is stretched outside of its parent container.

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright