Input forms - Text field
Describes styling and usage of textfield UI element
Last updated
Describes styling and usage of textfield UI element
Last updated
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;
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.
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%.
The color of the input text will be 'PoT primary blue'.
Look and feel with a disabled text-field. UI label text should have color: 'cursor color'
Look and feel of a textfield with read-only value. This is usually associated with a copy button.
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.
Look and feel of a text-field which requires no input validation
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.
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'.
Use Font Awesome icons as i-frames. E.g.
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'.
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'.
