Multi Line - Text Input

text-multi-noValue

text-multi-value

Use when

• User has not entered a value into the input field yet.

Use when

• User starts to enter value into the input field.

Don’t use

• when there is an input value.

Don’t use when

• There is no value input from the user yet.

text-multi-noValue-noReq

text-multi-noValue

Use when

• Textfield is not required to complete a process, but is additional information that supports the customer experience.

Use when

• Textfield is essential to completing the process and can’t be skipped.

• The use of this will trigger an error and keep buttons inactive until information is given.

Don’t use when

• Textfield is essential to completing a process and can’t be skipped.

Don’t use when

• Textfield is optional information that adds to the customer experience, but is not essential.

text-multi-noValue

text-multi-noValue-error

Use when

• Customer entered the correct value into the input field.

• There has not been an error check triggered yet.

Use when

• Customer entered wrong input AND error check was triggered.

Don’t use when

• Customer entered WRONG input and error check was triggered.

Don’t use when

• Customer entered the correct value into the input field.

• No error check has been triggered.

text-multi-noValue

text-multi-noValue-sA

Use when

• There is no icon related to the information needed from the user.

• Spacing is limited.

Use when

• Icon is representative of the information required.

Don’t use when

• Icon can support the information that is required by the customer.

Don’t use when

• Spacing is limited.

• Icon does not represent the information needed by the customer.

text-multi-noValue

text-multi-value-help

text-multi-value-default-error-help

Use when

• There is no additional information to tell to the customer.

• There is no further action required by the customer.

Use when

• Customer requires further information for what to input

Use when

• There is an error that is essential to rectify before moving on.

Don’t use when

• Customer requires extra information, e.g. the textfield is mandatory.

Don’t use when

• There is no further information needed by the customer.

• There is an error that is essential to rectify before moving on.

Don’t use when

• The information is only additional, not essential to the customer.

text-multi-value - active

text-multi-value-inactive

Use when

• Customer is required to give input to the textfield.

• Customer is allowed to enter information into the given textfield.

Use when

• Customer is not allowed to change value of the textfield.

• Customer has not yet completed the input for textfields that are required before current textfield becomes active.

Don’t use when

• Customer is not allowed to change value of the textfield.

• Customer needs to fill out other textfields first before editing the related textfield.

Don’t use when

• Customer is allowed to edit the input value of this textfield.

• Customer is not interacting with the textfield.

• Customer has selected the textfield.

• Customer has entered text input to the textfield.

• Customer is not interacting with the textfield.

• Customer has completed a step and it is a final validation of the input within the text field.

• Textfield is mandatory/ required.

• Customer has currently selected the textfield in which the error occurred.

• Customer hovers their mouse over the textfield.

• in any other circumstance besides hovering on desktop.

• Customer hovers their mouse over the textfield that fired an error.

• in any other circumstance besides hovering over a textfield with an error indication on desktop.

• Customer is typing within the textfield.

• The current textfield is selected by the customer.

• Customer has not selected the textfield.

• Customer is typing within the textfield that has an error.

• The current textfield is selected by the customer.

• The current textfield is selected by the customer, but does not have an error.

• Customer has not selected the textfield that has an error.

• Customer is not allowed to make changes to input.

• Customer has not yet finished the steps that they’d needed to complete before activating the textfield.

• Customer is allowed to edit the textfield.

• Customer is required to enter input to the textfield.

DEFAULT BEHAVIOUR

Default Var A →

User has not yet selected the input field and there is no input yet.

→ Focused Var A →

User selects current input field and starts entering the required value of the field.

→ Default Var B

User has finished their input and moved on to another input field.

ERROR IS TRIGGERED

Error Var A

User has not yet given input to a required field, but has pressed a CTA to move forward OR started entering value for the next input field. (this usually includes a helptext)

Error Var B

User has added value to the input field, however, it does not match the input. (This usually includes a helptext)

HELP TEXT GETS DISPLAYED

Error Help Text

User has entered the wrong input and gets an error message.

Figma file

https://www.figma.com/file/F1fNT99VGTJHJ1jAnjFTn6/Youtap-Style-guide-V1.0.2023?node-id=870%3A69165&t=bSOwWTQGqqzPHGGC-1

further includes single-line inputs

WCAG2.0 Checklist

https://www.w3.org/TR/2006/WD-WCAG20-20060427/appendixB.html

Figma Prototype for interaction behaviour

https://www.figma.com/proto/F1fNT99VGTJHJ1jAnjFTn6/Youtap-Style-guide-V1.0.2023?page-id=870%3A69112&node-id=1098-73226&viewport=26%2C-2127%2C0.75&scaling=min-zoom&starting-point-node-id=1098%3A73226&show-proto-sidebar=1

auto layout prototype

Checking colour accessibility compliance

Design

https://www.figma.com/community/plugin/733159460536249875/A11y---Color-Contrast-Checker

Final check

https://www.figma.com/community/plugin/911262488575486588/Contrast

Aiming for AA

if AAA, even better

Figma Playground

https://www.figma.com/file/F1fNT99VGTJHJ1jAnjFTn6/Youtap-Style-guide-V1.0.2023?type=design&node-id=1361%3A69988&t=rkaRCEh0IZ21rS40-1

Figma Page to try out different components and how they work in Figma