docs: improve replacement examples for form-control

[thiagomajesk]

On which page do you see this issue?

https://daisyui.com/components/input/

Describe the issue

Previously one would have form-control to represent grouped form elements like label + input. Then the upgrade guide recommends using a fieldset instead, but I found the markup examples to be quite confusing if compared to the upgrade guide: https://daisyui.com/docs/upgrade/#other-removals.

For instance, we are missing an example of using a simple fieldset + label without a legend (which is closer to the upgrade guide), instead, the only grouping example we have in the input docs is the fieldset + fieldset-legend, the closest example we have right now is located in the section"With fieldset and fieldset-legend", but it's not quite the same (the checkbox example, for instance, assumes the use of a fieldset with label).

I think the examples are a bit confusing since we don't have a 1:1 replacement in terms of semantics. The fieldset page states that fieldset-legend is used for the title and fieldset-label is used for the description, but all the examples bellow have different semantics:

• https://daisyui.com/components/fieldset/#fieldset-fieldset-legend-and-fieldset-label
• https://daisyui.com/components/fieldset/#fieldset-with-background-and-border
• https://daisyui.com/components/fieldset/#fieldset-with-multiple-inputs
• https://daisyui.com/components/fieldset/#login-form-with-fieldset

The first two examples use fieldset-label as a description for the input and the last two examples use it as the label itself. I think the closer example of the markup for form-control would be something like the following (also closer to the upgrade guide example):

<fieldset class="fieldset">
  <label class="label" for="name">Name</label>
  <input id="name" class="input" placeholder="Name" />
</fieldset>

That being said, after looking at things closely it looks like fieldset-legend, fieldset-label, and label all have some overlap in terms of functionality, and at the same time, they all also have different semantics. I'm not sure this is the best solution, but here's what I would do:

• Keep fieldset-legend examples explicit in the cases where a fieldset makes sense, like here: https://daisyui.com/components/fieldset/#login-form-with-fieldset (not sure if this is the best example because if you have composable components, instead of this markup, you would actually have fieldsets within fieldsets)

• Remove the usage of fieldset-label - I'm not sure this class makes a difference as a description of an input since can just style a p or small (maybe adding a utility for text-muted would be enough). For the cases where fieldset-label is actually used as a label, maybe just using a label class would be better instead of having a separate one!?

Even if those are not the best solutions, I think it's worth considering the overall sentiment because there's some overlap in terms of functionality and the markup seems a bit "unconventional" (I think most would expect fieldsets to only group several controls which would be a different use-case than a form group) and can make things confusing, so my suggestion would be to be consistent with the usage of label and fieldset + legend in those situations.

What browsers are you seeing the problem on?

All browsers

PS.: Congrats on the amazing launch, I'm seeing things as I migrate a project myself ❤ 😄

[github-actions]

Thank you @thiagomajesk for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[alxNoComment]

I agree that there is a bit of complexity. You wrote a lot, but I still don't understand what final usage code you have in mind.