Review "This field is required" on forms pattern

[joanasa89]

"This field is required"

2. Pattern amendment

At the moment the "This field is required" appears in a very subtle way and in the same style as the input's labels (see image)

Is this a proposal or an amendment?

• Amendment
• Pattern : Forms

Proposal

I propose using a different style for "This field is required". Here some options:

A - use a different colour (maybe red colour?) and add a red outline to the empty field or B - use italic weight or C - add an asterisk at the end of each label and provide a legend which tells the meaning of it. Something like "* Indicates required field" or D - Reduce the font size to 14px

[richmccartney]

@joanasa89 I suggest talking to @kwm14 & @spencerbygraves as we've done work on this for MAAS and Juju to help the proposal. We've done quite a lot of work on forms.

[kwm14]

@joanasa89 I adopted the styling from @spencerbygraves original design, in MAAS form fields are horizontal rather than vertical so I adjusted the position of 'form label' to address:

• the design is also accessible 👍

MAAS form validation

[joanasa89]

Cool! Looks more intuitive. @yaili is this something we can implement on ubuntu.com?

[richmccartney]

@joanasa89 there are other layout permutations to this, i.e we keep the label on top, or to the left with spacing and also completely inline for forms that require it.

@kwm14 We don't have any other designs showing off this layout do we?

[spencerbygraves]

https://github.com/vanilla-framework/vanilla-framework/issues/731

[yaili]

Isn't this already in Vanilla? 🤔

Some notes: The "This field is required" from the original comment should be styled as an error, and shows up on submit. We have started moving away from indicating required fields, and just indicate the optional ones, as part of the label.

[anthonydillon]

We have decided to move toward labelling just optional fields in the label. For example: https://github.com/canonical-websites/www.ubuntu.com/issues/649.

If the form is submitted with some blank required fields a validation error should be displayed.