Input elements of type text create basic, single-line inputs, elements of type select are used to create a drop-down list.

Where this element can be seen?

Element is considered as BT-related one, therefore it can be seen across the whole application.

Text inputs can also be seen in many places, such as the:

• Login form
• All checkout steps
• My account address book, after clicking “add new address”

The best place to see a select input is on the product page configurable options.

How should this element be designed?

How to style text?

<aside> ➡️ Avoid complex password and telephone fields. They take a long time to implement and may significantly prolong the base template development time.

</aside>

<aside> ➡️ On mobile, the minimum font size of this element must be 16px. Otherwise, on focus, iPhone will zoom in to the element.

</aside>

The text input should be displayed in the following states:

• When the element is required

• Disabled state

• Before it was filled in

• While focused, with the cursor

• With error displayed on the input

• After it was filled in

<aside> ℹ️ Usually, styling this element takes from-to: 3-5h

</aside>

An example display of an input element

How to style select inputs?

<aside> ➡️ Note, that on desktop – select has a custom appearance, on mobile – native.

</aside>

The select input should be displayed in the following states:

• When the element is required
• Disabled state
• Before it was selected
• Opened (focused), when option list is displayed
• Opened (hovered), when option list is displayed, and some option hovered
• With error displayed on the input
• After it was selected

An example display of the select element

<aside> ➡️ Inputs represented on Base Template should be the same as for molecules (address form) and the rest of the designs if inputs should inherit default styles.

</aside>

How the design may look like?

Design Example #1

Design Example #2

Issues with the designs

• Inputs on the Base template are not always the same as for actual design in the forms

How to develop styles for this element?

In ScandiPWA, text input styles are defined in 2 places:

• style/base/_input.scss defines the base styles for input elements
• The Field component contains additional styles

To override this component run the next command:

scandipwa override component Field

ScandiPWA had a lot of changes for Field logic and architecture across different versions, the next examples will be related to 5.1.1. since we have implementation examples for this version, 5.2.x. has different examples and new input types implemented as React components.

• ScandiPWA 5.1.x

How the implementation may look like?

Implementation example #1

Implementation example #2