Required form fields to have the asterisks after the label

[danielmutis]

Pattern to amend

Form input fields and dropdowns

Visual

Currently, the asterisk is placed before the label. I would like to propose placing it after the label, as it's most common in other design systems.

Context

I find that the current placement breaks the alignment of the labels and visually looks very odd. It also isn't the most common way of flagging a field as required, since most websites and products place the asterisk after the label.

• Carbon writes the word "Required" after the input which makes it explicit
• Github places the asterisk after the label
• Gov UK also writes optional or required depending on what the majority of the fields are

[lyubomir-popov]

Related issue: https://github.com/canonical/vanilla-framework/issues/3766

[bartaz]

They used to be after the label, but after a design exploration they were changed to before label to make them more visible and easier distinguishable.

Do we want to revert back to "more common" way? Or explore again?

[danielmutis]

The original issue was with the colour red. I see that @AnnSoMuller proposed to have them on the left for scannability. I wonder whether there is an actual need for these to be scannable. We could discuss the most appropriate solution in the next WG meeting, although we could also consider just writing "(required)" or "(optional)" where necessary instead of using the asterisk.

[danielmutis]

Proposal: If the majority of the fields are required, mark only the optional field labels with (optional). If the majority of the fields are optional, mark only the required field labels with (required).

This is the clearest way of communicating whether a field is required or not and doesn't require interpreting the meaning of the asterisk.

[bartaz]

@danielmutis Could you prepare a mockup of the proposal for the next time?

[acarege]

Hi folks, is there an update about this topic?

[syncronize-issues-to-jira[bot]]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-15239.

This message was autogenerated

[danielmutis]

WG: What are the consistency rules between different forms or pages within the same app? For example, switching between settings pages and sometimes showing optional and sometimes required could be strange.

Make a design for what happens when the field label is long.