Text Input
Overview
Purpose
Text Inputs are form fields for the user to type into.
Anatomy
The Text Input can be broken down into the following elements -
1. Mandatory (optional)
The asterisk indicates whether filling in this field is optional or mandatory.
2. Label
The text label is used to describe the required input from the user.
3. Text Input (optional)
The text field within the container shows the user’s input once it has been filled in.
4. In-line Messaging (optional)
An optional text field that can be used for further information, clarifying the required input.
5. Validation Message
A success or error message after the field has been validated.
Variants & States
There are several states available to visualise the user’s progress.
Default
Focus
Disabled / Read-only
Success
Error