== Background goal
Explore design solutions for Field component before implementing it in Codex in T309239.
=== Design proposal
| [[ https://www.figma.com/file/uBYlqttQgO2tXXxTVJQj0T/Form-field---T309239?node-id=1504%3A10717&t=VNwsM6mhuY4Y03ZX-11 | Explorations captured in this Figma file ]] |
===== 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.
- Text size: base font `14px` on desktop and `16px` on mobile.
- Color: `color-subtle`
- Separation between label and "Optional": `4px`
{F36867698}
===== 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.
{F36904742}
===== 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: `6px`
{F36867741}
===== 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.
| {F36904761} | {F36904758} |
| Current InlineMessage | Proposed InlineMessage in T331623 |
===== 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`
{F36888368}
===== 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.
{F36904770}
---
=== Acceptance criteria
[-] Explore design proposals for:
[-] 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
[] Decide on the best solution to implement the component