canonical / canonical/vanilla-framework

Required form fields to have the asterisks after the label

Open
#4,865 10 comments 2 reactions 1 assignee Claimed by @danielmutis View on GitHub
Priority: Medium Tier: Global WG: Validated
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

## Pattern to amend
[Form input fields and dropdowns](https://vanillaframework.io/docs/base/forms)

## Visual
Screenshot 2023-08-30 at 16 57 50

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](https://carbondesignsystem.com/components/form/usage#live-demo) writes the word "Required" after the input which makes it explicit
* [Github](https://primer.style/design/ui-patterns/forms/overview) places the asterisk after the label
* [Gov UK](https://design-system.service.gov.uk/components/fieldset/) also writes optional or required depending on what the majority of the fields are

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.