Feature request: Make label optional field in Input

[piotrowski]

When I am not providing label prop to input there is empty label html tag that takes up a space.

Use case where label on top is a problem for me: Before: After:

What do you think? I can create PR that will add this feature.

[roblevintennis]

I'm reading from my phone so don't have access to code but...

1. This is Svelte? It kind of doesn't matter because if we add a prop we/I need to add to other frameworks too.

2. Are you relying on the placeholders for labeling? I wouldn't recommend it but also don't want AgnosticUI to prohibit you.

3. Is it throwing an error? I think because we haven't ported Svelte library package to Typescript we aren't. I would anticipate in somewhat near future we will (once typescript port completed).

4. I think if we offer a workaround for your use case the best way would be:

• Keep label as required and add back a label from you application code
• add a prop to indicate isLabelVisuallyHidden and sorry but there should be a rather overt comment that this is an escape hatch and you should have a very good reason for visually hiding labels which still affects sighted users, placeholders are not typically sufficient, and that the required label will be available to screen readers but visually hidden
• Then we will check for the Boolean property and for that case replace the label with a <span class="screenreader-only>{theLabelIForgetWhatItsCalled}</span>

That class is an AgnosticUI global and will visually hide and add no padding/margin but will still make the label available to screenreaders and assistive technology.

What do you think of above?

Are you comfortable doing it for multiple frameworks or would you like help? Either way I think we'd just start with one to ensure we're happy with the resulting API

Also does this mean other form fields might require similar treatments?

[roblevintennis]

And I believe the choice inputs do something similar (in terms of using a Boolean) for hiding the fieldset border if an example helps you.

I think the html structure may be affected but I'm sure there will be a way and I'll leave that as an implementation detail you can figure out (but lmk if you get stuck there and I can try to help).

Hopefully these comments give you enough info to get started 👍🏽

[roblevintennis]

@apiotrowski312 Was this something you'll have time to raise a PR for?

[piotrowski]

Unfortunately I did not find time lately to create PR, I might be able to work on that next week, if that is fine for you.

[roblevintennis]

Yeah I'm good with that--thanks!

[roblevintennis]

I happened to see a similar issue https://github.com/shoelace-style/shoelace/issues/728

Apparently, they already allow for label omission but the issue reported is to instead use a screen reader only approach so it's still available to screen readers. It's essentially the same strategy I've suggested above.

[roblevintennis]

222 fixes this and I added the svelte storybook spec I had asked for on the PR (then elected to just merge and add it in):

[master 1a9981de] Adds InputWithHiddenLabel svelte storybook story. Removes lang=ts in agnostic-svelte package as that will be done in agnostic-svelte-ts

Thanks @apiotrowski312 I appreciated you taking the time to bring the idea to my attention and contribute the PR! Let me know if this gets you unblocked or if you have any other insights as you use AgnosticUI! 🥂