Background goal

Explore design solutions for Field component before implementing it in Codex in T309239.

Design proposal

Label style

Label could be customizable to Bold and Regular, but the base style will be Bold.

• Text size: base font 14px on desktop and 16px on mobile.
• Format: base style Bold although it could be customized to Regular
• Color: color-base

Required/Optional

Since all form fields are required by default, we will indicate just the optional ones in order to avoid too many asterisks across the form page. Optional text will appear next to the label and it will be included within the text when the label is multiline. It will be indicated with the whole word in order to be translated to different languages.

• Text size: base font 14px on desktop and 16px on mobile.
• Color: color-subtle
• Separation between label and "Optional": 4px

Label and description

A description will be implemented as part of the Field component. It will use the following styles:

• Text size: base font 14px on desktop and 16px on mobile.
• Color: color-subtle
• It could include a link within the text

We will provide some guidelines about the use of Description, Helper text and Tooltip since all of them are used to display informative text for the user but they have some differences. Description and Helper text could contain links while Tooltip will display just informative text.

Tooltip

Tooltip will be placed next to the label so it's not separated from the label when the field is too long. Tooltip will be included within the label text when it's multiline.

• Color: content-base
• We can use a quiet neutral button to make the tooltip interactive
• Separation between label and tooltip icon: 8px

Helper text and Inline message

For this MVP task, we will implement the same as we have in production to avoid possible problems. So the inline message will appear below the helper text and both texts will be visible in the Field in some cases.
Since the InineMessage is currently a bit prominent, it could be redesigned in T331623 to be more subtle and fit better with the helper text.

Characters counter

❌ It will not be implemented as part of the MVP task. It will be implemented in this other task T331000

Field action (e.g. delete)

According to how the fields are connected, the Field component will display two different types of actions:

• Inline action
• Stacked action

Label placement

We should unify our forms with one single option (label on top or label on left) in order to unify our forms as much as possible. We will implement the label on top for the MVP task. The option with the label on the left will be implemented in future iterations just if it's really needed in the product.

---

Acceptance criteria

• Explore design proposals for:
  • Label style
  • Required/Optional
  • Label and description
  • Tooltip
  • Helper text and Inline message
  • Characters counter It will be implemented in T331000
  • Field action
  • Label placement
• Review proposals with the design and DST team