Support form labels for all form elements

CityOfDetroit / COD-Design-System

Design system for the City of Detroit.

https://cityofdetroit.github.io/COD-Design-System/

MIT License

1 stars 3 forks source link

Support form labels for all form elements #241

Open maxatdetroit opened 3 months ago

maxatdetroit commented 3 months ago

The Problem

Our checkboxes and radio buttons support setting labels using an element attribute, however our input and select elements do not. Additionally, all form elements should support setting labels using slots to enable custom markup if needed.

The Solution

Add a label attribute and slot to our input and select elements.
Update our checkboxes and radio buttons to support a label slot (in addition to the existing label attribute).

maxatdetroit commented 3 months ago

On second thought, we'll leave the label elements coupled with their respective form control in the design system. This seems to be a common paradigm in other popular design system and removes the burden on the design system user to correctly associate the label to the form element.

E.g. https://shoelace.style/components/input/

maxatdetroit commented 3 months ago

Well, now that I'm looking at the design system, it looks like we're not consistent in how we approach labels. So this issue will be to bring consistency to our labels and form elements.