Input forms - Text field

Describes styling and usage of textfield UI element

Textfiled UI component with different states

Text field - normal state

The default look & feel of a textfield. The placeholder text is of style Body1. The color of placeholder text is 'PoT Grey'.

Properties:

height: 56px;

width: 332px;

left: 0px;

top: 28px;

border-radius: 8px;

padding: 16px;

/* text-field */


box-sizing: border-box;

/* Auto layout */

display: flex;
flex-direction: row;
align-items: flex-start;
padding: 16px;
gap: 8px;

position: absolute;
left: 0%;
right: 0%;
top: 33.33%;
bottom: 0%;

/* Main/white */

background: #FFFFFF;
/* Main/PoT brand */

border: 1px solid #7955FF;
border-radius: 8px;
-webkit-transition: border-color 300ms;
transition: border-color 300ms;

Text field - hover state

When mouse is hover on the text-field or smart pen is hovered on mobile screen. It has an ease-in-and-out animation with a 300ms transition time. text field border-color: PoT hover color.

.text-field:hover{
    border-color: "PoT hover";
    cursor: pointer;
}

Text fieled - active state

When the text field is clicked or tapped on mobile screen. The cursor appears at the beginning of the placeholder text. Field has a drop-shadow-active effect with values: X:0, Y:0, Blur: 0, Spread: 2, Color: #795577 (PoT brand), opacity: 25%.

.text-field:active {
    background: #D9D9D9;
    box-shadow: 0px 0px 0px 2px rgba(121, 85, 255, 0.25);
}

The color of the input text will be 'PoT primary blue'.

Text field - disabled state

Look and feel with a disabled text-field. UI label text should have color: 'cursor color'

.text-field:disabled{
    background: 'PoT disable';
    color: 'PoT disable text color';
    border: 1px solid 'PoT disable border';
}

Text field - read-only state

Look and feel of a textfield with read-only value. This is usually associated with a copy button.

.text-field:read-only{
    background: 'PoT brand';
    color: 'PoT white';
    border: 1px solid 'PoT brand';
}

Text field - varients

Depending on the design or space options, UI label of a text-field could be either on top of the field or on the left side. For text fields with the UI label on the left, alert text should appear at the bottom of the field itself.

Text fields with input validations:

Input - optional

Look and feel of a text-field which requires no input validation

.text-field:optional{
    background: 'PoT white';
    color: 'PoT dark blue';
    border: 1px solid 'PoT brand';
}

Input - valid

Look and feel of a text field which requires input validation and the input text is valid. This involves changing the border color into 'PoT Success' and including the Font Awesome icon "circle-check" beside the input text.

.text-field:required:valid {
    background: 'PoT white';
    color: 'PoT dark blue'
    border: 1px solid 'PoT success';
}

When a text-field with valid input is active, drop-shadow with 'PoT Success' (opacity 25%) color appears around the box. The cursor appears at the end of the input text. Input text retains the color 'PoT dark blue'.

.text-field:required:valid:active {
    background: #D9D9D9;
    box-shadow: 0px 0px 0px 2px rgba(94, 206, 96, 0.25);
}

Use Font Awesome icons as i-frames. E.g.

<i class="fa-solid fa-circle-check"></i>

Input - invalid

Look and feel of a text field which requires input validation and the input text is invalid. This involves changing the border color into 'PoT danger' and including the Font Awesome icon "circle-exclamation" beside the input text. Also text-field should include alert text indicating the cause of the alert using 'PoT error' text style with the color 'PoT error text'.

.text-field:required:invalid {
    background: 'PoT white';
    color: 'PoT dark blue'
    border: 1px solid 'PoT danger';
}

When a text-field with invalid input is active, drop-shadow with 'PoT danger' color appears around the box. The cursor appears at the end of the input text. Input text retains the color 'PoT dark blue'.

.text-field:required:invalid:active {
    background: #D9D9D9;
    box-shadow: 0px 0px 0px 2px rgba(255, 178, 202, 0.25);
}

State transitions in textfield

State transitions in a textfield