feat(form-field): new approach to wrap input fields of all kinds

[wuda-io]

Floating labels with css only and no more empty placeholders needed. Better usability for forms by using the html fieldset element.

Proposed changes

New animation style of inputs and later grouping multiple input fields.

Screenshots (if appropriate) or codepen:

Screen.Recording.2025-03-06.at.09.37.28.mov

Types of changes

• Bug fix (non-breaking change which fixes an issue).
• New feature (non-breaking change which adds functionality).
• Breaking change (fix or feature that would cause existing functionality to change).

Checklist:

• I have read the CONTRIBUTING document.
• My commit messages follows the conventional commit format
• My change requires a change to the documentation, and updated it accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.

[wuda-io]

I think we should do a 2.2.2 release first, then implement the changes in 2.2.3 after that.
Because then we should change the styles for all inputs too and update the docs. Wdyt?

[gselderslaghs]

The end result looks great, especially the animations, great work @wuda-io. I can imagine scenarios where you'd be able to wrap multiple fields with their label underneath the same fieldset element, would it work when using the fieldset with multiple input fields and their corresponding labels?
Definitely better approach as requiring empty placeholder attribute. Did not test it through with other components but I guess it could work out well.

[wuda-io]

The specs from m3 material suggest to have prefix and postfix stuff attached to the input but i dont think there are more than one label. I have not tested it yet with multiple inputs. But i think we should proceed as the specs suggest since this are the most common use cases i guess.

[gselderslaghs]

I don't really understand why to use the legend and label combined for the specific input field, since they mean to have different outcomes, eg. legend element used to wrap the fieldset label and label to wrap the field label, in the proposed setup there is no possibility to wrap multiple input elements together within the same fieldset

I guess an implementation with less specific CSS selector, eg. changing fieldset.form-field to .form-field and only put the label styling on the label element (with additional CSS pseudo selectors) would allow to use multiple input fields under the same fieldset, which has advantages as retrieving multiple input field values from one specific fieldset

[wuda-io]

Yes you are right, thats a good hint.
I copied it from the old structure. I don't know how it is from a usabiltiy point of view. I will test it with multiple inputs and labels.

I think a cool test would be one input for a number and 1 select for a unit or so. E.g. "2.5 kg" or "12 hours". This would be a nice usecase. I think it is also in the m3 specs.