Doist
TextField: Why is `label` required?
🐛 Bug report
Current behavior
On TextField and other of our inputs, the label field is required, but why? I can put label="" and it then gives me a plain input with no additional spacing for the label used. So if I can put an empty string in, why is the field required?
Example:
<TextField
label=""
/>
which will give me
Not there's no additional space taken up where the label would be, so why is it needed?
Expected behavior
Shouldn't have to put the label in.
The example screenshot you put above is technically not an input field. It's a block of text meant to be copied, that for some reason from the design POV tends to be depicted as something resembling an input field, or maybe even implemented using an input field in read-only mode. Such a situation does not justify allowing an input field to be left without a label. See reasons below about the importance of a label.
As for the key issue here: it is good practice that input fields are always labelled. From the accessibility POV all fields should be labelled. Yes, there's aria-label if you want visually impaired people to know what the field is about. But, ironically, that will not help users without a visual impairment, who can still be confused about what a field is for. You could further argue that for people that can see without a problem you can put a placeholder="…". Placeholders only help when the field is not filled in.
Granted, there are a few cases where input fields could go without labels without making it confusing. The few cases I can think of are search input fields, which generally stand on their own, and are not part of a larger form with other fields (which is where some confusion for lack of labels can kick in). These search fields generally are accompanied by cues in the UI that make it more than clear that their purpose is for searching. I've been actually thinking that we should add a SearchField to the design system, given that we already implemented one in Twist code already.
TextField: Why is label required?
Short answer: To make you think about accessibility, while still allowing you to opt-out with an empty string (EDIT: or null) 🙂
To add more context, we allow label={null} because the type of TextField is React.ReactNode and not just a string. And that's a more idiomatic way to explicitly say "I know what I'm doing, and I do not need a label in this case". Originally that was possible, but it left the weird gap above the field, the one meant to separate the label from the field. Ever since #683 we took care of that, and now even that space is gone if label={null} or if label="".