Version
has been released! Read the upgrade guide

Text Input

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

Text inputs let users enter and edit text.

1Usage

The Text Input should be used to let the user enter a single line of text. It typically appears in forms and modals. If you require the user to enter multi-line content, then the Textarea component should be used instead.

2Design

The Text Input should stand out and be easily discoverable by users. The text label should be concise, effectively communicating to the user the type of input required.

3Anatomy

  1. Label. Should be used to describe to the user what the desired input should be. Every field should have a text label. The label should always be visible on all inputs, excluding search bars.

  2. User Input. This is the text the user has entered into the Text Input.

  3. Container. Wraps the entire component.

4Sizing & Spacing

The Text Input is available in one standard size. It has been created in relation to other form elements to ensure consistency.

5States

The Text Input has three states - defaultactive, and filled.


6Pre & Post Fix Labels

The Fix Labels are used for adding additional information to an input. They can be either icons or text.

7Usage

The labels should accompany the main input label. They should not be the main focus of the Text Input.

8Anatomy

  1. Container. Wraps the Pre and Post fixed Labels

  2. Content. Can be either text or an icon.

9Sizing & Spacing

The Pre and Post fixes don’t have any inherit sizes themselves. As they are additions to the Text Input component, they are sized according to the input.

10Hierarchy & Placement

Only Pre and Post fix should be used on each input.

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