Select fields (Dropdown) | Youtap Onboarding

Note

Only use preset selection fields when you are sure that all options can be covered with the options presented in the dropdown.

Use a text input otherwise.

Introduction

Selection fields provide the user with a preset list to choose from. It makes it easier for them to find the right option for the field required as it limits the answers a user can choose from.

Figma component - Selection field

This section includes the following:

01. Specifications

Default states

Default

Variant A - No Value

select-noValue

Specifications

Size

width - 327px

height - 56px

Radius

corner-rad - see radius

Outline

outline colour - tertiary-black-60

outline-weight - 1pt, inside

Background

background - tertiary-white

Label

label colour - primary

label size - label1

margin-left - SP_2

alignment - left

Mandatory indicator

asterisk colour - primary

Input

input type - list selection

value - null

End adornment (req.)

icon - 24x24px

icon - arrow down

margin - SP_2

padding to text - SP_1

icon colour - primary

Variant B - Value

select-value

Specifications

Size

width - 327px

height - 56px

Radius

corner-rad - see radius

Outline

outline colour - tertiary-black-60

outline-weight - 1pt, inside

Background

background - tertiary-white

Label

label colour - primary

label size - label2

position - center to outline

margin-left - SP_1

padding inside field - 4px each side

background - tertiary-white

alignment - left

Mandatory indicator

asterisk colour - primary

Input

input type - list selection

value - not null

input colour - primary

input size - body1

margin - SP_2

alignment - left

End adornment (req.)

icon - 24x24px

icon - arrow down

margin - SP_2

padding to text - SP_1

icon colour - primary

Error

Variant A - No Value

select-noValue-error

Specifications

Size

width - 327px

height - 56px

Radius

corner-rad - see radius

Outline

outline colour - secondary2

outline-weight - 1pt, inside

Background

background - tertiary-white

Label

label colour - primary

label size - label1

margin - SP_2

alignment - left

Mandatory indicator

asterisk colour - primary

Input

input type - list selection

value - null

End adornment (req.)

icon - 24x24px

icon - arrow down

margin - SP_2

padding to text - SP_1

icon colour - primary

Variant B - Value

select-value-error

Specifications

Size

width - 327px

height - 56px

Radius

corner-rad - see radius

Outline

outline colour - secondary2

outline-weight - 1pt, inside

Background

background - tertiary-white

Label

label colour - primary

label size - label2

position - center on outline

margin - SP_1

padding inside field - 4px each side

background - tertiary-white

Mandatory indicator

asterisk colour - primary

Input

input type - list selection

value - not null

input colour - secondary2

input size - body1

margin - SP_2

alignment - left

End adornment (req.)

icon - 24x24px

icon - arrow down

margin - SP_2

padding to text - SP_1

icon colour - primary

Hover states (Desktop ONLY)

Default

Variant A - No Value

select-noValue-hover

Specifications

Size

width - 327px

height - 56px

Radius

corner-rad - see radius

Outline

outline colour - tertiary-black-80

outline-weight - 1pt, inside

Background

background - tertiary-white

Label

label colour - primary

label size - label1

margin-left - SP_2

alignment - left

Mandatory indicator

asterisk colour - primary

Input

input type - list selection

value - null

End adornment (req.)

icon - 24x24px

icon - arrow down

margin - SP_2

padding to text - SP_1

icon colour - primary

Variant B - Value

select-value-hover

Specifications

Size

width - 327px

height - 56px

Radius

corner-rad - see radius

Outline

outline colour - tertiary-black-80

outline-weight - 1pt, inside

Background

background - tertiary-white

Label

label colour - primary

label size - label2

position - center to outline

margin-left - SP_1

padding inside field - 4px each side

background - tertiary-white

alignment - left

Mandatory indicator

asterisk colour - primary

Input

input type - list selection

value - not null

input colour - primary

input size - body1

margin - SP_2

alignment - left

End adornment (req.)

icon - 24x24px

icon - arrow down

margin - SP_2

padding to text - SP_1

icon colour - primary

Error

Variant A - No Value

select-noValue-hover-error

Specifications

Size

width - 327px

height - 56px

Radius

corner-rad - see radius

Outline

outline colour - secondary2

outline-weight - 1pt, inside

Background

background - tertiary-white

Label

label colour - primary

label size - label1

margin - SP_2

alignment - left

Mandatory indicator

asterisk colour - primary

Input

input type - list selection

value - null

End adornment (req.)

icon - 24x24px

icon - arrow down

margin - SP_2

padding to text - SP_1

icon colour - primary

Variant B - Value

select-value-hover-error

Specifications

Size

width - 327px

height - 56px

Radius

corner-rad - see radius

Outline

outline colour - secondary2

outline-weight - 1pt, inside

Background

background - tertiary-white

Label

label colour - primary

label size - label2

position - center on outline

margin - SP_1

padding inside field - 4px each side

background - tertiary-white

Mandatory indicator

asterisk colour - primary

Input

input type - list selection

value - not null

input colour - primary

input size - body1

margin - SP_2

alignment - left

End adornment (req.)

icon - 24x24px

icon - arrow down

margin - SP_2

padding to text - SP_1

icon colour - primary

Focused states

Default

Variant A - No Value

select-noValue-focused

Specifications

Size

width - 327px

height - 56px

Radius

corner-rad - see radius

Outline

outline colour - secondary1

outline-weight - 2pt, inside

Background

background - tertiary-white

Label

label colour - primary

label size - label2

position - center to outline

margin-left - SP_1

padding inside field - 4px each side

background - tertiary-white

alignment - left

Mandatory indicator

asterisk colour - primary

Input

input type - list selection

value - null

End adornment (req.)

icon - 24x24px

icon - arrow down

margin - SP_2

padding to text - SP_1

icon colour - primary

Variant B - Value

select-value-focused

Specifications

Size

width - 327px

height - 56px

Radius

corner-rad - see radius

Outline

outline colour - secondary1

outline-weight - 2pt, inside

Background

background - tertiary-white

Label

label colour - primary

label size - label2

position - center to outline

margin-left - SP_1

padding inside field - 4px each side

background - tertiary-white

alignment - left

Mandatory indicator

asterisk colour - primary

Input

input type - list selection

value - not null

input colour - primary

input size - body1

margin - SP_2

alignment - left

End adornment (req.)

icon - 24x24px

icon - arrow down

margin - SP_2

padding to text - SP_1

icon colour - primary

List selection for open selection (Focused state)

Selected list item	Unselected list item
list-selected	list-unselected
Specifications
background - secondary2-20 text-colour - primary text-size - body2	background - tertiary-white text-colour - primary text-size - body2
Use when Customer hovers over a selection (Desktop ONLY) Customer has selected an element in the list and opens it back up.	Use when The list item was/is not selected by the customer.
Don’t use when The list item was/is not selected by the customer.	Don’t use when Customer has selected the list item.

Selected list item

Unselected list item

Screenshot 2023-04-19 at 12.25.19 PM.png

list-selected

Screenshot 2023-04-19 at 12.25.28 PM.png

list-unselected

Specifications

background - secondary2-20

text-colour - primary

text-size - body2

background - tertiary-white

text-colour - primary

text-size - body2

Use when

Customer hovers over a selection (Desktop ONLY)
Customer has selected an element in the list and opens it back up.

Use when

The list item was/is not selected by the customer.

Don’t use when

The list item was/is not selected by the customer.

Don’t use when

Customer has selected the list item.

Error

Variant A - No Value

select-noValue-focused-error

Specifications

Size

width - 327px

height - 56px

Radius

corner-rad - see radius

Outline

outline colour - secondary2

outline-weight - 2pt, inside

Background

background - tertiary-white

Label

label colour - primary

label size - label1

position - center to outline

margin - SP_1

padding inside field - 4px each side

background - tertiary-white

alignment - left

Mandatory indicator

asterisk colour - primary

Input

input type - list selection

value - null

End adornment (req.)

icon - 24x24px

icon - arrow down

margin - SP_2

padding to text - SP_1

icon colour - primary

Variant B - Value

select-value-focused-error

Specifications

Size

width - 32px

height - 56px

Radius

corner-rad - see radius

Outline

outline colour - secondary2

outline-weight - 2pt, inside

Background

background - tertiary-white

Label

label colour - primary

label size - label2

position - center to outline

margin - SP_1

padding inside field - 4px each side

background - tertiary-white

alignment - left

Mandatory indicator

asterisk colour - primary

Input

input type - list selection

value - not null

input colour - primary

input size - body1

margin - SP_2

alignment - left

End adornment (req.)

icon - 24x24px

icon - arrow down

margin - SP_2

padding to text - SP_1

icon colour - tertiary-60

Inactive states

Variant A - No Value

select-noValue-inactive

Specifications

Size

width - 327px

height - 56px

Radius

corner-rad - see radius

Outline

outline colour - tertiary-black-60

outline-weight - 1pt, inside

Background

background - tertiary-white

Label

label colour - tertiary-black-60

label size - label1

position - center to outline

margin-left - SP_2

padding inside field - 4px each side

background - tertiary-white

alignment - left

Mandatory indicator

asterisk colour - tertiary-black-60

Input

input type - list selection

value - null

End adornment (req.)

icon - 24x24px

icon - arrow down

margin - SP_2

padding to text - SP_1

icon colour - primary

Variant B - Value

select-value-inactive

Specifications

Size

width - 327px

height - 56px

Radius

corner-rad - see radius

Outline

outline colour - tertiary-black-60

outline-weight - 1pt, inside

Background

background - tertiary-white

Label

label colour - tertiary-black-60

label size - label2

position - center to outline

margin-left - SP_1

padding inside field - 4px each side

background - tertiary-white

alignment - left

Mandatory indicator

asterisk colour - tertiary-black-60

Input

input type - list selection

value - not null

input colour - tertiary-black-60

input size - body1

margin - SP_2

alignment - left

End adornment (req.)

icon - 24x24px

icon - arrow down

margin - SP_2

padding to text - SP_1

icon colour - tertiary-60

Options for ALL Selection fields

Option A - Selection field size

Example - Small	Example - Default
selectS-value	select-value
Use when Screen size is small.	Use when Screen size allows for it.
Don’t use when Default size can be used.	Don’t use when Screen size is small.

Example - Small

Example - Default

Screenshot 2023-04-19 at 11.47.53 AM.png

selectS-value

Screenshot 2023-04-19 at 11.47.08 AM.png

select-value

Use when

Screen size is small.

Use when

Screen size allows for it.

Don’t use when

Default size can be used.

Don’t use when

Screen size is small.

Specifications

This smaller size of the textfield input functions the same way a default size would. The only difference is their height:

40px

Possible combinations

This option can be combined with all other options.

How to find variation on Figma

Figma overview

The user can choose between the sizes

Small (40px height)
Default/ Normal (56px height)

Option B - Input value (mapped out above)

Example - NO	Example - YES
select-noValue	select-value
Use when User has not selected a value into the input field yet.	Use when User selected a value from the dropdown list.
Don’t use when there is an input value.	Don’t use when There is no value input from the user yet.

Example - NO

Example - YES

Screenshot 2023-04-19 at 11.52.42 AM.png

select-noValue

Screenshot 2023-04-19 at 11.52.51 AM.png

select-value

Use when

User has not selected a value into the input field yet.

Use when

User selected a value from the dropdown list.

Don’t use

when there is an input value.

Don’t use when

There is no value input from the user yet.

Possible combinations

This option can be combined with all other options.

How to find variation on Figma

Figma overview

The user can switch between an selection value or not having on when designing the field.

The related switch is called ‘Has value’.

Option C - Mandatory/Required fields

Example - NO	Example - YES
select-value-noReq	select-value
Use when Selection is not required to complete a process, but is additional information that supports the customer experience.	Use when Selection 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 Selection is essential to completing a process and can’t be skipped.	Don’t use when Selection is optional information that adds to the customer experience, but is not essential.

Example - NO

Example - YES

Screenshot 2023-04-19 at 11.58.38 AM.png

select-value-noReq

Screenshot 2023-04-19 at 12.02.15 PM.png

select-value

Use when

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

Use when

Selection 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

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

Don’t use when

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

Specifications

The mandatory/ required state is indicated by an asterisk (*) at the end of the label.

Text style - style of the related label (for this instance: label1)

Text colour - style of the related label (for this instance: primary)

Possible combinations

This option can be combined with all other options

How to find variation on Figma

Figma overview

When a textfield is mandatory or required, the user can switch it on and off in the designs in Figma.

The related switch is called ‘required’.

Option D - Error state

Example - NO	Example - YES
select-value	select-value-error
Use when There has not been an error check triggered yet. Customer has selected a value from the list selection.	Use when Customer has not selected an input, BUT it is required.
Don’t use when Input is not correct or not given by customer.	Don’t use when Customer selected a list item. No error check has been triggered.

Example - NO

Example - YES

select-value

select-value-error

Use when

There has not been an error check triggered yet.
Customer has selected a value from the list selection.

Use when

Customer has not selected an input, BUT it is required.

Don’t use when

Input is not correct or not given by customer.

Don’t use when

Customer selected a list item.
No error check has been triggered.

Possible combinations

This option can be combined with all other options.

How to find variation on Figma

Figma overview

When the textfield fires an error (in case it is mandatory and does not fit the necessary criteria), the Figma user changes the state to ‘error’ on.

The related field is ‘error’.

The default state is off.

Option E - Start Adornment (sA)

Example - NO	Example - YES
select-value	select-value-error
Use when there is no extra information needed to convey the purpose of the selection field	Use when there is an extra icon needed to support the purpose of the selection field
Don’t use when it is not clear what the selection field is for.	Don’t use when the icon can’t be clearly identified by the customer

Example - NO

Example - YES

Screenshot 2023-04-28 at 10.37.17 AM.png

select-value

Screenshot 2023-04-28 at 10.34.18 AM.png

select-value-error

Use when

there is no extra information needed to convey the purpose of the selection field

Use when

there is an extra icon needed to support the purpose of the selection field

Don’t use when

it is not clear what the selection field is for.

Don’t use when

the icon can’t be clearly identified by the customer

Specifications

Screenshot 2023-04-28 at 10.31.45 AM.png

Icon - see Iconography library

Icon colour - primary (duo tone)

Icon size - default

Possible combinations

This option can be combined with all other options, however, be considerate when to use it as it adds additional information to the screen and could overwhelm the customer.

How to find variation on Figma

Figma overview

When the textfield fires an error (in case it is mandatory and does not fit the necessary criteria), the Figma user changes the state to ‘error’ on.

The related field is ‘error’.

The default state is off.

Option F - End Adornment (eA)

This is a requirement for the selection field and won’t change across any selection field.

Option G - Help text

Example - NO	Example - YES	Example - YES-ERROR
select-noValue	select-noValue-help	select-noValue-focused-helpError
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 exactly this selection field relates to.	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.

Example - NO

Example - YES

Example - YES-ERROR

Screenshot 2023-04-19 at 12.13.30 PM.png

select-noValue

Screenshot 2023-04-19 at 12.13.50 PM.png

select-noValue-help

select-noValue-focused-helpError

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 exactly this selection field relates to.

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.

Specifications

Text size - label2

Text colour - primary

Possible combinations

This option can be combined with all other options EXCEPT ‘Option I - open/closed’ for the open selection.

How to find variation on Figma

Figma overview

The helper text can be switched on and off for most selection field state.

When ‘helperText’ is switched on, a user can

add an icon from the icon library (only allowed when ‘helpIcon’ switched on)
add a value to the help text via ‘hT value’ to show more information to the user.

Option H - Active/ Inactive

Example - active	Example - inactive
PICTURE TBC text-noValue - active	PICTURE TBC text-noValue-inactive
Use when Customer is required to make a selection. Customer is allowed to select a different list item.	Use when Customer is not allowed to change value of the selection.
Don’t use when Customer is not allowed to change value of the selection field.	Don’t use when Customer is allowed to change the selection.

Example - active

Example - inactive

PICTURE TBC

text-noValue - active

PICTURE TBC

text-noValue-inactive

Use when

Customer is required to make a selection.
Customer is allowed to select a different list item.

Use when

Customer is not allowed to change value of the selection.

Don’t use when

Customer is not allowed to change value of the selection field.

Don’t use when

Customer is allowed to change the selection.

Possible combinations

This option can be combined with the ALL options EXCEPT:

Option D - Error state

How to find variation on Figma

Figma overview

A field can be made inactive, meaning that the user can’t change its input anymore.

The Figma user can switch this state on and off via ‘inactive’.

The default state is off.

Option I - closed/ open TBD

Example - closed	Example - open
text-noValue	text-noValue-focused-open
Use when Customer has not selected the field yet.	Use when Customer wants to make a selection for that particular selection field.
Don’t use when Customer is making a selection	Don’t use when Customer has not selected the field.

Example - closed

Example - open

Screenshot 2023-04-19 at 12.21.00 PM.png

text-noValue

Screenshot 2023-04-19 at 12.22.00 PM.png

text-noValue-focused-open

Use when

Customer has not selected the field yet.

Use when

Customer wants to make a selection for that particular selection field.

Don’t use when

Customer is making a selection

Don’t use when

Customer has not selected the field.

Possible combinations

This option can be combined with the ALL options EXCEPT:

Option D - Error state

How to find variation on Figma

Figma overview

The user can select from a list of options.

With the field ‘SelectionOpen’, the Figma user can decide if the field is shown in an open format or closed.

Closed means that the user either hasn’t selected a value or has already selected a value and moved on to another field.

The default for this field is closed, except for the focused state.

02. Usage and application

Standard states

Default States

Default

Use when	Don’t use when
Customer is not interacting with the textfield.	Customer has selected the textfield. Customer has entered text input to the textfield.

Error

Use when	Don’t use when
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.

Hover state (Desktop ONLY)

Default

Use when	Don’t use
Customer hovers their mouse over the textfield.	in any other circumstance besides hovering on desktop.

Error

Use when	Don’t use when
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.

Focused state

Default

Use when	Don’t use
Customer is typing within the textfield. The current textfield is selected by the customer.	Customer has not selected the textfield.

Error

Use when	Don’t use when
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.

Inactive state

Use when	Don’t use
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.

03. Interaction behaviour

Whenever there is a selection follow the following order of states:

Selection field variant	Visual reference	User behaviour
Default behaviour
Default Var A →		User has not yet selected the input field and there is no input yet.
→ Focused open →		User selects current input field and selects a value from the dropdown list underneath.
→ Focused Var B →		User selected a value
→ Default Var B		User 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 selected something, however, it is the wrong input. (This usually includes a helptext)
Focused state		User has clicked on the selection that fired an error and starts changing the value.

📱

Prototype for textfield interaction behaviour https://www.figma.com/proto/F1fNT99VGTJHJ1jAnjFTn6/Youtap-Style-guide-V1.0.2023?page-id=959%3A68092&node-id=1201-67866&viewport=192%2C-2359%2C0.92&scaling=min-zoom&starting-point-node-id=1201%3A67866

04. Accessibility

05. Resources

Type	Link	Notes
Figma file	https://www.figma.com/file/F1fNT99VGTJHJ1jAnjFTn6/Youtap-Style-guide-V1.0.2023?node-id=959%3A68093&t=b2IdpdWvvk1Byc7C-1
WCAG2.0 Checklist	https://www.w3.org/TR/2006/WD-WCAG20-20060427/appendixB.html	Accessibility
Figma prototype for interaction behaviour	https://www.figma.com/proto/F1fNT99VGTJHJ1jAnjFTn6/Youtap-Style-guide-V1.0.2023?page-id=959%3A68092&node-id=1201-67866&viewport=192%2C-2359%2C0.92&scaling=min-zoom&starting-point-node-id=1201%3A67866
Colour contrast Figma Plugins	For Design https://www.figma.com/community/plugin/733159460536249875/A11y---Color-Contrast-Checker For final inspection https://www.figma.com/community/plugin/911262488575486588/Contrast
Figma Playground		For developers to try out different selection states