Doist/reactist

TextField: Why is `label` required?

scottlovegrove opened this issue · 3 comments

scottlovegrove commented

🐛 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
image
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.

gnapse commented

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.