Add clear guidance on how to mark fields as Optional

[JasonStoltz]

Is your feature request related to a problem? Please describe.
We received a question in Slack about how to mark fields as "required". It wasn't apparent to the user that our guidance is to mark optional fields instead of required fields, and beyond that, what the standard is for marking fields as optional.

In our guidance for forms, we say the following:

Use a label (and description if needed) for each form field. All form fields should be considered required unless stated alongside the label.

Reference: https://eui.elastic.co/#/forms/form-layouts/guidelines

Describe the solution you'd like
We should add additional guidance, or better yet, an example, of how to indicate form fields as "Optional".

We should first validate this by analyzing current usage in Kibana, but it would appear that the going pattern is to use the text "(Optional)" at the end of a form field.

Example: Stack Management > Rules > Create rule

Describe alternatives you've considered
N/A

Desired timeline
There is no rush to do this, but at the same time, it should be an easy thing to add to alleviate future confusion.

Additional context
https://uxdesign.cc/form-field-required-vs-optional-9b4d7cdbf400
https://uxmovement.com/forms/always-mark-optional-form-fields-not-required-ones/

[julianrosado]

My take:

1. The user should not be required to distinguish what fields are and are not required in longer forms.
2. Adding "Optional" to the end of the label's text is not clear, easily missable, and not a common pattern.

I've always liked NNG's advice on labeling here: https://www.nngroup.com/articles/required-fields/

How to Mark the Required Fields?

There are at least two options here: an asterisk (whether red or not) and the word “required” (in the form field).

and

Should You Mark the Optional Fields, Too?

While it’s not obligatory, marking the optional fields does lighten the user’s cognitive load: in the absence of that word, the user must look around and infer that the field is optional based on the other fields being marked as required. If the word optional is next to the field descriptor, that task becomes a tad easier.

Not specifying that a field is optional is not a deal breaker, but doing so is a nice perk.

I would propose what I was originally doing in my own form which is adding a clear and separate label, emphasized with color, for each field denoting it's necessity:

It provides clear guidance, where it is expected, and with proper flex ordering can even be used in narrow mobile screens.

As noted in the NNG article, accessibility can be handled separately:

A Note on Accessibility
After this article was published, we received a few questions about the accessibility of the asterisk as a required-field marker. In HTML 5, it is possible to add markup to the form field to instruct screen readers to say the word "required" whenever they encounter an asterisk next to the field label.

Additionally, I'd recommend as a guideline that if you have < 3 fields and they are all the same level of requirement (think login form) you don't need to explicitly call out they are required or optional.

[cee-chen]

@JasonStoltz @julianrosado @kyrspl This feels like it belongs in the patterns repo or as a discussion - can we move it?

[JasonStoltz]

I converted this to a discussion and opened up a cooresponding request for the Design System: https://github.com/elastic/platform-ux-team/issues/216