Return to Sky UI homepage
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