Input label on grouped fields

[hellojesswatson]

Hi Paste team,

Do you have any guidance on how to handle input labels for grouped/related fields? For example, I am working on a few "time frame" settings where the user needs to set a duration and choose a unit of time like days, hours, etc. Can these grouped fields use one label, or is it best to give each input its own label, as pictured below?

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

According to the Paste design system guidelines, each form field should have its own label. This is crucial for accessibility as it helps screen readers and other assistive technologies understand the purpose of each field. Grouping related fields under a single label might seem like a neat solution, but it can create confusion for users relying on assistive technologies and diminish the overall accessibility of your application.

For your "time frame" settings where the user needs to set a duration and choose a unit of time like days, hours, etc., it is best to give each input its own label. This approach aligns with the accessibility guidelines provided by Paste, ensuring that each input field is clearly described and accessible.

Here's an example of how you might structure these inputs with labels:

<Label htmlFor="durationInput">Duration</Label>
<Input id="durationInput" type="number" placeholder="Enter duration" />
<Label htmlFor="timeUnitSelect">Unit of Time</Label>
<Select id="timeUnitSelect">
  <Option value="days">Days</Option>
  <Option value="hours">Hours</Option>
  // Add more options as needed
</Select>

This structure ensures that both the duration input and the unit of time select have their own labels, making it clear and accessible for all users. Remember, the goal is to make your application usable for everyone, and adhering to accessibility guidelines is a key part of that.

For more information on accessibility and form elements in Paste, you can refer to the accessibility section of the input component docs.

Let me know if this helps or if you have any more questions!

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Accessibility considerations for multiple inputs (updated: 11/01/2023, similarity score: 85%)
• Accessibility of input fields (updated: 11/01/2023, similarity score: 85%)
• Are labels required for all inputs? - Answer (updated: 11/01/2023, similarity score: 85%)

[roxanagomez]

Hi @hellojesswatson Paste bot is correct, for accessibility reasons, we always recommend that all input fields have individual labels. In the examples you shared, it doesn't seem to affect the design at first glance, but is there any specific reason why you wouldn't include the labels?

If for some reason the designs prevent that, you could give each input an aria-label prop that takes a string description of the input, which will be read aloud by assistive technologies. This solution isn't ideal for sighted users, so if you decide to go that route, the relationship between fields needs to be very clear.